Solved

jQuery rollover manufacturer & states/territories change color

Posted on 2013-05-23
7
433 Views
Last Modified: 2013-05-23
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
Comment
Question by:aprillougheed
  • 4
  • 2
7 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 200 total points
Comment Utility
Check out this project http://jqvmap.com/
0
 

Author Comment

by:aprillougheed
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 35

Accepted Solution

by:
Robert Schutt earned 300 total points
Comment Utility
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
 

Author Closing Comment

by:aprillougheed
Comment Utility
Perfect - exactly what I need - both answers really good
0
 

Author Comment

by:aprillougheed
Comment Utility
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
 

Author Comment

by:aprillougheed
Comment Utility
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now