Forum Moderators: open
Here's the erroneous code I've been playing with...
<span name=example style="background-color: cyan;">text</span>
<AREA SHAPE=POLY COORDS="blah,blah,blah" HREF="/click.htm"
onMouseOver="document.example.style='background-color: yellow;';" onMouseOut="document.example.style='background-color: gray;';">
Can you see what I'm doing wrong?
document.getElementById('example').style.background-color='rgb(102,102,102)';(the rgb-values are for some shade of grey)
Oh.. and change the span from name=example to id=example (or use both, as long as the name is the same, it doesn't matter)
Also, Netscape/Mozilla doesn't always like changing styles on the fly, so perhaps it is necessary to call a javascript function outside the "area" tag.
/claus
<script type="text/javascript"><!-- //
function highlight(elem) {
if (document.getElementById) {
theElement = document.getElementById(elem);
} else if (document.all) {
theElement = document.elem;
}
theElement.style.background = "yellow";
} function unHighlight(elem) {
if (document.getElementById) {
theElement = document.getElementById(elem);
} else if (document.all) {
theElement = document.elem;
}
theElement.style.background = "white";
}
// --></script>
<img src="pics/bye.gif" border="0" align="left" alt="Java little man" ismap usemap="#map1">
<br>
<map id="map1" name="map1"><area shape="rect" coords="0,20,50,100" onmouseover="highlight('myDiv');" onmouseout="unHighlight('myDiv');" href="index.html"></map>
<div id="myDiv" style="background-color:white;"><p>Outside span text.<br></p></div>
Here's the erroneous code I've been playing with...
First of all, your SPAN should have an ID attribute, not NAME:
<span id=example style="background-color: cyan;">text</span>
Then the mouseOver (and mouseOut) should read:
... onMouseOver="example.style.backgroundColor='yellow'" ...
So get rid of the 'document' part, make 'backgroundColor' one word with capital C, and place it before the equal sign.
<John DeVie />
I used a span in place of your area to test.
<html>
<head>
<title></title>
<style>
#example {
background-color: cyan;
}
</style>
<script>
function EL(el) {
return document.getElementById(el)
}onload = function() {
if (EL('example')) {
ex = EL('example')
}
}
function Switch_Bgd(over) {
if (over) {
ex.style.backgroundColor = 'yellow'
} else {
ex.style.backgroundColor = 'cyan'
}
}
</script>
</head>
<body>
<span id="example">example text</span>
<span onmouseover="Switch_Bgd('over')" onmouseout="Switch_Bgd()">test</span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><title>Mouseover color change</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><table width="80%" border="1"><tr><td width="50%" onmouseover="this.style.backgroundColor='#ffcc99';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="location.href='index.html';" style="cursor:hand;">Box 1</td><td width="50%" onmouseover="this.style.backgroundColor='#eff7ff';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="location.href='index.html';" style="cursor:hand;">Box 2</td></tr></table></body></html>The onclick and cursor style are optional, depending on what you're trying to achieve (you can define the cursor in your external CSS file instead). Code is IE5+ / NS6+ (and Mozilla) / Opera 6+ only (not Netscape 4)!
It would only need to be changed in the CSS and the global variable "ex_over" which could be at the top of your js file.
ex_over = 'yellow'
function Switch_Bgd(over) {
if (over) {
ex.style.backgroundColor = ex_over
} else {
ex.style.backgroundColor = ''
}
}
