PDA

View Full Version : Javascript animated image that stops on mouseover

darkannie
05-09-2003, 06:44 PM
I was wondering if this can be done at all. Images that continuously swap like an animation until the mouse hovers over it. The image that stops is the one already set to do so. Like you can program all images to swap and change constant, setting up one of those images to appear on mouseover, like any standard image swap. hope i'm not being too vague.

btw, i love this board. I feel like there is no delimma that you guys can't solve. can i grow up and be you one day :o
Mr J
05-09-2003, 11:19 PM
Please try the following


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<SCRIPT language="javascript">
<!--
contents=new Array()
contents[contents.length]=new Array("pic1.jpg")
contents[contents.length]=new Array("pic2.jpg")
contents[contents.length]=new Array("pic3.jpg")
contents[contents.length]=new Array("pic4.jpg")
contents[contents.length]=new Array("pic5.jpg")
contents[contents.length]=new Array("pic6.jpg")
contents[contents.length]=new Array("pic7.jpg")

var preloadpics=new Array() // preloads images
for (i=0;i<=contents.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=contents[i][0]
}

var pause = 2000 // in milliseconds
var picnum=1

function RunMe(){
divA.innerHTML = "<img name=opic src='"+contents[picnum][0]+"'width='"+document.all.divA.style.width+"'height='"+document.all.divA.style.height+"' onmouseover=\"wait()\" onmouseout=\"RunMe()\">"
loc=picnum
timer=setTimeout("RunMe()",pause)

if(picnum==contents.length-1){
picnum=-1
clearTimeout(timer)
}
picnum++

}
setTimeout("RunMe()",1000)

function wait(){
clearTimeout(timer)
document.opic.src="pic10.jpg" // onmouseover pic
}
// -->
</SCRIPT>

</HEAD>
<BODY>

<DIV id=divA style="position:absolute; left:200; top:100; width:100; height:100; font-size:35; text-align:center;cursor:hand">
<img src="pic1.jpg" width=100 height=100>
</DIV>

</BODY>
</HTML>




Change pic1.jpg etc to your own images and change pic10.jpg to your onmouseover image