asked on

How do I use jquery to implement an image rollover and image swap

Hi,
I have 6 .jpgs in an image folder (toggle_soil_off, toggle_soil_on, toggle_satellite_off, toggle_sateliite_on, soil_map, and satellite_map)

I need the toggle images to have rollover capablities, then when the user clicks the toggle images the appropriate map shows up.

Also when the corresponding map is shown the toggle image needs to me in the "on" state.

I'm stuck as being a Jquery newbie.
I attached the images for better clarification

Thanks

toggle-satellite-off.jpg
toggle-satellite-on.jpg
toggle-soil-on.jpg
toggle-soil-off.jpg
satellite-map.jpg
soil-map.jpg

webwyzsystems

How about some javascript instead?

<img src="satellite_map.jpg" name="main" id="main">

<img src="toggle_satellite_off.jpg" onMouseOver='this.src="toggle_satellite_on.jpg";' onMouseOut='this.src="toggle_satellite_off.jpg";' onClick='main.src="soil-map.jpg";'>

Something like that should work.

Venabili

That's what I have in my bookmarks (which means that I had used it at least once but I am not sure I can remember when)
Image swap: http://jquery-howto.blogspot.com/2009/04/jquery-image-swap-or-how-to-replace.html

Image rollover: http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/

Steve Krile

Here is a first kick at this. I've added the .hover() event to the tabs as well as the click() event.
Test.zip

smfmetro10

ASKER

skrile,

Thats close!
The button just needs to be in the 'on' state when the corresponding map is shown

Steve Krile

OK, I took a slightly different approach, but I think you will like these results as it makes your setup more flexible. I've added a new .jpg tab and no longer am using the others. Instead, I am putting the text in the HTML and styling the tabs through css.
Test.zip

smfmetro10

ASKER

You are definetly sneaking up on it! There are just a couple of issues.

Both the buttons start in the 'on' state. Is it possibe to start with the satellite-map showing when the page loads? So that would mean showing the toggle-satellite-on and toggle-soil-off.

Thanks for the help!

ASKER CERTIFIED SOLUTION

Steve Krile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

smfmetro10

ASKER

Nice!

Is it possible to switch the buttons so that the 'on' state is displayed with the corresponding map?

Thanks again for all the help

Steve Krile

The color of the text (the only thing that is changing) is controlled from these two style rules:

a {color:#fff;} /*color of a hyperlink on the page*/

ul.tabs li a:hover, a.current{color:#000;font-weight:bold;} /*color of a link when user hovers or current is set*/

color:#fff is the same as "white"
color:#000 is the same as "black"

Switch as you like.

smfmetro10

ASKER

Outstanding! Works perfectly!