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 Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Checking for mouseover.....!?
- Thread starter nexius
- Start date
inside your img tag place the onmouseover attribute with the call to the function that will handle the mouseover event, e.g.
and in the <HEAD> of your page define yourFunc(), e.g.
I hope this helped.
---
---
Code:
<img src="yourImg.gif" onmouseover="yourFunc()">and in the <HEAD> of your page define yourFunc(), e.g.
Code:
<head>
<script>
function yourFunc()
{
alert("don't put mouse over this image")
}
...I hope this helped.
---
---
- Thread starter
- #3
Yea, I know
And I do do that, but the script I need also demands another way of getting it.
I'm trying to make an animation button, so that a certain graphic continues to progress through certain frames, while the mouse is over the image, and then when the mouse falls back, it would decrease in frames...
See where I'm going with this?
Thanks anyway though --- and if someone else could help...?
-NeXius
And I do do that, but the script I need also demands another way of getting it.
I'm trying to make an animation button, so that a certain graphic continues to progress through certain frames, while the mouse is over the image, and then when the mouse falls back, it would decrease in frames...
See where I'm going with this?
Thanks anyway though --- and if someone else could help...?
-NeXius
You could write a series of functions to handle the animation, and then call the appropriate function on the onMouseOver & onMouseOut events ...
Something like that?
Greg.
Code:
<IMG SRC="myimage.jpg" onMouseOver="startAnim()" onMouseOut="stopAnim()">Greg.
"I'm trying to make an animation button, so that a certain graphic continues to progress through certain frames, while the mouse is over the image, and then when the mouse falls back, it would decrease in frames..."
The way you described it, I think it would be more appropriate to use Flash animation. Are you familiar with it? ---
---
The way you described it, I think it would be more appropriate to use Flash animation. Are you familiar with it? ---
---
- Thread starter
- #7
Hi guys,
Yea I worked something together, it looks pretty cool... However, there's still a problem with the animation.
I did what Greg suggested (thanks man) but now for some reason it flashes in and out of picture
could somebody please check it out?
(I can't very effectively explain it)
go to
slowly and carefully move your mouse over one of the buttons, then slowly off again. Otherwise it becomes really screwed up.
THANK YOU.
-NeX
Yea I worked something together, it looks pretty cool... However, there's still a problem with the animation.
I did what Greg suggested (thanks man) but now for some reason it flashes in and out of picture
could somebody please check it out?
(I can't very effectively explain it)
go to
slowly and carefully move your mouse over one of the buttons, then slowly off again. Otherwise it becomes really screwed up.
THANK YOU.
-NeX
Not sure, but at first glance it looks like you have spaces in your image names, i.e. (from your code)
mem.src="frames/mem " + i + ".gif";
I would at first suggest getting rid of all these as it's generally not good practise, although it's probably not the main problem. Looking in the "frames" directory I see that is the case.
Secondly there are an awful lot of images to load which seems to take an age to load ... maybe someone can help with the specifics of that.
The theory behind it all is good though
Greg.
mem.src="frames/mem " + i + ".gif";
I would at first suggest getting rid of all these as it's generally not good practise, although it's probably not the main problem. Looking in the "frames" directory I see that is the case.
Secondly there are an awful lot of images to load which seems to take an age to load ... maybe someone can help with the specifics of that.
The theory behind it all is good though
Greg.
I wanted to do something similiar and I figured it out. What I wanted was one animation that started an effect, and second animation that looped when the mouse was over a button, and then a closing animation when the mouse left. I think this is what you wanted to do. Here is the code to make it work. This code could be stream lined, but I wanted to get it working first.
This goes in script
function MainButtonOver()
{
if (event.type == 'mouseover')
{
MainOverStartAni();
setTimeout("MainOverStillAni()",1600);
}
}
'This is the starting animation.
function MainOverStartAni()
{
changeImages('TopLeft', 'images/Top-Left.gif', 'TopCenter', 'images/Top-Center.gif', 'KaosImage', 'images/Kaos-Image.gif', 'MainButton', 'images/Main-Button-over.gif', 'BioButton', 'images/Bio-Button.gif', 'LinksButton', 'images/Links-Button.gif'); return true;
}
'This is the looping animation.
function MainOverStillAni()
{
changeImages('TopLeft', 'images/Top-Left.gif', 'TopCenter', 'images/Top-Center.gif', 'KaosImage', 'images/Kaos-Image.gif', 'MainButton', 'images/Main-Button-overstill.gif', 'BioButton', 'images/Bio-Button.gif', 'LinksButton', 'images/Links-Button.gif'); return true;
}
In the Body
<TD>
<A HREF="#"
ONMOUSEOVER=MainButtonOver();
ONMOUSEOUT="changeImages('TopLeft', 'images/Top-
left.gif', 'MainButton', 'images/Main-Button-
out.gif'); return true;">
<IMG NAME="MainButton" SRC="images/Main-Button.gif" WIDTH=235 HEIGHT=84 BORDER=0>
</A>
</TD>
-David
This goes in script
function MainButtonOver()
{
if (event.type == 'mouseover')
{
MainOverStartAni();
setTimeout("MainOverStillAni()",1600);
}
}
'This is the starting animation.
function MainOverStartAni()
{
changeImages('TopLeft', 'images/Top-Left.gif', 'TopCenter', 'images/Top-Center.gif', 'KaosImage', 'images/Kaos-Image.gif', 'MainButton', 'images/Main-Button-over.gif', 'BioButton', 'images/Bio-Button.gif', 'LinksButton', 'images/Links-Button.gif'); return true;
}
'This is the looping animation.
function MainOverStillAni()
{
changeImages('TopLeft', 'images/Top-Left.gif', 'TopCenter', 'images/Top-Center.gif', 'KaosImage', 'images/Kaos-Image.gif', 'MainButton', 'images/Main-Button-overstill.gif', 'BioButton', 'images/Bio-Button.gif', 'LinksButton', 'images/Links-Button.gif'); return true;
}
In the Body
<TD>
<A HREF="#"
ONMOUSEOVER=MainButtonOver();
ONMOUSEOUT="changeImages('TopLeft', 'images/Top-
left.gif', 'MainButton', 'images/Main-Button-
out.gif'); return true;">
<IMG NAME="MainButton" SRC="images/Main-Button.gif" WIDTH=235 HEIGHT=84 BORDER=0>
</A>
</TD>
-David
- Status
Similar threads
- Locked
- Question