changing image and text on mouse using JS

**emanuelle** · 10-13-2010, 06:46 PM

Hi
I am looking for a script that will do the follwong.
when mouseover on a text and its icon, their color change to green (icon and text)

see attachment

**emanuelle** · 10-13-2010, 07:51 PM

I really need help with this!!

**jscheuer1** · 10-14-2010, 08:39 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var rollovercolor = 'green';
	$('.rollover').hover(function(){
		var r = $(this), im = r.find('img');
		r.css({color: rollovercolor});
		im.data('original', im.get(0).src).attr('src', im.attr('data-rollover'));
	}, function(){
		var r = $(this), im = r.find('img');
		r.css({color: ''});
		im.attr('src', im.data('original'));
	}).each(function(){
		var im = new Image();
		im.src = $(this).find('img').attr('data-rollover');
	});
});
</script>
</head>
<body>
<span class="rollover"><img src="ip.gif" data-rollover="ipg.gif" alt="iPhone / iPad image" title=""><br>iPhone / iPad</span>
</body>
</html>

**jscheuer1** · 10-14-2010, 02:36 PM

I realized I made an error (now corrected in the original):

this:

Code:

	}).each(function(){
		var im = new Image();
		im.src = $(this).attr('data-rollover');
	});

should be:

Code:

	}).each(function(){
		var im = new Image();
		im.src = $(this).find('img').attr('data-rollover');
	});

Also, though more complex, using a float: left div with a background image and a container div for that, gives more flexibility and the ability to link the item:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var rollovercolor = 'green', // set rollover color for text;
	r, im;
	$('.rollover').hover(function(){
		r = $(this); im = r.find('img');
		r.css({color: rollovercolor});
		im.attr('src', im.attr('data-rollover'));
	}, function(){
		r = $(this); im = r.find('img');
		r.css({color: ''});
		im.attr('src', im.data('original'));
	}).each(function(){
		var imn = new Image(), im = $(this).find('img');
		imn.src = im.attr('data-rollover');
		im.data('original', im.get(0).src)
	});
});
</script>
<style type="text/css">
.rollover {
	text-align: center;
	font: normal 80% sans-serif;
	float: left;
	color: black;
	background: #f8f8f8 url(bg.gif) 5px 0 no-repeat;
}
.rollover img {
	border-width: 0;
}
.rollover a {
	text-decoration: none;
	color: black;
	display: block;
	padding: 0 3px 0.5em;
}
.rollover a:hover {
	text-decoration: none;
	color: green;
}
.rollovercontiner {
	overflow: hidden;
}
</style>
</head>
<body>
some content
<div class="rollovercontiner">
<div class="rollover"><a href="http://www.google.com/"><img src="ipt.gif" data-rollover="iptg.gif" alt="iPhone / iPad image" title=""><br>iPhone / iPad</a></div>
</div><!--[if lt IE 7]><br style="clear: left;"><![endif]-->
more content
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/rollover/

Thread: changing image and text on mouse using JS

Thread Tools

Search Thread

changing image and text on mouse using JS

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions