â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
Image Cycle Application Programming Tutorial
Learn to program dynamic JavaScript thumbnail image cycling programs where the pictures automatically cycle as the user places their mouse over a preview image. Then when the user mouse leaves the image, the default image is put back in place. This sort of program can be used to cycle through a collection of video thumbnail images, to cycle product images in an online store, or for any type of situation you wish to apply it to.
Note: You can externalize any JavaScript programs into a cycle.js file that your document can then call in anywhere on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thumbnail Cycle Tutorial</title>
<style>
.item{
float: left;
border: #AAA 1px solid;
padding: 10px;
margin: 10px;
}
.item > img{
width: 180px;
height: 140px;
border: #666 1px solid;
cursor: pointer;
}
.item > span{
display: block;
text-align: center;
margin-top: 10px;
}
</style>
<script>
window.addEventListener("load", function(){
var items_container = document.getElementById("items_container");
var thumbtimer, ti=0, dir="item_images/";
var obj1 = { name:"Pistol", pics:["pistol_a.jpg","pistol_b.jpg","pistol_c.jpg"] };
var obj2 = { name:"Glasses", pics:["glasses_a.jpg","glasses_b.jpg","glasses_c.jpg"] };
var obj3 = { name:"Box", pics:["box_a.jpg","box_b.jpg","box_c.jpg","box_d.jpg"] };
var ary = [obj1,obj2,obj3];
for(var i=0; i < ary.length; i++){
var div = document.createElement("div");
var img = document.createElement("img");
var span = document.createElement("span");
div.className = "item";
img.oi = i;
img.src = dir + ary.pics[0];
span.innerHTML = ary.name;
items_container.appendChild(div);
div.appendChild(img);
div.appendChild(span);
img.addEventListener("mouseover", function(event){
thumbtimer = setInterval(function(){
ti++;
if(ti == ary[event.target.oi].pics.length){
ti = 0;
}
event.target.src = dir + ary[event.target.oi].pics[ti];
}, 700);
});
img.addEventListener("mouseout", function(event){
clearInterval(thumbtimer);
ti = 0;
event.target.src = dir + ary[event.target.oi].pics[ti];
});
}
});
</script>
</head>
<body>
<div id="items_container"></div>
</body>
</html>