onmouseover - what's missing - HTML Forums

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">

</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:

Code:

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

Quote:

Originally Posted by snapper

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:

Code:

<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.

Code:

<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

Code:

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

Quote:

Originally Posted by RysChwith

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.