Lesson 4/javascript & jQuery

lesson4

Javascript: 4 boxes of photos with hover-on/out jQuery effect

var myKitties = [ { title: "1st", pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" }, { title: "2nd", pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" }, 
{ title: "3rd", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" }, 
{ title: "4th", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg" }
]; 

$( document ).ready( function(){ 
    for(var i=0; i<myKitties.length; ++i) {
        $("#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" ); //Dot notation occurs here
    };
});

$(".image").mouseenter( function() {
	console.log(this); // 'This keyword' occurs
	$(this).html("<p class='info'><span class='proj-title'>Title:</span>" + myKitties[this.id].title + "</p>"); 
}).mouseleave( function() {
	$("p.info").html("");
});

HTML:

<div class="image" id="0"></div> //ID tags necessary for indexed array
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>