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!
changing onmouseover dynamically
- Thread starter minli98
- Start date
trollacious
Programmer
If you mean without using the onmouseover and onmouseout events, no. You can change the images with style sheets, though, and that has been explained at various times in the HTML forum.
forum215
Lee
forum215
Lee
- Thread starter
- #3
Yes, basically it's a open/close button for a box. The onmouseover/onmouseout is an image-swap to highlight the button. When the box is opened, I'd change the button to 'Close.gif', but I also need to change the onmouseover to 'Close_highlight.gif'.
Thanks,
Min
Thanks,
Min
- Thread starter
- #4
One idea I have is to put the img in a div, and trigger the change through
but it seems that the quotes will get all tangled up
Code:
document.getElementById("div_name").innerHTML = "<img src='close.gif' onmouseover='this.src="close_highlight.gif"'>"but it seems that the quotes will get all tangled up
theniteowl
Programmer
Instead of altering the onmouseover through code just use it as a trigger to call a function. In your function you check the last stored state the button was in and toggle it to the opposite and store that state either in a global variable or hidden form field.
Paranoid? ME?? WHO WANTS TO KNOW????
Paranoid? ME?? WHO WANTS TO KNOW????
- Thread starter
- #6
classefied
Programmer
Try adding these two layers. It works ok for me. You just need to fill-in the heights, widths and names of the images and put in your own script then try it. If it is what your looking for, then position and re-size the layers where you need them.
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; visibility:visible" id="opened"><img border="0" alt="close" width="XX" height="XX" src="open1.GIF" onclick="document.getElementById('opened').style.visibility='hidden'; document.getElementById('closed').style.visibility='visible'; YOUR BOX OPENING SCRIPT HERE" onmouseover="this.src='open2.GIF'" onmouseout="this.src='open1.GIF'"></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; visibility:hidden" id="closed"><img border="0" alt="open" width="XX" height="XX" src="close1.GIF" onclick="document.getElementById('closed').style.visibility='hidden'; document.getElementById('opened').style.visibility='visible'; YOUR BOX CLOSING SCRIPT HERE" onmouseover="this.src='close2.GIF'" onmouseout="this.src='close1.GIF'"></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; visibility:visible" id="opened"><img border="0" alt="close" width="XX" height="XX" src="open1.GIF" onclick="document.getElementById('opened').style.visibility='hidden'; document.getElementById('closed').style.visibility='visible'; YOUR BOX OPENING SCRIPT HERE" onmouseover="this.src='open2.GIF'" onmouseout="this.src='open1.GIF'"></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; visibility:hidden" id="closed"><img border="0" alt="open" width="XX" height="XX" src="close1.GIF" onclick="document.getElementById('closed').style.visibility='hidden'; document.getElementById('opened').style.visibility='visible'; YOUR BOX CLOSING SCRIPT HERE" onmouseover="this.src='close2.GIF'" onmouseout="this.src='close1.GIF'"></div>
theniteowl
Programmer
Hope it works for you.
I did something very similar recently in something I was working on.
Here is a sample. Insert your own buttons of course.
What I did is to name the buttons Open.jpg, Open-hover.jpg, Close.jpg and Close-hover.jpg.
The onmouseover and onmouseout events still trigger the button change for the hover effect but it builds the name for the src from a global variable and appends the -hover where needed.
The onclick event changes the global variable to the opposite state of whatever it was already set to then changes the button to the appropriate one already in a hover state since your mouse is still over the button.
If you moved your mouse off the button before releasing the mouse button then the onclick event would not have fired anyway so it is reasonably reliable that the button should be displayed in a hover state.
<html>
<head>
<title></title>
<script language="javascript">
var openclose = "Open";
function buttontoggle(which)
{
if (openclose == "Open")
openclose = "Close";
else
openclose = "Open";
which.src = openclose + '-hover.jpg';
}
</script>
</head>
<body>
<img src="Open.jpg" onmouseover="this.src=openclose+'-hover.jpg'" onmouseout="this.src=openclose+'.jpg'" onclick="buttontoggle(this)">
</body>
</html>
Paranoid? ME?? WHO WANTS TO KNOW????
I did something very similar recently in something I was working on.
Here is a sample. Insert your own buttons of course.
What I did is to name the buttons Open.jpg, Open-hover.jpg, Close.jpg and Close-hover.jpg.
The onmouseover and onmouseout events still trigger the button change for the hover effect but it builds the name for the src from a global variable and appends the -hover where needed.
The onclick event changes the global variable to the opposite state of whatever it was already set to then changes the button to the appropriate one already in a hover state since your mouse is still over the button.
If you moved your mouse off the button before releasing the mouse button then the onclick event would not have fired anyway so it is reasonably reliable that the button should be displayed in a hover state.
<html>
<head>
<title></title>
<script language="javascript">
var openclose = "Open";
function buttontoggle(which)
{
if (openclose == "Open")
openclose = "Close";
else
openclose = "Open";
which.src = openclose + '-hover.jpg';
}
</script>
</head>
<body>
<img src="Open.jpg" onmouseover="this.src=openclose+'-hover.jpg'" onmouseout="this.src=openclose+'.jpg'" onclick="buttontoggle(this)">
</body>
</html>
Paranoid? ME?? WHO WANTS TO KNOW????
classefied
Programmer
Very elegant and concise.
If you are concerned with dragging the onclick event off the image, why not change --onclick="buttontoggle(this)" to --onmousedown="buttontoggle(this)" ?
If you are concerned with dragging the onclick event off the image, why not change --onclick="buttontoggle(this)" to --onmousedown="buttontoggle(this)" ?
theniteowl
Programmer
Thank you.
Either onmousedown or onclick works, it is just a matter of knowing how the various events will fire and it might change a bit browser to browser.
I write for a corporate intranet with a company standard of IE5.5+. We do not code for other browsers as no PC in the company should be using anything else. But I try to err on the side of caution with some things when possible.
I ran into a lot of trouble with mouse events trying to make my own scrollable windows.
With a draggable object you would click down on it to start dragging but if your mouse pointer strayed off the object while the button is still down you would lose the onmouseup event because the pointer is no longer on the object and the object would continue to be dragged around the screen until you clicked it again. It became a horrible mess to figure out all the possible events and combinations and trying to determine what would suffice for my needs without ending up with unusual consequences. One mouse event can override another causing it not to fire.
For instance. In Windows, if you click on an application button but move your mouse off the button before releasing then the button never executes. It depends on how the app is written of course but it is something you can test easily enough to see the effect.
In this code though suppose onmousedown was used to change the image source. You would still need to determine whether to display the hover or non-hover version. If you change to the standard button then it would not show the hover effect until you moved off and back onto it again so the effect ends up pretty much the same, just a different trigger.
I would have to test it both ways to see if one was more susceptible to failure due to other mouse events overriding the ones needed. So my only reason at this point is that I use onclick more often so it was the first one I thought of.
Paranoid? ME?? WHO WANTS TO KNOW????
Either onmousedown or onclick works, it is just a matter of knowing how the various events will fire and it might change a bit browser to browser.
I write for a corporate intranet with a company standard of IE5.5+. We do not code for other browsers as no PC in the company should be using anything else. But I try to err on the side of caution with some things when possible.
I ran into a lot of trouble with mouse events trying to make my own scrollable windows.
With a draggable object you would click down on it to start dragging but if your mouse pointer strayed off the object while the button is still down you would lose the onmouseup event because the pointer is no longer on the object and the object would continue to be dragged around the screen until you clicked it again. It became a horrible mess to figure out all the possible events and combinations and trying to determine what would suffice for my needs without ending up with unusual consequences. One mouse event can override another causing it not to fire.
For instance. In Windows, if you click on an application button but move your mouse off the button before releasing then the button never executes. It depends on how the app is written of course but it is something you can test easily enough to see the effect.
In this code though suppose onmousedown was used to change the image source. You would still need to determine whether to display the hover or non-hover version. If you change to the standard button then it would not show the hover effect until you moved off and back onto it again so the effect ends up pretty much the same, just a different trigger.
I would have to test it both ways to see if one was more susceptible to failure due to other mouse events overriding the ones needed. So my only reason at this point is that I use onclick more often so it was the first one I thought of.
Paranoid? ME?? WHO WANTS TO KNOW????
- Status
Similar threads