Image map FROM a drop down menu

[malachi_s]

I have searched high and low for a tutorial, lesson or even an example of a horizontal menu that when a mouse hovers over a menu item such as a category, say likes States, in the menu, a drop down of a map of the US with each state being a link to the individual state page and also have effects such as changing color. I have accomplished the project in a page using both css and javascript but applying that into a drop down menu have proven unsuccesful. I was hoping someone here could show the errors of my way, or just a link to example of a site that does this because at this point, I do not fully convinced it is possible but again, nothing is impossible if they have the right motivation, mine being just such a case, my boss wants it done. If anyone can help, please do, I would really appreciate the assistance.

[vwphillips]

You need an image in your drop down with an image map
To link to the state each map area can have a link

to change the color(image) on mouseover the image src can be swapped or you could use something like

http://www.vicsjavascripts.org.uk/MapHiLight/MapHiLight.htm

[malachi_s]

Thanks Vic, swapping the image is how I have the map working now, it is in how I implement the image map in the drop down that has befudled me. I can explain, on my page I have taken a map of the United States with each state outlined, flipped that into an image map that changes the state color, an alt tag displays state name and if they click on the state, of course they are taken to that particular state detail page. This a commerce site by the way. I have accomplished this with a combination of jquery, js and css files. The problem if I can call it that is that now the boss wants that to be in the horizontal navigation menu on our site. We have other style sheets managing the cosmetic aspects of things but as I introduce this all into the menu, I have been met with nothing but failure. I can't even find an example where anyone else has done this to their site but the boss says that's what he wants, I just can't figure out to do it. I hope I can atriculate my question correctly, sometimes that is as hard as the code. Thanks for your reply.

[Beverleyh]

Did I read your post correctly? Do you want to use state outlines/shapes as navigation?

Is that really wise? It just seems to be a really bad idea from a usability perspective. What if somebody doesnt recognise their state shape? That might sound silly when you know the shape of yours, but not everybody is as intelligent as you are. Or what if a person wanted to get info for another state? Would they need to consult Google maps first? Even with otherwise very intelligent people, visual representations can cause problems - take me for example - Im far from stupid but I cant read a map or give directions to save my life, and the UK is a lot smaller than the US ;)

Words are generally more concise and less open to wrongful interpretation than images - and better for search engines too.

Please use words upfront on your map at least. You mention use of the alt tag, but the hover tooltip it produces is only a side-effect of hinky interpretation in IE. Other web browsers won't provide that important navigational cue on hover - using the title tag will though, so even if you only take one pointer from my reply, please let it be that you use title="" as well as alt="".

Maybe I got your intentions all skewed though so feel free to correct me. I just got a bit flustered by the usability alarm in my head.

[malachi_s]

All your concerns are well warranted, it simply is a matter of who calls the shots, believe me, we have had this conversation with him many times, he is a VP, I, a mere programmer and though it would probably seem beneficial to assume I would know what, how and why I would want something on the site, it isn't always his same line of thinking. You are correct in that we will use a map of the USA with each state outlined and the state abbreviation on the state, i.e. CA, IN or WA. The map is white, the outline is teal and the text is also bolded teal, arial font, quite readable. When moused over, the state displays the alt tag with the entire state name, the state shape changes to a solid teal color, of that state naturally, and he wants it to be a dropdown when the category in the nav menu is moused overed. Again, I can't even find an example of anything like that. The map, well, that is accomplished, dropping it from a "call to action" is entirely more difficult than I imagined, honestly, I haven't decided if it is even possible but again, we have to look at what motivates us and in this case, it is my job. Thanks for your reply, I do hope someone has ideas, this has been a challenge.

[vwphillips]

not exactly what you want but
http://www.vicsjavascripts.org.uk/MapToolTip/MapToolTip.htm