japie
11-20-2004, 11:38 AM
In the HTML below I have a scrolling script for scrolling images. OnMouseOver the scrolling stops and the user can click to another HTML. Now I would like to add a rollover in the sense that the image on which the Mouseover is done, is also changed into another image. Could someone help me with this?
This is the HTML I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Scroller</title>
<base href="http://www.inspiration-company.nl/" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background: #ffffff;
}
#middle {
position:absolute;
left:200px;
top:120px;
width:450px;
height:300px;
overflow: hidden;
}
#container {
width:3788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;
}
.images {
float:left;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var x = 250;
var w = 3788; /*total images width */
var i = 0;
var speed = 10;
function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
scroller=setTimeout("imageScroll()",speed);
}
onload = imageScroll;
function stopScroll(el) {
clearTimeout(scroller);
el.onmouseout=function() {
imageScroll();
}
}
onload = imageScroll;
//]]>
</script>
</head>
<body>
<div id ="middle">
<div id = "container">
<a href="http://www.google.com" target="_self"><img class = "images" border="0" src = "blindpianoopt.jpg" onmouseover = "stopScroll(this);return false" alt = ""/></a>
<a href="http://www.yahoo.com" target="_self"><img class = "images" border="0" src = "colorhandkleinopt.jpg" onmouseover = "stopScroll(this);return false" alt = ""/></a>
</div>
</div>
</body>
</html>
This is the HTML I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Scroller</title>
<base href="http://www.inspiration-company.nl/" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background: #ffffff;
}
#middle {
position:absolute;
left:200px;
top:120px;
width:450px;
height:300px;
overflow: hidden;
}
#container {
width:3788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;
}
.images {
float:left;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var x = 250;
var w = 3788; /*total images width */
var i = 0;
var speed = 10;
function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
scroller=setTimeout("imageScroll()",speed);
}
onload = imageScroll;
function stopScroll(el) {
clearTimeout(scroller);
el.onmouseout=function() {
imageScroll();
}
}
onload = imageScroll;
//]]>
</script>
</head>
<body>
<div id ="middle">
<div id = "container">
<a href="http://www.google.com" target="_self"><img class = "images" border="0" src = "blindpianoopt.jpg" onmouseover = "stopScroll(this);return false" alt = ""/></a>
<a href="http://www.yahoo.com" target="_self"><img class = "images" border="0" src = "colorhandkleinopt.jpg" onmouseover = "stopScroll(this);return false" alt = ""/></a>
</div>
</div>
</body>
</html>