• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

jQuery rollover manufacturer & states/territories change color

We have a list of 10 manufacturers.  When the mouse rolls over the text (or image) of the manufacturer ... we want the corresponding U.S. state to change color.

On the left - list of manufacturers
On the right - image of United States

User rolls over manufacturers #1
Indiana, Michigan, Ohio change color.

There is overlap.
Manufacturer #1 is Indiana, Michigan, Ohio
and
Manufacturer #2 is Indiana, Michigan, Ohio

I am not sure where to start.  Assuming jQuery is the correct tool for this.

Is this a common module for jQuery?  Where can I find the module.  

The page is HTML5, not WordPress.

Thanks for your help.  April
0
aprillougheed
Asked:
aprillougheed
  • 4
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Check out this project http://jqvmap.com/
0
 
aprillougheedAuthor Commented:
jqvmap.com is a great lead.  I'm not a jQuery expert but it appears jqvmap will do what I need.  I will study it and figure out how to trigger an even when mouse rolls over the list of manufacturers on the left.

Figuring out jqvmap will be a good lesson in jQuery.  :)

I looked at Code Canyon, but the maps there do almost anything except what I need.

My client is small and is not paying me much for this application.

I guess I could go back to regular HTML rollover buttons/image maps - but honestly, I've forgotten how to do that.  LOL.  May have to dig out an old website from 2002!


Padas - I'll leave this question open just a bit longer in case someone knows of a canned script I can buy.  

thanks!  A.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What I like about that project is they are using actual data for the borders.  I think they are just image maps so you could probably just take the image map and use css as well.

You can make an image map http://www.image-maps.com/ or if you use dreamweaver, it has a tool to make an image map..
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
Robert SchuttSoftware EngineerCommented:
The vector maps look awesome. In case you can use something simpler as well, maybe this can help.

Some time ago I helped somebody here on EE with a plugin for image map rollovers. Before that I had never heard of it but I really liked it. I put together a jsFiddle roughly based on your specs: http://jsfiddle.net/robert_schutt/hqwYH/ or look at http://schutt.nl/ee/Q_28137376/ 

The plugin and demo come from: http://davidlynch.org/projects/maphilight/docs/
0
 
aprillougheedAuthor Commented:
Perfect - exactly what I need - both answers really good
0
 
aprillougheedAuthor Commented:
I'm so new to jQuery.  Am I allowed to use this plugin?  How to I give credit to the author?

I had to insert noconflict tags for it to work in my page.  :)  That's even new to me.

Thanks
0
 
aprillougheedAuthor Commented:
Oh I just found the copyright statement in the docs.  I think I'll still give a link and credit on the site.

Sorry I'm such a newbie.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now