image Rollovers

[hotnuts21]

Hi Guys,
I have put together an image map of map. Each time you rolled over a county (state) it changed colour. This works great, however loading the whole map with just a small area covered for each rollover meant that realisticly the user never got to see the rollover because it loaded to slowly. So we took the image away made the whole thing transparent so the only thing that loaded was the rollover with a transparent background. Using a clever bit of CSS the map shows up in the background perfectly.

I did the image map in imageready and although it has worked each hover element has a drop shadow and is slightly off center to make it look like its hovering. This however has caused a problem, because the image is transparent there is an ugly white border around each hover element that shows. For some reason image ready is adding this itself, does anyone know how i can fix it or get rid of it?

You can see what i am blabbing on about

HERE (http://www.100megs31.com/~rawrees/index.php?option=com_hov&task=mapsearch)

[Michael]

There is an easy solution...Flash :whistle:

[hotnuts21]

Not if you cant code in flash,
Not if you want the map accessible to everyone,
Not if you want the map to pull dynamically from teh database, (ok this can be done with flash, but you need to know what you are doing)
Not when you have overspent the budget on this job, (again)

But apart from that, good suggestion :)

[hotnuts21]

Any Image ready experts that can offer a piece of advice?

[Michael]

You can't add drop shadows to transparent gifs without it having a white border, best with .png format?

[hotnuts21]

I know that, but two problems.
1, image ready exports the slices/images as Gifs and i cant find where to change that.
2, Im not bothered about the drop shadows, image ready has added these itself without asking me, and i cant find where to get rid of them, they are not on the layers. I would be happy to just have a solid colour instead :(

[Michael]

How big is the file are you are to email it to me? I'll be happy to have play with it :)

[Michael]

You can change the image type in the 'optimize' panel

gif
jpg
png-8
png-24
wbmp

[hotnuts21]

Yeah png was a good idea. I tried it but it seems that to get it to even a half decent quality image, the file size is more than twice that of the gif, and so I am back to the original problem of loading times. :(

All i need to do is remove the shadow that should do the trick. I have emailed you the PSD to look at micheal, see if you can shed any light on it.

rgds
Paul

[Elemeno^P]

Did you try to use a transparent dither? That should be able to produce the drop shadow effect as well as provide the transparency without the matting effect. This should solve all of your problems.

Edit: The more I think about it, while it would work, it might not achieve the wanted results. Still might be an option to explore.

[Elemeno^P]

I did a quick test, its not to bad an effect, and would probably look better if I was focusing on quality. This is just a .gif placed over the green background design.

[hotnuts21]

I think I got it sorted :) Take a look and let me know what you think.

rgds
Paul