kippie
Technical User
- Nov 8, 2001
- 158
In the HTML below I use a script for horizontal image scrolling. Everything works fine, but the only thing is that I would like to stop the scrolling OnMouseOver of an image and that when the scrolling has stopped the user can click an image and is transferred to a certain HTML. So I would like to use the scrolling images as buttons. I have tried different things but I cannot get it working. Is there anyone who could help me with this timing?
This is the HTML I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns="<head>
<title>Image Scroller</title>
<base href=" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background: #ffffff;
overflow: hidden;
}
#container {
width:3600px; /*total images width */
display: none;
position: absolute;
top: 120px;
left: 0px;
border: solid 0px #6699cc;
}
.images {
float:left;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var x = screen.width;
var w = 3550; /*total images width */
var i = 0;
var speed = 4;
function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
setTimeout("imageScroll()",speed);
}
onload = imageScroll;
//]]>
</script>
</head>
<body>
<div id = "container">
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
<img class = "images" src = "fredentedopt.jpg" alt = ""/>
<img class = "images" src = "koordanserkleinopt.jpg" alt = ""/>
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
</div>
</body>
</html>
This is the HTML I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns="<head>
<title>Image Scroller</title>
<base href=" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background: #ffffff;
overflow: hidden;
}
#container {
width:3600px; /*total images width */
display: none;
position: absolute;
top: 120px;
left: 0px;
border: solid 0px #6699cc;
}
.images {
float:left;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var x = screen.width;
var w = 3550; /*total images width */
var i = 0;
var speed = 4;
function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
setTimeout("imageScroll()",speed);
}
onload = imageScroll;
//]]>
</script>
</head>
<body>
<div id = "container">
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
<img class = "images" src = "fredentedopt.jpg" alt = ""/>
<img class = "images" src = "koordanserkleinopt.jpg" alt = ""/>
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
</div>
</body>
</html>
