Menu
Hi all people,
i have made a html slideshow maker and it all works but for the pause button which obviously pauses the slideshow.
Below is the html code:
[CODE]
<html>
<head>
<title>@Tech SlideShow Viewer</title>
<hta:application
id=”ssView”
applicationName=”SlideShow Viewer”
icon=”..SSViewer.exe”;
innerborder=”off”
border=”thin”
maximizebutton=”no”
minimizebutton=”no”
caption=”no”
windowstate=”maximize”
scroll=”no”
/>
<style>
body
{
margin: 5px;
background-color: black;
}
.main
{
width: 100%;
height: 100%;
}
.buttons
{
width: 135px;
height: 22px;
}
.imgView
{
width: 100%;
height: 600px;
}
#prev, #next, #play, #pause, #exit
{
border: none 0px;
background-color: transparent;
width: 22px;
height: 22px;
margin-left: 5px;
}
#prev
{
border: none 0;
background-color: transparent;
background-image: url(Prev.png);
width: 22px;
height: 22px;
}
#next
{
background-image: url(Next.png);
}
#play
{
background-image: url(Play.png);
}
#pause
{
background-image: url(Pause.png);
}
#exit
{
background-image: url(Exit.png);
}
#imageViewer
{
width: 800px;
height: 600px;
}
</style>
<script language=”javascript”>
var imgPath = “../Images/”;
var image = new Array()
image[0] = imgPath + “Bliss.bmp”;
image[1] = imgPath + “Follow.jpg”;
image[2] = imgPath + “Aquarium.jpg”;
image[3] = imgPath + “Ascent.jpg”;
image[4] = imgPath + “ASUS.jpg”;
image[5] = imgPath + “ASUS1.jpg”;
image[6] = imgPath + “ASUS2.jpg”;
image[7] = imgPath + “ASUS3.jpg”;
image[8] = imgPath + “ASUS4.jpg”;
image[9] = imgPath + “ASUS5.jpg”;
image[10] = imgPath + “ASUS6.jpg”;
image[11] = imgPath + “Autumn.jpg”;
image[12] = imgPath + “Azul.jpg”;
image[13] = imgPath + “Crystal.jpg”;
image[14] = imgPath + “DaVinci.jpg”;
image[15] = imgPath + “Friend.jpg”;
image[16] = imgPath + “Home.jpg”;
image[17] = imgPath + “Moon%20Flower.jpg”;
image[18] = imgPath + “Ocean.jpg”;
image[19] = imgPath + “Peace.jpg”;
image[20] = imgPath + “Power.jpg”;
image[21] = imgPath + “Purple Flower.jpg”;
image[22] = imgPath + “Radiance.jpg”;
image[23] = imgPath + “Red Moon Desert.jpg”;
image[24] = imgPath + “Ripple.jpg”;
image[25] = imgPath + “Sanfermin05_1024.bmp”;
image[26] = imgPath + “Sanfermin05_1280.bmp”;
image[27] = imgPath + “Space.jpg”;
image[28] = imgPath + “Spring.jpg”;
image[29] = imgPath + “StarTracks.jpg”;
image[30] = imgPath + “Stonehenge.jpg”;
image[31] = imgPath + “Stream.jpg”;
image[32] = imgPath + “Tulips.jpg”;
image[33] = imgPath + “Vortec Space.jpg”;
image[34] = imgPath + “Wind.jpg”;
image[35] = imgPath + “Windows%20XP.jpg”;
var imgN = 0;
var imgP = 35;
function load()
{
imgView(image[imgN]);
Slideshow(‘Play’);
}
function Slideshow(obj)
{
var int = -1;
switch(obj)
{
case “Play”:
{
var play = document.getElementById(‘play’);
var pause = document.getElementById(‘pause’);
var playTD = document.getElementById(‘playTD’);
var pauseTD = document.getElementById(‘pauseTD’);
play.style.display = “none”;
pause.style.display = “”;
play.style.width = “0px”;
pause.style.width = “22px”;
playTD.style.width = “0px”;
pauseTD.style.width = “27px”;
int = setInterval(“Slideshow(‘Next’)”, 2000, ‘javascript’);
break;
}
case “Pause”:
{
var play = document.getElementById(‘play’);
var pause = document.getElementById(‘pause’);
var playTD = document.getElementById(‘playTD’);
var pauseTD = document.getElementById(‘pauseTD’);
play.style.display = “”;
pause.style.display = “none”;
play.style.width = “22px”;
pause.style.width = “0px”;
playTD.style.width = “27px”;
pauseTD.style.width = “0px”;
clearInterval(int);
break;
}
case “Previous”:
{
imgN = (((imgN % 35) – 1) % 35);
imgView(image[imgN]);
break;
}
case “Next”:
{
imgN = (((imgN % 35) + 1) % 35);
imgView(image[imgN]);
break;
}
case “Exit”:
top.window.close();
break;
}
}
function imgView(url)
{
var imgViewer = document.getElementById(‘imageViewer’);
imgViewer.src = url;
}
</script>
</head>
<body onload=”load()”>
<table cellpadding=”0″ cellspacing=”0″ class=”main”>
<tr>
<td width=”*” height=”22″> </td>
<td width=”135″ height=”22″>
<table cellpadding=”0″ cellspacing=”0″ class=”buttons”>
<tr>
<td style=”width: 27px; height: 22px;” id=”pauseTD”>
<input type=”button” id=”pause” onclick=”Slideshow(‘Pause’)”>
</td>
<td style=”width: 27px; height: 22px;” id=”playTD”>
<input type=”button” id=”play” onclick=”Slideshow(‘Play’)”>
</td>
<td style=”width: 27px; height: 22px;” id=”prevTD”>
<input type=”button” id=”prev” onclick=”Slideshow(‘Previous’)”>
</td>
<td style=”width: 27px; height: 22px;” id=”nextTD”>
<input type=”button” id=”next” onclick=”Slideshow(‘Next’)”>
</td>
<td style=”width: 27px; height: 22px;” id=”exitTD”>
<input type=”button” id=”exit” onclick=”Slideshow(‘Exit’)”>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=”100%” height=”600″ align=”center” valign=”center”>
<table cellpadding=”0″ cellspacing=”0″ class=”imgView”>
<tr>
<td width=”*” height=”*”> </td>
<td width=”800″ height=”600″ align=”center” valign=”center”>
<img src=”” id=”imageViewer”>
</td>
<td width=”*” height=”*”> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Any help is greatly appreciated.?