Connecting Tech Pros Worldwide Help | Site Map
 
 
LinkBack Thread Tools Search this Thread
  #1  
Old May 12th, 2006, 02:15 PM
the other john
Guest
 
Posts: n/a
Default mouseout stopping a function

I have a function that is activated by a mouseover. The function
triggers an image rotation. I need to stop the rotation on the
mouseout but I don't know how to do this. the mouseover triggers the
rotate() function below. currently the mouseout produces the default
image but then it keeps cycling the other images.

<script language="javascript" type="text/javascript">
if(document.images) {
bubbles = new Image
off = new Image
bubbles.src = "images/bubbles.jpg"
off.src = "default.jpg"
}
else {
bubbles = ""
off = ""
}

adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
"images/oak.jpg")
thisAd = 0

imgCt = adImages.length

function rotate() {
if (document.images) {
thisAd++
if(thisAd == imgCt) {
thisAd = 0
}
document.ImgField.src=adImages[thisAd]
setTimeout("rotate()", 3 * 1000)
}
}
</script>

  #2  
Old May 12th, 2006, 03:15 PM
Evertjan.
Guest
 
Posts: n/a
Default Re: mouseout stopping a function

the other john wrote on 12 mei 2006 in comp.lang.javascript:
[color=blue]
> I have a function that is activated by a mouseover. The function
> triggers an image rotation. I need to stop the rotation on the
> mouseout but I don't know how to do this. the mouseover triggers the
> rotate() function below. currently the mouseout produces the default
> image but then it keeps cycling the other images.
>
> <script language="javascript" type="text/javascript">[/color]

Do not use language="javascript" anymore
[color=blue]
> if(document.images) {
> bubbles = new Image
> off = new Image
> bubbles.src = "images/bubbles.jpg"
> off.src = "default.jpg"
>}
> else {
> bubbles = ""
> off = ""
>}[/color]

I don't know why you need the above code.
After all you are not preloading all images you use.


[color=blue]
> adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
> "images/oak.jpg")
> thisAd = 0
>
> imgCt = adImages.length[/color]

use var in defining new variables.

var imgCt = adImages.length;
var myInterval;
etc.
var ImgField = document.getElementById('ImgField'); //see below
[color=blue]
>
> function rotate() {
> if (document.images) {
> thisAd++
> if(thisAd == imgCt) {
> thisAd = 0
> }[/color]

You will see see number 0 last this way
[color=blue]
> document.ImgField.src=adImages[thisAd][/color]

Use ID and getElementById() bor a better cross-browser compatibility:

ImgField.src=adImages[thisAd]


delete the below line:
[color=blue]
> setTimeout("rotate()", 3 * 1000)
> }
>}
> </script>[/color]

and do:

onmouseover = 'myInterval = setInterval("rotate()", 3e3);'
onmouseout =
'clearInterval(myInterval);imgField.src="images/default.jpg"'

==============

Try in the <head>:

<script type='text/javascript'>
var adImages =
['images/whitemarble.jpg','images/bubbles.jpg','images/oak.jpg']
var imgCt = adImages.length;
var imageHolder = new Array;

for (var i=0;i<imgCt;i++){ // preloader
imageHolder[i] = new Image()
imageHolder[i].src = adImages[i]
}

var thisAd = 0;
var myInterval;

function rotate() {
document.getElementById('ImgField').src =
imageHolder[thisAd].src
if (++thisAd == imgCt) thisAd = 0
}
</script>


[not tested]

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
  #3  
Old May 12th, 2006, 04:35 PM
the other john
Guest
 
Posts: n/a
Default Re: mouseout stopping a function

That worked, excellent!

Now I have to figure out how to make this work for 12 different sets of
rollovers. I know there's a way to do it with a more involved array
but I"m not that experienced.

There are 12 thumbs in a circle. the ImgField is in the center. when
one of the thumbs in the circle is moused over the center image,
ImgField, displays a rotation of samples of the thumb being rolled
over. mouseout produces the default image. What you gave me works
great! if I can make it for all 12 without writing a seperate function
for each thumb that would be great.

Thanks for your help! I might be able to feed my kids this week ;-)

  #4  
Old May 12th, 2006, 04:35 PM
Evertjan.
Guest
 
Posts: n/a
Default Re: mouseout stopping a function

the other john wrote on 12 mei 2006 in comp.lang.javascript:
[color=blue]
> That worked, excellent![/color]

What worked?

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers. <http://www.safalra.com/special/googlegroupsreply/>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
  #5  
Old May 12th, 2006, 04:55 PM
the other john
Guest
 
Posts: n/a
Default Re: mouseout stopping a function

this worked....arg...posting on google is a pain....

the other john wrote on 12 mei 2006 in comp.lang.javascript:

[color=blue]
> I have a function that is activated by a mouseover. The function
> triggers an image rotation. I need to stop the rotation on the
> mouseout but I don't know how to do this. the mouseover triggers the
> rotate() function below. currently the mouseout produces the default
> image but then it keeps cycling the other images.[/color]
[color=blue]
> <script language="javascript" type="text/javascript">[/color]



Do not use language="javascript" anymore

[color=blue]
> if(document.images) {
> bubbles = new Image
> off = new Image
> bubbles.src = "images/bubbles.jpg"
> off.src = "default.jpg"
>}
> else {
> bubbles = ""
> off = ""
>}[/color]


I don't know why you need the above code.
After all you are not preloading all images you use.

[color=blue]
> adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
> "images/oak.jpg")
> thisAd = 0[/color]
[color=blue]
> imgCt = adImages.length[/color]



use var in defining new variables.

var imgCt = adImages.length;
var myInterval;
etc.
var ImgField = document.getElementById('ImgField'); //see below


[color=blue]
> function rotate() {
> if (document.images) {
> thisAd++
> if(thisAd == imgCt) {
> thisAd = 0
> }[/color]



You will see see number 0 last this way

[color=blue]
> document.ImgField.src=adImages[thisAd][/color]


Use ID and getElementById() bor a better cross-browser compatibility:

ImgField.src=adImages[thisAd]


delete the below line:


[color=blue]
> setTimeout("rotate()", 3 * 1000)
> }
>}
> </script>[/color]


and do:

onmouseover = 'myInterval = setInterval("rotate()", 3e3);'
onmouseout =
'clearInterval(myInterval);imgField.src="images/default.jpg"'


==============


Try in the <head>:


<script type='text/javascript'>
var adImages =
['images/whitemarble.jpg','images/bubbles.jpg','images/oak.jpg']
var imgCt = adImages.length;
var imageHolder = new Array;


for (var i=0;i<imgCt;i++){ // preloader
imageHolder[i] = new Image()
imageHolder[i].src = adImages[i]



}


var thisAd = 0;
var myInterval;

function rotate() {
document.getElementById('ImgField').src =
imageHolder[thisAd].src
if (++thisAd == imgCt) thisAd = 0


}


</script>

[not tested]


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 205,338 network members.