Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
can I trigger a rollover without rolling over?
- Thread starter leadman
- Start date
go to click on scripts and look into chapter 3 - specifically creating cycling banners. thsi will show you how tro use a timer for changing images. --------------------------------------------------
Goals are dreams with deadlines
Goals are dreams with deadlines
U could do this using document.images["imageName"].src = 'something.jpg' and setTimeout("javascript", delai)
I'd be interested in seeing this kind of effect. let me know if you finish this anytime soon.
Gary " Haran
I'd be interested in seeing this kind of effect. let me know if you finish this anytime soon.
Gary " Haran
ok ok I was too impatient so I decided to do it myself. You can base yourself on the way this works.
<html>
<head>
<script>
var delai = 50; // milliseconds between each change.
var currImg = 0; // tells us wich image we are on
function imageEffect()
{
if (currImg > 0)
{
// set last image back to original src.
document.images[currImg-1].src = "purple.png"
}
if (currImg < document.images.length)// stops us from going on forever
{
// sets image to new src
document.images[currImg].src = "teal.png"
// tells us to do the same but with the next one in line
currImg++
// repeat this function for the next image
setTimeout("imageEffect()", delai)
}
}
</script>
</head>
<body onload="imageEffect()">
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
</body>
</html>
Gary " Haran
<html>
<head>
<script>
var delai = 50; // milliseconds between each change.
var currImg = 0; // tells us wich image we are on
function imageEffect()
{
if (currImg > 0)
{
// set last image back to original src.
document.images[currImg-1].src = "purple.png"
}
if (currImg < document.images.length)// stops us from going on forever
{
// sets image to new src
document.images[currImg].src = "teal.png"
// tells us to do the same but with the next one in line
currImg++
// repeat this function for the next image
setTimeout("imageEffect()", delai)
}
}
</script>
</head>
<body onload="imageEffect()">
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
<img src=purple.png height=10 width=10>
</body>
</html>
Gary " Haran
now for the same stuff except more easily scalable and with no respect for older browser :
<html>
<head>
<script>
var delai = 50; // milliseconds between each change.
var currImg = 0; // tells us wich image we are on
function imageEffect()
{
if (currImg > 0)
{
// set last image back to original src.
var img = document.images[currImg-1]
var other = img.getAttribute("otherSrc"
img.setAttribute("otherSrc", img.src)
img.src = other
}
if (currImg < document.images.length)// stops us from going on forever
{
// sets image to new src
var img = document.images[currImg]
var other = img.getAttribute("otherSrc"
img.setAttribute("otherSrc", img.src)
img.src = other
// tells us to do the same but with the next one in line
currImg++
// repeat this function for the next image
setTimeout("imageEffect()", delai)
}
}
</script>
</head>
<body onload="imageEffect()">
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
</body>
</html>
Gary " Haran
<html>
<head>
<script>
var delai = 50; // milliseconds between each change.
var currImg = 0; // tells us wich image we are on
function imageEffect()
{
if (currImg > 0)
{
// set last image back to original src.
var img = document.images[currImg-1]
var other = img.getAttribute("otherSrc"
img.setAttribute("otherSrc", img.src)
img.src = other
}
if (currImg < document.images.length)// stops us from going on forever
{
// sets image to new src
var img = document.images[currImg]
var other = img.getAttribute("otherSrc"
img.setAttribute("otherSrc", img.src)
img.src = other
// tells us to do the same but with the next one in line
currImg++
// repeat this function for the next image
setTimeout("imageEffect()", delai)
}
}
</script>
</head>
<body onload="imageEffect()">
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
<img src=purple.png otherSrc=teal.png height=10 width=10>
</body>
</html>
Gary " Haran
notice the otherSrc attribute is used. That means that you could have anything you want in the src and otherSrc attribute.
You could for example add another image with anything you want for src and otherSrc.
<img src=myImageOn.png otherSrc=myImageOff.png>
would work easily without modifying the second script.
Gary " Haran
You could for example add another image with anything you want for src and otherSrc.
<img src=myImageOn.png otherSrc=myImageOff.png>
would work easily without modifying the second script.
Gary " Haran
- Status
Similar threads
- Locked
- Question
