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
smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

webwyzsystemsCommented:
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.
0
VenabiliCommented:
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/
0
Steve KrileCommented:
Here is a first kick at this.  I've added the .hover() event to the tabs as well as the click() event.  
Test.zip
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

smfmetro10Author Commented:
skrile,

Thats close!
The button just needs to be in the 'on' state when the corresponding map is shown
0
Steve KrileCommented:
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
0
smfmetro10Author Commented:
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!
0
Steve KrileCommented:
Piece of cake.  Remove the style rule hiding the image.

Add the images/satellite-map.jpg text to the src attribute of the image.

Add the "current" class to the Satellite tab.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

	a {color:#fff;}
	div.imageBin {border:solid 1px gray;display:block;width:505px;height:380px;}

	ul.tabs {padding:0px;margin:0px;list-style-type:none;}
	ul.tabs li {
		float:left;
		margin-right:10px;
		width:19px;
		width:71px;
		font-family: arial;
		background: Transparent url(images/tab.jpg) no-repeat top left;
		text-align:center;
		font-size:10px;}
	ul.tabs li a{text-decoration:none;outline:none;display:block;height:19px;padding-top:2px;}
	ul.tabs li a:hover, a.current{color:#000;font-weight:bold;}

</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

</head>
<body>


	<div class="imageBin" style="">
		<img src="images/satellite-map.jpg" alt="picture" class="image"/>
	</div>
	<ul class="tabs">
		<li><a href="images/satellite-map.jpg" class="current">SATELLITE</a></li>
		<li><a href="images/soil-map.jpg">SOIL</a></li>
	</ul>

<script language="javascript">

        $(document).ready(function() {

			$("ul.tabs > li > a")
				.click(function(e){
					//turn off the normal click behavior
					e.preventDefault();

					$("ul.tabs li a").removeClass("current");
					$(this).addClass("current");
					//grab the href of the link and set it to the source of the image
					$(".image").hide().attr("src",$(this).attr("href")).fadeIn();
				})

		});



</script>

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
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
0
Steve KrileCommented:
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.
0
smfmetro10Author Commented:
Outstanding!  Works perfectly!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.