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