PDA

View Full Version : Mouse Over and Out doesnt want to work.

florida
07-12-2002, 07:36 PM
The script below does change the link colors onmouseover and onmouseout:

<script name="javascript">
function overAndOut(oEl) {
if (oEl.style.color == 'orange')
oEl.style.color = 'blue';
else oEl.style.color = 'orange';
}
</script>



<a href="myfile.htm" onmouseover="overAndOut(this);"
onmouseout="overAndOut(this);">LINK CHANGES COLORS OKAY HERE</a>



But if I put the other stuff with the onmouseover and onmouseout the text doesnt change colors. Is it something to do with the "this" part or anythingelse someone could see that I am missing?

<a href="myfile.htm"
onMouseOver="javascript:window.status='MyText...';return true;overAndOut(this);"
onMouseOut="javascript:window.status='';return true;overAndOut(this);">
CHANGE LINK TEXT COLOR ON MOUSE OVER HERE</a>
landon11
07-12-2002, 08:07 PM
edit: Disabled Smiles
Switch the functions like this:


onMouseOver="javascript:overAndOut(this);window.status='MyText...';return true;"
onMouseOut="javascript:overAndOut(this);window.status='';return true;">


also you can get the overAndOut affect without the script by adding this in your head tag and remove the overandout:


<style>
A:link { color: blue ;}
A:visited {color: blue ;}
A:active { color: blue;}
A:hover {color: orange;}
</style>
RadarBob
07-12-2002, 09:02 PM
<a href="myfile.htm"
onMouseOver="javascript:window.status='MyText...';return true;overAndOut(this);"
onMouseOut="javascript:window.status='';return true;overAndOut(this);">
CHANGE LINK TEXT COLOR ON MOUSE OVER HERE</a>


Seems to me that "return true" is doing just what it says; and the overandOut() function isn't being executed.
adios
07-13-2002, 12:29 AM
<html>
<head>
<style type="text/css">

.over {
color: orange;
}

.out {
color: blue;
}

</style>
<script type="text/javascript">

var stat = new Array();
stat[0] = 'Status message zero.';
stat[1] = 'Status message one.';

function overAndOut(el, classname, statMsg) {
if (typeof el.className != 'undefined')
el.className = classname;
status = statMsg;
return true;
}

</script>
</head>
<body>

<a href="myfile.htm" class="out"
onmouseover="return overAndOut(this,'over',stat[0])"
onmouseout="return overAndOut(this,'out','')">LINK CHANGES COLORS OKAY HERE</a><br><br>
<a href="myfile.htm" class="out"
onmouseover="return overAndOut(this,'over',stat[1])"
onmouseout="return overAndOut(this,'out','')">LINK CHANGES COLORS OKAY HERE</a>

</body>
</html>

Generally a better idea to swap classes; this allows you to easily modify the style changes. If you don't want to create a pile of 'use once and discard' functions, extract the page-specific data from them and pass it in as parameters. Watch those return statements - HTML event handlers (onmouseover, e.g.) are wrapped in functions, and return ends their execution.
premshree
07-13-2002, 09:29 AM
Swap classes like this:


<html>
<head>
<style type="text/css">

.over {
color: orange;
}

.out {
color: blue;
}

</style>
</head>
<body>
<a href="fileName.htm" class="out" onMouseover="this.className='over'; return true" onMouseout="this.className='out'; return true">.........</a>
</body>
</html>