How to link different slideshow images with a URL in Javascript
Question
I am very new to JavaScript and I am creating a simple slideshow and I got it work ok. The only thing is I can't seem to create a web link to each of the images in my slideshow. I would like for it to link to a different web page to the 4 different images I have for the slideshow as it scrolls though.
Here is what I have:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
}
</script>
</body>
</html>
2 answers
solution1
1 2013-12-13 00:14:55
One way is to use a link to wrap up your images:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><a name="mylink" href=""><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></a></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit();
if (whichimage==1)
document.links.mylink.src="link1.htm"
else if (whichimage==2)
document.links.mylink.src="link2.htm"
</script>
</body>
</html>
solution2
0 2013-12-13 02:05:45
There is an easier ways to do that:
first:create an HTML document and we are going to call it images.html
in that file just add all the images you want to load like:
<img src="img1.jpg" onload="parent.loadedimg()" />
<img src="img2.jpg" onload="parent.loadedimg()" />
<img src="img3.jpg" onload="parent.loadedimg()" />
we use parent to call a function from our iframe to our index.html file
then just add to your page index.html this anywhere you want it wont affect your page
<div style="display:none>
<iframe src="images.html">
</iframe>
</div>
so now the images will start loading automatically.
now add this HTML anywhere you want your image to be displayed
<img src="img1.jpg" width="400" height="300" id="slider" />
finally the Javascript:
<script type="text/javascript">
startslide();
var imgnum=parseInt;
imgnum=0;
maximg=parseInt;
maximg=0;
function loadedimg(){
maximg++;
}
function startslide(){
if(imgnum<=maximg && maximg>0){
imgnum++;
document.getElementById('slider').src='img'+imgnum+'.jpg';
if(imgnum==maximg){
imgnum=0;
}
}
window.setTimeout(function(){startslide()},2000);
}
</script>
now explanation:
if you remember in the iframe every time that an image load sends a function to the javascript in this javascript when the function is called the var maximg change by 1 so every time an image load this var sum up 1 in this example when all the images finish to load the final number for maximg is going to be 3 cause in the iframe you only loaded 3 images, and now you don't need to worry for the ammount of the images you want to load you just add so many images as you want in the iframe.
the var imgnum it is used to change the src of the image to be displayed, so be sure that al your images have the same name, and then the number of the order to be displayed.
and the line that used window.setTimeout will define how much time will wait to change to the next image in this case i use 2000 and it means 2 seconds, 500 means 0.5 seconds,5000 means 5 seconds, so change it to any number you want to wait.
that it's all so i hope been helpful for you!.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.