PDA

View Full Version : image rollover maps


southbanana
03-22-2008, 10:08 PM
hi, unusually i learned flash before html, so i want to learn dreamweaver to broaden my horizons.
im creating a website for an illustrator, i know what i would like to do for the intro page, i know how to do it in flash but not quite been able to transfer it to html. here is a link to a quick mockup in flash to show you what i want to achieve:

http://www.jamesweaver.co.uk/kai/kaiflash.html

as you can see ive designed for each illustration to highlight as the cursor hovers over it. i want some images to overlap onto others to give a 3D impression. heres a quick mockup of what ive achieved in dreamweaver so far, ignore the text, just pay attention to the images:

http://www.jamesweaver.co.uk/kai/index.html

at first glance it appeared to be working fine, but then i realised that the rear image wont be highlighted when the cursor rolls over anywhere below the waist. the reason for this is that the front image covers this area, even though i have used the polygon area map to section only the illustrations for rollover. the images are gifs, and in photoshop the images have no backgrounds, just the illustrations. i hope all this makes sense, im curious as to if it is possible to achieve with html exactly what i have done in flash. the final thing was also when you happen to click the illustrations in my IE browser, the polygonal area map shows up in blue, how do i prevent this?

*im working from a mac, and interestingly ive noticed that in the Safari browser it works exactly how i wanted, but IE and Firefox have the problem ive listed, any ideas how to correct this?

many thanks

mangofreak
03-23-2008, 01:50 AM
My first tought is to have a one image map and apply with 2 other images that will have one of the images higlighted for the rollover and the other in grey.

does it make any sense?

southbanana
03-23-2008, 09:38 AM
thanks for helping mango. i think i know what you mean, i had considered merging the 2 images into one for the original mouseout, then having 2 polygonal maps (1 for each) two swap alternative highlighted and greyed out images. the reason i havent tried that yet is because although i have only put up 2 images so far, the final resolution would have possibly up to 4. i thought that having 1 large image and then 4 other preloaded would cause the page to have quite a long loading time so was hoping their might be some other way.

i will certainly give it a try though, there may not be another way of doing it. thanks again for your help

mangofreak
03-25-2008, 01:58 AM
if it really, gets to be too large, stick with flash. Sometimes, flash is the way to go.