On Mouse Over

[bkoltys]

I know there is a function "OnMouseOver" and OnMouseOut" but not sure how to use them. I want to simply have my table of contents on my web page change color when the mouse is rolled over certain items and return to the original color when the mouse rolls off the item. Do I need to validate anything before the OnMouseOver code begins? Any help would be appreciated. Thanks.

Bryan

 

[crazyboybert]

hi bkoltys,

briefly....

onmouseover and onmouseout are event handlers. This means they trigger a script to run on a certain event in this case the mouse entering or leaving an area. the most common use of these event handlers is the rollover effect you are looking for.

a simple example would be:

<a href=&quot;#&quot; onmouseover=&quot;document.myImg.src='img2.gif'; return false;&quot; onmouseout=&quot;document.myImg.src='img1.gif';&quot;><img src=&quot;img1.gif&quot; name=&quot;myImg&quot;></a>

in this example the script to be run is held in the onmouseover enevt handler itself however this could also be a call to a function in a script block elsewhere on the page or an external script sheet. this script will change the src attribute of myImg when the mouse moves over and change it back when it moves back, thus creating a rollover effect..

however if you wanted to do this with html text (and are not bothered about supporting netscape) then this can be achieved using css
e.g

a{color:#ff0000}
a:hover{color:#0000ff}

this in your stylesheet would change all links to blue from red when the mouse hovers over them. obviously this is fairly limited as it only works for text links. if you dont want to have all your text as links or images then some more advanced manipulation of the stylesheet would be required..

hope this helps. if you are still confused im sure one of the guys/gals in this forum will be able to give you a link to some info on this...

also there are some good tutorials at places like

http://hotwired.lycos.com/webmonkey/

http://www.htmlgoodies.com

good luck with it

rob

 

[iza]

this is called events (mmmm as soon as you feel at ease with events, run and read the faqs for this forum, plenty of funny tricks in them !!)
every time your mouse is passing over an element, the "onmouseover" event is fired - same for onmouseout (as soon as you leave this element)
but if you don't attach an action to this event, it is fired and ... does nothing
to attach an action to onmouseover in a div (but you can attach the action for ANY element, for instance ... the window), simply do so :
<div ... onmouseover=&quot;javascript:do_something()&quot;>
so when the mouse passes OVER this div, it'll call the &quot;do_something()&quot; function (for instance : change_menu_color())
and to &quot;return to the original color when the mouse rolls off the item.&quot; it's just the same :
<div ... onmouseover=&quot;javascript:do_something()&quot; onmouseout=&quot;javascript:un_do_something()&quot;>