Multiple hyperlinks on an area (or image)

slicing + absolute positioning

I was working on a website which had a front banner that looked like a spice cup board and the owners wanted when you click on a certain "jar" it takes you to a certain page in the site. But they already had someone working on this before me and decided to use image slices + absolute positioning.

I'm not saying its a bad solution, I just don't like dealing with multiple images and other penalties (ie. maintenance) associated with it. I would rather go with a single large image and define regions in it that's clickable. That's where image maps come in.

Image maps enable me to define multiple links within a single image. It's clean and doesn't involve any JavaScript or CSS just plain HTML5 markup.

You start off by declaring the image:

<img scr="bigbanner.jpg" alt="frontpage banner" border=0 usemap="#hotspots"/>  

The new thing here is the usemap attribute. The value of the usemap attribute must be the same with the map id. The map element acts as a container for specifications regarding the map's active areas (ie. hotspots), where are define as area elements within the map.

 The matching map markup would be:

<map name="hotspots">  
      <area shape="rect" coords="20,20,170,170" href="somepage2.html"/>  
      <area shape="circle" coords="250,175,50" href="somepage3.html"/>  
      <area shape="poly" coords="117,241,277,312,84,370" href="somepage4.html"/>  
 </map>  

The shape of the area element is influenced by the *duh* shape attribute. Rectangles and circles are fairly easy to use but watch out for with poly. Its the most flexible and most tricky to use. In the example, I'm creating a "triangle"; the first 2 values in the coords form the first point, the second 2, form the second point and the third pair gives use the third (end) point. Given enough coords information, I can make the "poly" area follow the outline of any item on any image.

As for the coordinate values, I just have to remember that the top left corner of the image is 0,0. Also, map is a non-visual element so I can put it anywhere on the page markup.

Making sense of WPF layouts

I started out as a Swing developer and I have the Java Foundation Classes book to prove it. But Swing never really caught on and so I started working with C# and WPF. Windows Presentation Foundation (WPF) isn't what you'd expect for making desktop applications. It kinda feels like making web applications since you "describe" the UI via a XML-like language called XAML. This isn't really a bad thing just different.

I could go on about WPF being different but at the end of the day the foundation of a desktop app is the layout it's built upon. This is what I've learned.

1. By default, WPF apps have a base "Grid Panel" layout. Get rid of it and use "Dock Panel" as your base.
   Dock Panels are the same to Border layout in Swing. The idea is to place the menu on top (DockPanel.Dock="Top"), status bar bottom (DockPanel.Dock="Bottom") and put a "Grid Panel" at the center. Now you have a well-behaved desktop app that reacts well to window re-sizes. 
2. The Grid Panel is like Swing's GridBagLayout only easier to use.
3. Use the Alignment properties in combination with Margin to position elements in a panel; avoid fixed positions (using the x,y coordinates) unless you have a really, really good reason to do so. They don't work out so well when tested against various screen resolutions.
4. Also, the same for height and width. Use min and max properties instead.
5. Don't use blank "label" components to separate components. Use the margin and padding properties. For example, if 2 buttons are side by side, don't put a blank label in-between them to create space.