Hi guys,
I'm currently working off a php inc file. There's a bit of javascript in this file also.
I have a table and in the table there is a link (when I click Play the image above plays, and I click pause it stops).
All I want to do is insert image buttons for play and pause however no matter what way I put them in, they will not display. I've even tried creating an images folder within my directory on the hosting set up and this has not worked either.
Here is my code:
Any help is appreciated, thanks!
I'm currently working off a php inc file. There's a bit of javascript in this file also.
I have a table and in the table there is a link (when I click Play the image above plays, and I click pause it stops).
All I want to do is insert image buttons for play and pause however no matter what way I put them in, they will not display. I've even tried creating an images folder within my directory on the hosting set up and this has not worked either.
Here is my code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EEG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
#image
{
background-image: url("<?= $img ?>");
background-repeat: no-repeat;
width: <?= $width ?>px;
height: <?= $height ?>px;
}
#startstop
{
width: <?= $width ?>px;
font-size: 20px;
color: #000000;
font-family: Arial;
}
.link
{
cursor: pointer;
}
.help
{
display: block;
}
</style>
<body onload="initAutoChange()">
<script language="javascript">
var autoChange = false; //set it to false if you don't want autoChange to work
var autoChangePeriod = 4000; //in milliseconds
var maxPages = <?= $maxPages ?>;
var dir = '<?= $dirname ?>';
var page = 1;
var uniqid = '<?= uniqid() ?>';
var timeout;
function initAutoChange()
{
if (!autoChange)
{
return;
}
timeout = setTimeout('change()', autoChangePeriod);
}
function start()
{
autoChange = true;
timeout = setTimeout('change()', autoChangePeriod);
}
function stop()
{
autoChange = false;
clearTimeout(timeout);
}
function change()
{
if (!autoChange)
{
return;
}
next();
timeout = setTimeout('change()', autoChangePeriod);
}
function previous()
{
if (page == 1)
{
return false;
}
page--;
var img = document.getElementById('image');
img.style.backgroundImage = "url(" + dir + page.toString() + ".gif?" + uniqid + ")";
return false;
}
function next()
{
if (page == maxPages)
{
return false;
}
page++;
var img = document.getElementById('image');
//img.backgroundImage = dir + page.toString() + ".gif?" + uniqid;
//img.setAttribute('backgroundImage', dir + page.toString() + ".gif?" + uniqid);
img.style.backgroundImage = "url(" + dir + page.toString() + ".gif?" + uniqid + ")";
return false;
}
</script>
<table id="image" >
<tr>
<td width="10%" class="link" onclick="previous()">
Â
</td>
<td width="80%"></td>
<td width="10%" class="link" onclick="next()">
Â
</td>
</tr>
</table>
<table id="startstop">
<tr>
<td width="50%" align="center" onclick="start()">
<a href="#" onclick="return false;"><img src="Play_Button.png alt="" border="0" /></a>
</td>
<td>
</td>
<td width="50%" align="center" onclick="stop()">
<a href="#" onclick="return false;"><img src="Pause_Button.png alt="" border="0" /></a>
</td>
</tr>
</table>
</body>
</html>Any help is appreciated, thanks!
