Solved

jQuery rollover manufacturer & states/territories change color

Posted on 2013-05-23
7
444 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
ID: 39191982
Check out this project http://jqvmap.com/
0
 

Author Comment

by:aprillougheed
ID: 39192030
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
ID: 39192108
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 35

Accepted Solution

by:
Robert Schutt earned 300 total points
ID: 39192609
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
ID: 39193073
Perfect - exactly what I need - both answers really good
0
 

Author Comment

by:aprillougheed
ID: 39193204
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
ID: 39193205
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

808 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