ansaurus

Question

Answer 1

A:

Here's the Quick Demo of below Code : http://jsbin.com/itunu

HTML :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<meta charset=utf-8 />
<title>Hello world !!</title>

</head>
<body>
  <img  />
</body>
</html>

Javascript :

var a = [];

a[0] = "http://i577.photobucket.com/albums/ss219/music_munster/powerpuff-girls-092.jpg";
a[1] = "http://img.listal.com/image/459059/500full.jpg";


$(document).ready(function() {
  var source = $.preload(a); 
  $('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
  $('img').hover(function() {
    $('img').attr('src',source[1].src);
  },function() {
    $('img').attr('src',source[0].src);    
  });

});



//Image Preloading....  
var cache = [];
  $.preload = function(arr) {
    for(var i = 0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      cache.push(img);
    }
    return cache;
  };

Ninja Dude 2010-08-24 13:40:55

Answer 2

A:

$(function(){
   var imgs = [
       new Image(),
       new Image()
   ];

   imgs[0].src = 'http://www.typeofnan.com/pic1.jpg';
   imgs[1].src = 'http://www.typeofnan.com/pic2.jpg';

   $('#hoverelement').hover(function(){
      $(this).html(imgs[0]);
   }, function(){
      $(this).html(imgs[1]);
   });
});

That should work, even if I'm not sure if that is what you need. You can add an onload event to both images to makes sure, they are really loaded before allowing hovering.

jAndy 2010-08-24 13:41:33

ansaurus

tags:

views:

answers:

toggle image on hover using Jquery.

related questions