I'd like to display (fade in) all images in an array when someone hovers over Class of 2013
.
So far, I'm able to display one image upon hover over...
Can I send them all to the same <img src...
?
The thing is, I have 3 classes- 2013, 2014, 2015
... and each array of image paths is a different length... so I'd like to dynamically put in the correct number of img src
elements to display the given amount of images per class.
Here is my current code:
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
var ITLP = new Array();
ITLP[0] = "./name1.jpg";
ITLP[1] = "./name2.jpg";
var max = ITLP.length;
$(document).ready(function() {
showimg();
});
function showimg()
{
$(".box > .overlay > img").attr("src",getImages());
$(".box").hover(
function(){ $(this).find(".overlay").fadeIn(); } ,
function(){ $(this).find(".overlay").fadeOut(); }
);
}
function getImages()
{
console.log(max);
var i = Math.floor(Math.random()*max);
console.log(ITLP[i]);
return ITLP[i];
}
</script>
</head>
<body>
<div class="box">
Class of 2013:
<div class="overlay"> <!-- Put ITLP images to display here...-->
<img src="" border="none"/>
</div>
</div>
</body>
</html>