Search jQuery

jQuery Forum

Getting Started

tn.tylern..

Cannot read property 'src' of undefined - slide show

in Getting Started • 11 years ago

I'm trying to create a simple slide show that changes picture when the mouse over event is triggered.. though I am getting the error " Cannot read property 'src' of undefined". I'm not sure what is the issue. error is on line 47. I basically created some image objects to preload the images, and assigned the property 'src' their respective url.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Examples</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
body {
font-family: arial;
}
#gallery {
width:1000px;
height:360px;
position:relative;
}
#gallery img {
z-index: 500;
}
.caption {
background-color: #202020;
color: white;
width:100%;
height:25%;
position: absolute;
bottom:0;
opacity: 0.8;
}
</style>
<script src="../../../script/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
var images = new Array(3);
var imageSrc = ['img/default.jpg', 'img/image1.jpg', 'img/image2.jpg'];
var imageOpacity = [0.5,0.6,0.7];
var imageCaption = ['Caption for Image 1', 'Caption for image 2', 'Caption for image 3'];
for (var i = 0; i < 3; i++) {
images[i] = [imageSrc[i], imageOpacity[i], imageCaption[i]];
}
//create image object
for (var i = 0; i < 3; i++) {
var imgs = [];
imgs[i] = new Image();
imgs[i].src = images[i][0];
}
$('#photo').attr('src', imgs[0].src);
$('#photo').mouseover(function() {
$(this).attr('src', imgs[1].src);
}); // end mouseover
});
</script>
</head>
<body>
<div id="gallery">
<img id ="photo" src="" alt="default" title="" width="" height="">
<div class="caption"><div class="content">This is a caption!</div></div>
</div>
</body>
</html>