Welcome to WebmasterWorld Guest from 23.22.19.253

Forum Moderators: open

Message Too Old, No Replies

mouseover and span: how?

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

10+ Year Member



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 Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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 Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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 Jul 1, 2003 (gmt 0)

10+ Year Member



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

gph

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

10+ Year Member



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