Here's a little jQuery snippet that I use often. It lets you easily specify a 'hover-state' image for any html element with class 'rollover.' Just set the rel attribute to equal the rollover image, and the src attribute to equal the original.
jQuery(document).ready(function($) {
//rollover swap images with rel
var img_src = "";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
}
HTML
UPDATE
Added preload script to code. This will load all rollover images via jquery on pageload, thereby preventing any image loading delay.
Is there way I can this function to Drupal 6
I have a drupal 6 install and would like to add this script to a drupal view I am using.
Is that possible with this type of code.
thanks,
Nick
Fade effect
How can we add fade effect on this?
can't quite get this to work
Hi,
I'm having problems getting this to work. Here's what I've put on my page:
<script type="text/javascript">
jQuery(document).ready(function($) {
//rollover swap images with rel
var img_src = "";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
}
</script>
<p><a href="/projects/berg"><img height="176" src="/sites/default/files/images/projects-berg.jpg" rel="/sites/default/files/images/projects-berg-ro.jpg" class="rollover" style="padding:0px 3px 3px 0px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click4"><img height="176" src="/sites/default/files/images/projects-tallbarn.jpg" style="padding:0 0 3px 3px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-walker2.jpg" style="padding:3px 3px 3px 0px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-berg.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:3px 0px 3px 3px;" width="176" /></a></p>
I'm trying to get the first image to have a rollover, but it's not working (once I get the first image working, I'll add the rollover state to the rest of the images). I've checked that the rel src is correct, and there are no errors in the code. Can anyone help me out?
You can also view this page at: http://lostarts.wwwsr4.supercp.com/projects
Thanks.
Solved my own problem
In reply to can't quite get this to work by Marc Shor
I figured out how to fix my own problem, which never happens! Gotta go celebrate, but first, here's the code that works in Drupal 7:
<script type="text/javascript">
$(document).ready(function() {
//rollover swap images with rel
var img_src = "";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
})(jQuery);
</script>
<p><a href="/projects/berg"><img height="176" src="/sites/default/files/images/projects-berg.jpg" rel="/sites/default/files/images/projects-berg-ro.jpg" class="rollover" style="padding:0px 3px 3px 0px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:0px 3px 3px 3px;" width="176" /></a><a href="#" id="click4"><img height="176" src="/sites/default/files/images/projects-tallbarn.jpg" style="padding:0 0 3px 3px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-walker2.jpg" style="padding:3px 3px 3px 0px;" width="176" /></a><a href="#" id="click1"><img height="176" src="/sites/default/files/images/projects-berg.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click2"><img height="176" src="/sites/default/files/images/projects-mckenzie.jpg" style="padding:3px;" width="176" /></a><a href="#" id="click3"><img height="176" src="/sites/default/files/images/projects-rohrbach.jpg" style="padding:3px 0px 3px 3px;" width="176" /></a></p>
thanks Marc Shor - adding })(jQuery); to the end fixed it
In reply to Solved my own problem by Marc Shor
thanks for sharing :)
how to adapt it to Drupal
how to adapt it to Drupal
How to add fading transition
How to add fading transition on mouse over and mouse out? Thnaks
Add new comment