473,385 Members | 1,838 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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>

May 12 '06 #1
4 1618
the other john wrote on 12 mei 2006 in comp.lang.javascript:
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">
Do not use language="javascript" anymore
if(document.images) {
bubbles = new Image
off = new Image
bubbles.src = "images/bubbles.jpg"
off.src = "default.jpg"
}
else {
bubbles = ""
off = ""
}
I don't know why you need the above code.
After all you are not preloading all images you use.
adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
"images/oak.jpg")
thisAd = 0

imgCt = adImages.length
use var in defining new variables.

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

function rotate() {
if (document.images) {
thisAd++
if(thisAd == imgCt) {
thisAd = 0
}
You will see see number 0 last this way
document.ImgField.src=adImages[thisAd]
Use ID and getElementById() bor a better cross-browser compatibility:

ImgField.src=adImages[thisAd]
delete the below line:
setTimeout("rotate()", 3 * 1000)
}
}
</script>


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)
May 12 '06 #2
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 ;-)

May 12 '06 #3
the other john wrote on 12 mei 2006 in comp.lang.javascript:
That worked, excellent!


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)
May 12 '06 #4
this worked....arg...posting on google is a pain....

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

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">
Do not use language="javascript" anymore

if(document.images) {
bubbles = new Image
off = new Image
bubbles.src = "images/bubbles.jpg"
off.src = "default.jpg"
}
else {
bubbles = ""
off = ""
}

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

adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
"images/oak.jpg")
thisAd = 0 imgCt = adImages.length
use var in defining new variables.

var imgCt = adImages.length;
var myInterval;
etc.
var ImgField = document.getElementById('ImgField'); //see below
function rotate() {
if (document.images) {
thisAd++
if(thisAd == imgCt) {
thisAd = 0
}
You will see see number 0 last this way

document.ImgField.src=adImages[thisAd]

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

ImgField.src=adImages[thisAd]
delete the below line:
setTimeout("rotate()", 3 * 1000)
}
}
</script>

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)

May 12 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: John | last post by:
Imagine this: I have a gif-image with text, coloured green. When MouseOver occurs the gif will swap to another gif with red colourded text. On MouseOut the gif turns back to the green text. ...
6
by: Dave | last post by:
I have a situation where I want to react to a ctrl-click on a <span> and it works in Netscape and Firefox browsers but in IE I have a problem. In IE I do catch the ctrl-click but IE also renders...
6
by: D | last post by:
I have a simple file server utility that I wish to configure as a Windows service - using the examples of the Python Win32 book, I configured a class for the service, along with the main class...
1
by: KidBrax | last post by:
I have a menu that shows a div containing ULs whenever you mouseover the respective menuitems. And when you mouseout of the appearing div the div is hidden. Within the appearing div are one or...
2
by: markszlazak | last post by:
Could someone check out the following code and please help me understand the problem and fix it. It seems like some events are not firing when my mouse moves over the table cells to quickly causing...
2
by: Steve | last post by:
Hi All, I've been trying to come up with a good way to run a certain process at a timed interval (say every 5 mins) using the SLEEP command and a semaphore flag. The basic thread loop was always...
1
by: Proper | last post by:
I have the following problem: I have a button with an onmouseover event. This event fires as expected and displays another div element when the mouse hovers over the button. The div element...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.