I finally launched the never-ending homepage redesign project yesterday for my company, so far so good, not everything I want, but at least got what my bosses want. I didn’t like the way how it was put together, but I had fun scripting with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hidden contents because he wants it “the way it is” for the contents. *dies* So I’m stuck with image maps… the loading time on the page is “glorious” to say the least… hey… I do what I asked of me. He didn’t want to hear loading time, the web standards, best practices, and stuff like that. Although, I added the helpful image preloader plugin to speed things up just a bit, better than nothing. Over the course of the project, I’ve learned some little interesting things…

Interesting things I’ve learned…

1. If you add “padding” around an image that has “hotspots” over it; IE (no matter what version) WILL offset the coordinates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Firefox, the image map hotspots behave the way it should be. So if you need to adjust the spacing of the images when using image maps, use “margins”, don’t use “padding”. Took me a short while to figure this out…
2. Relative + absolute positions will snap pictures in any corner you want. In my case, I wanted the image to be lower left corner to achieve the “wiping” effect – otherwise, it’ll just “slide” the image out if you don’t absolute position it.

     	<div style="position:relative">
       	<div style="position: absolute; bottom: 0; left: 0;">Image here</div>
       </div>

3. Too many image map hotspots is like Freddie Cougar’s face… ugly as hell and a freaking nightmare
4. jQuery $.each() saved pounds of my hair once again
5. Do not add negative padding inside a jQuery.animate() – it will crash like a 100 cars pile-up on a highway…
6. Don’t try to explain to my boss why adding more image hotspots inside an image map is such a bad idea – he looks at me funny and starts getting pissy

Besides all the pain and suffering for a month, the most fun I got out of this project was scripting the animations and solving the “image map within an image map” problem. Here’s the run-down of the project:

1. There will be main menu at the bottom of the screen, when the user hovers over each of time, the corresponding content (the image) will “wipe up” – I am calling this Tier 1 menu
   1. Now “wiping” and “sliding” are two different animals, and my mini-boss specifically wants “wiping”, not “sliding”. So I had quite a bit of fun trying to make the image contents “wipe” up
   2. Solution: create a “wrapper” div that wraps all the hidden “content images” – default the “wrapper” to 0px, then use jQuery to animate the height of the “Wrapper” to the full height when hover over. So I basically created a “mask” to do this hide the images. Attach the corresponding image, show, then “wipe” up
2. Each of those image will have image map hotspots (no problem here)
3. Within Tier 1 menu’s contents, one of the contents has multiple links within it and has a Tier 2 menu – better yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…

The Problem

The problem? If you use the same map for all the images, they will have other hotspots showing up in images that you don’t want. Let’s say Image A is using #map1, Image B needs to have the same menu but has different hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvious solution is to have multiple maps. The problem is the Tier 2 Menu shows/hides its contents. So if you have multiple maps, the Tier 2 Menu won’t able to hide and show content accordingly unless you want to code each of the Tier 2 menu with its own little script. Repetitive, inefficient, and probably won’t work.

The Solution(s)

After losing a couple hundreds of my hair, the solution? Create separate image maps for each of the unique hotspots map. So Image A gets its own map, Image B etc… use jQuery to clone the map according to the active menu and attach to the the “main map” (#map1), add a temporary class, and then remove them when the user hovers over a different menu item. Meaning: #map1 is the Tier 2 main menu and is defaulted to Image A. #map1 has the Tier 2 main menu, and the rest has its own unique hotspots maps without the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hovers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hovers to a different one, it removes all the previously attached “hotspots” – I identified them by adding a dummy class in each of the attached <area> map, then append another set if needed. Painful, but not bad for a workaround I think.

I find front-end development is like solving puzzles, and I love solving puzzles especially when it involves jQuery. Well, that’s it folks.

No related posts.

I would eventually do a writeup for my entire design process of coming up with this theme.  That because I think I am having a case of early alzheimer or something.  I can’t remember what I want to do in the next 5 minutes, and I have to resort to use a task manager (Remember the Milk) to remind me of things lately.  So, writing down things is one of the ways trying to improve my crappy memory, and jogging down the process helps me to understand how I came up with certain things and hopefully improve the process later on.  The inspiration for this design came from a book just laying around that got me going.  Besides that, I would like to thank my boyfriend Danny and my bro Wil (JavaJunky) for feedback.

Lastly, an interesting note during the theme building process is that IE7 as everyone knows has 1 or 2 pixels difference between Firefox.  When I tried to add the + sign background images to the lists, it was a big pain and very annoying.  No matter what I did, IE7 seems to be 1 pixel up higher or 1 pixel lower.  Eventually, I added line-height to the text in ratio font of 8pt : 13pt line-height, so 9pt : 14pt and so on… That seems to fix the problem completely.  The problem is that the height of the text are rendered differently from the two browsers.  So, when you CSS-ing fonts and texts, don’t forget to add line-height.  It will save you lots of headaches.

Well, hope you like this new theme.  Feedback are greatly appreciated!

Note: I have not tested this theme on IE6 yet.  I’m focusing on the two newer browsers.  I’ll fix it up for IE6 next week.

Update: 7/28

Well, good news is IE6 now behaves nicely with only 3 lines of CSS fix.  Before it was just messing up the header, the rest of the content seems to be fine.  The only thing I don’t really care to fix is the PNG backgrounds – IE6 should be burn anyways.

And have to give IE Tester credit for getting this done quickly.  I was thinking of installing a virtual server using VMWare’s Virtual Server, but with IE Tester which supports from IE5-8, don’t need to do that.  So big kudos to IE Tester.

No related posts.