image demo hover preload

image demo hover preload.markdown

image demo hover preload

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img1" />
<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img2" />
<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img3" />

script.js

$(document).ready(function() {
  console.log("ready");
  
  //preload
   //create array to hold images
    var butterflyImages = ["http://www.redrocketmedia.com/des157/images/butterfly_h.png", "http://www.redrocketmedia.com/des157/images/butterfly_hgif.gif"];

    //create an empty array to hold the images as objects
    var imgs = [];

    //traverse the array for preloading images
    for (var i = 0; i < butterflyImages.length; i++) {
        //create a new image object at position of i in the array
        //this is the magic that makes the image download...putting it into an object
        imgs[i] = new Image();
        //assign the src for each new image
        imgs[i].src = butterflyImages[i];
    }

  //hover on butterfly img1
  $('#img1').hover(function() {
    //console.log("hover over");
    //change source
    $('#img1').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly_h.png');
    $('#img1').css('opacity', 1)
  }, function() { // second function
    //console.log("hover out");
    $('#img1').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly.png');
    $('#img1').css('opacity', .5)
  });

  //hover on butterfly img2
  $('#img2').hover(function() {
    //console.log("hover over");
    //fade up
    $('#img2').animate({
        'opacity': 1
      }),
      //change source
      $('#img2').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly_h.png')
  }, function() { // second function
    //console.log("hover out");

    $('#img2').animate({
        'opacity': .5
      }),
      $('#img2').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly.png');
  });

  //hover on butterfly img3
    $('#img3').hover(function () {
        //console.log("hover over");
        //fade up
        $('#img3').animate({
                'opacity': 1
            }),
            //change source
            $('#img3').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly_hgif.gif')
    }, function () { // second function
        //console.log("hover out");

        $('#img3').animate({
                'opacity': .5
            }),

            $('#img3').attr('src', 'http://www.redrocketmedia.com/des157/images/butterfly.png');
    });
    //close jQuery ready function	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
  overflow: hidden;
}

img {
  opacity: .5;
}

#img1,
#img2,
#img3 {
  position: relative;
}

#img1 {
  top: 1in;
}

#img2 {
  top: 3in;
}

#img3 {
  top: 4.5in;
}