PDA

View Full Version : 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
<!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:


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

should be:


}).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:


<!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/