...

View Full Version : Slideshow Issues



UltimateCoder
02-24-2012, 03:26 PM
I have this code for my webpage



<head>


<style type="text/css">

#ss_image{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>
</style>
</head>

<body onload="onload()">
<script type="text/javascript">
function onload(){
for(;;) {
setTimeout(slideshow(),3000);
}
}
function slideshow(){
var image=document.getElementById("ss_image")
if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE)
image.filters[0].apply()
image.src=(image.src.indexOf("one.png")!=-1)? " two.png" : "one.png" //alternate between two images to change to
if (image.filters && image.filters.length>0)
image.filters[0].play(2) //2 seconds transition
}

</script>

<img id="ss_image" src="one.png" height="296" width="401" /><br />
</body>
</html>


My problems are:
The slideshow stops after one chage Why is this?

Also could someone tell me who i could add more images, and how to link each one to a page.

jmrker
02-24-2012, 04:42 PM
Some moderate changes required to meet your request(s).


<style type="text/css">

#ss_image{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>
</style>
</head>

<body onload="onload()">
<script type="text/javascript">
function onload(){ slideshow(); } // setTimeout('slideshow()',3000); }

var imgPtr = 0;
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
['11.jpg','http://www.webdeveloper.com'],
['12.jpg','http://www.codingforums.com"'],
['13.jpg','http://dreamincode.net'],
['14.jpg','http://www.mredkj.com/tutorials/htmljs.html'],
['15.jpg','http://scripterlative.com/?smartstars']
];

function slideshow(){
var image=document.getElementById("ss_image")
if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE)
image.filters[0].apply();

image.src = baseURL + imgList[imgPtr][0];
document.getElementById('alink').href = imgList[imgPtr][1];
imgPtr = (imgPtr+1) % imgList.length;

/* remove following
image.src=(image.src.indexOf("http://www.nova.edu/hpd/otm/pics/4fun/11.jpg")!=-1)
? "http://www.nova.edu/hpd/otm/pics/4fun/21.jpg"
: "http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" //alternate between two images to change to
*/
if (image.filters && image.filters.length>0)
image.filters[0].play(2) //2 seconds transition
setTimeout("slideshow()",3000);
}

</script>
<a href="" id="alink" style="text-decoration:none">
<img id="ss_image" src="" height="296" width="401" />
</a>
<br />
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum