?
Solved

jQuery rollover manufacturer & states/territories change color

Posted on 2013-05-23
7
Medium Priority
?
457 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 800 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 53

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Accepted Solution

by:
Robert Schutt earned 1200 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

A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

801 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