PDA

View Full Version : onmouseover - what's missing


snapper
09-22-2005, 07:43 AM
Am I missing something in the following preventing the mouseover and mouseclick from working?

<a href="finn%20enlarge.jpg" target="advimage" onMouseOut="Finn%20up.jpg" onMouseOver="Finn%20down.jpg" onMouseDown="Finn%20down.jpg"><img src="Finn%20up.jpg" border="0">

Don't know if it needs a Javascript command somewhere?

Style commands are q simple, as follows:
<style type="text/css">
<!--
a:link{
text-decoration: none;
}
a:hover {
color:#cccccc;
}

-->
</style>

RysChwith
09-22-2005, 08:22 AM
Yup, you're missing the JavaScript. I'm assuming you're trying to change the source of the image? You could probably do something like this:onmouseout = "this.firstChild.src = 'Finn%20up.jpg" onmouseover = "this.firstChild.src = 'Finn%20down.jpg"Note 1: event handlers should be in all lower case, I think (someone correct me if I'm wrong, please).

Note 2: you don't need the onmousedown handler, since it's impossible to fire while the mouse isn't over the button.

Rys

snapper
09-22-2005, 08:56 AM
Any way of getting around using Java? IE views them as popups which are blocked on my pc and I would assume on many others.

jonirvine
09-22-2005, 09:09 AM
Any way of getting around using Java? IE views them as popups which are blocked on my pc and I would assume on many others.

To do without javascript, you can use background images for the links and change them onhover with CSS.

eg:

<style type="text/css">
<!--
a:link{
display: block; width: 100px; height: 25px;
background-image: url(finn%20enlarge.jpg); background-position: 0 0; background-repeat: no-repeat;
text-decoration: none;
}
a:hover {
background-image: url(finn%20enlarge2.jpg);
}
-->
</style>

snapper
09-22-2005, 09:13 AM
Trouble is, have several different images (acting as icons), all of which have links to JPGs which open in another frame. Sticking with Java for a moment, have edited the code to the following, but I need the JPG 'Evie%20down.jpg' to remain in place until the user clicks on another image/icon. Is there anything like 'onunclick'??? (thanks for bearing with me - this is only day 7 of the learning curve!)

<a href="evie%20enlarge.jpg" target="advimage" onmouseover="evie.src='Evie%20down.jpg'" onclick="evie.src='Evie%20down.jpg'" onmouseout="evie.src='Evie%20up.jpg'"><img src="Evie%20up.jpg" name="evie" border="0" id="evie">

RysChwith
09-22-2005, 01:25 PM
CSS only gives you the possibility of changing it for hover. Anything else is going to require JavaScript. Note that event handlers -- onmouseover, onmouseout, etc. -- are inherently JavaScript properties. They're specifically designed to call JavaScript functions, and nothing else*.

I will point out that IE's probably only going to block them when executed from your local hard drive. Once you upload it to the site, it'll be fine with it. Just one of its entertaining little quirks.

Rys

* Well, you might be able to use them with VBScript as well, but I couldn't swear to that.

steverz
09-23-2005, 12:30 AM
Maybe show us your complete code or webpage so we can take a look at your code.

Yes, vbScript would work as well.

<script language=vbscript>
Sub namehere_onMouseOver
namehere.Style.Background-Image = "url('./image.jpg')"
End Sub
Sub namehere_onMouseOut
namehere.Style.Background-Image = "url('./image.jpg')"
End Sub
</script>
It may be namehere.Style.BackgroundImage = "url('./image.jpg')"
I can't remember atm.

<a href="evie%20enlarge.jpg" target="advimage" id="namehere"><img src="Evie%20up.jpg" name="evie" border="0" id="evie">

What your looking for is the onBlur(onunclick) handler.

snapper
09-23-2005, 06:45 AM
Thanks for help - going to stick with Java and try it out when uploaded.

RysChwith
09-23-2005, 08:34 AM
Onblur is a little bit different. It fires any time a form element loses focus. This doesn't necessarily involve the mouse, though. It only applies to form elements, windows, and frames. It can be triggered by tabbing off the element in question, or by clicking anywhere that isn't the element, which doesn't necessarily mean the user has clicked on one of the other options.

Rys

Bill Posters
09-23-2005, 08:43 AM
Onblur is a little bit different. It fires any time a form element loses focus. This doesn't necessarily involve the mouse, though. It only applies to form elements, windows, and frames.
Not so. It can be used on any element which is capable of taking the focus. Importantly - crucially from a keyboard user's pov - that also includes links.