Welcome to WebmasterWorld Guest from 54.147.63.124

Forum Moderators: open

Message Too Old, No Replies

mouseover and span: how?

     
1:54 am on Jul 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 4, 2003
posts:150
votes: 0


How can I use a mouseover routine to change the colors for a text span command? I just can't get any results.
3:19 am on July 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


You can use some heavy JavaScript to monitor the mouse position and get adequate tracking, but the most efficient and reliable method is to incorporate an <a>nchor into the text you want to highlight. Give the <a>nchor a CSS class that has a plain state and a a:hover state. Note that you may need to set display:block on the anchor tag to get the highlighting effect you're after on a cross-browser basis. Good luck!
1:08 pm on July 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 4, 2003
posts:150
votes: 0


Thanks rain... Let me explain... I want to use onmouseover routine with an imagemap, so that mousing over the map with "light up" (change the span colors) in the nearby text. Can I use js's "name" and "document" commands with css's span?

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?

1:18 pm on July 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 15, 2003
posts:2395
votes: 0


just a quick comment, try this syntax:

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

2:16 pm on July 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


I'm not sure if I understand exactly what you're trying to do. Do you mean you have an image that incorporates a more complete version of the <map><area></map> that you posted and what you want is for the mouseover on this image/map to change/highlight a <span></span>? If so, I can come close, but my tests seem to show it requires the <span> to be a <div> in order to be compatible with Netscape/Mozilla... and its kinda ugly-looking, but that can probably be minimized. See if this helps:

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


I may have got the pre-v5.5 MSIE (document.all) code muddled in the JavaScript, so check that. If you make the <div> absolutely positioned, you could probably add NS4 support, but I wouldn't expect that to be practical in this case. Good luck!
3:01 pm on July 1, 2003 (gmt 0)

New User

10+ Year Member

joined:June 8, 2003
posts:11
votes: 0


royalelephant wrote:

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

4:58 pm on July 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 4, 2003
posts:150
votes: 0


Yes, rainborick, that's what I'd like to do. Sorry, for not being as clear as necessary. I think your solution is way-above me, but John DeVie's seems to work very elegantly in IE6... Thanks for dropping in on this thread, John. Now, I'll just have to test and see if this is part of the web's better mouse trap... (sigh: dream)

gph

6:05 pm on July 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


As usual, there's lots of ways to do the same thing. I think I'd do it this way so it can easily be changed down the road and makes for less code in the page (assuming you're using external CSS and JS).

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>

6:08 pm on July 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 11, 2003
posts:146
votes: 0


I'm not sure whether this is what you're looking for, but the area shape method looks overcomplicated. Try this basic model - the following is for a table, but it works just fine with divs as well:

<!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)!

gph

6:13 pm on July 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


Well sorry rainborick, I just realized I posted pretty much the same thing as you.

gph

6:29 pm on July 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


Also, thinking about it, my function can be written as per below.

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 = ''
}
}