homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Image maps and how they work
image map with hover and form field selecting

Msg#: 4195132 posted 5:10 pm on Sep 1, 2010 (gmt 0)

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.



10+ Year Member

Msg#: 4195132 posted 10:06 pm on Sep 2, 2010 (gmt 0)

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.


Msg#: 4195132 posted 6:16 am on Sep 3, 2010 (gmt 0)

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.


Msg#: 4195132 posted 6:38 am on Sep 3, 2010 (gmt 0)

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

[shadipity.co.za ]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved