Image maps and how they work

image map with hover and form field selecting

[Shado]

Hi guys

What I'm looking to do is add a number of polygon hotspots to an image which when clicked selects the associated item in a dropdown form. I still want the dropdown field to be visible for those users that have images and js disabled. I also want to have a hover effect on the hotspot where a)when the users hovers the hotspot is replaced with the same image of the region but in another colour b)if the user selects the region from the dropdown then the hover state is activated even though they did not hover over it as an indication that that's the area which is currently selected.

Is this possible? And if so do you know of a complete tutorial on the web? All the examples I have read through seem to be lacking in some way.

[alias]

For selecting the associated item in a dropdown -- it's a fairly simple logic, you only need to find a way to identify what you clicked and bind it to the select option.

As for the hover notification, it's a bit more complex. I managed to do it using a script that parses the image map and creates a canvas for firefox and webkit based browsers, and vml for IE. After that it's only a matter of adding the hover behavior.

Please reply jere if you need more guidance and a more specific example, I'll try and compile a sample usable code, that will hopefully explain you how it works.

[Shado]

Hi Alias - Thank you so much for your reply. I have been able to insert the hover effect using splicing but have realised that I'll have to find another way as the web page is 100% width and the image in positioned absolute so as you can image when testing in different browser sizes the the map does not move with the rest of the layout.

So I would appreciate any examples and tutorials you can send me why.

[Shado]

I have uploaded my map code so you can see the image I'm using.

[shadipity.co.za ]