[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

jQuery rollover manufacturer & states/territories change color

Posted on 2013-05-23
7
Medium Priority
?
462 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 54

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 54

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

650 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