homepage Welcome to WebmasterWorld Guest from 54.196.194.204
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
mouseover and span: how?
royalelephant




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

How can I use a mouseover routine to change the colors for a text span command? I just can't get any results.

 

rainborick




msg:1491003
 3:19 am on Jul 1, 2003 (gmt 0)

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!

royalelephant




msg:1491004
 1:08 pm on Jul 1, 2003 (gmt 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?

claus




msg:1491005
 1:18 pm on Jul 1, 2003 (gmt 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

rainborick




msg:1491006
 2:16 pm on Jul 1, 2003 (gmt 0)

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!

devvie




msg:1491007
 3:01 pm on Jul 1, 2003 (gmt 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 />

royalelephant




msg:1491008
 4:58 pm on Jul 1, 2003 (gmt 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




msg:1491009
 6:05 pm on Jul 1, 2003 (gmt 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>

universalis




msg:1491010
 6:08 pm on Jul 1, 2003 (gmt 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




msg:1491011
 6:13 pm on Jul 1, 2003 (gmt 0)

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

gph




msg:1491012
 6:29 pm on Jul 1, 2003 (gmt 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 = ''
}
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved