Doubts - OnMouse and innerHTML

tcardoso · Apr 14, 2008

Hi,

I have a couple of doubts, first the code:

Code:

<span id="muda" onMouseOver=changeName();" onMouseOut="backName();"><font color='green'>A</font><font color='blue'>name</font></span>

<script type='text/javascript'>
function changeName() {
     document.getElementById('muda').innerHTML ="<font color='blue'>A</font><font color='#8AFB17'>name</font>";
}

function backName() {
     document.getElementById('muda').innerHTML ="<font color='green'>A</font><font color='blue'>name</font>";
}
</script>

1st - This is just to change some colors on onmouseover. This is working on Firefox, but not on IE6 (didn't test it on IE7)
2nd - The onmouseover only works on the letters, how can I make it to work on all span (defining the height, width area)
3th - I have that code under a link (<a title='text'>...</a>), but it not always work the link and it doesn't show the tittle.

this all code may sound strange, but thats cause its build on the fly when constructing a big page on php. I use span and not <div> cause the <div> gives me a break on the page, that I don't want.

Thanks for ANY help
Telmo Cardoso

j4606 · Apr 14, 2008

1)You should try to avoid using font tags and start using spans with classes to style your text. I don't think you need javascript for what you are trying to achieve since you may be able to do it with HTML and anchor styling via the hover psuedo class?. It may not be semantically correct so you can also try this

Code:

<span onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'">color change text!</span>

2)onmouseover works on anything it is applied too. It works on a span container, div, or other element that can be referenced via js dom.

3)? what?

for that last stament you can style a div to make it act the way you want. Try reading on display styles: block, none, inline ect... I think a div with a display:inline style will fix your break issue

heres a link

http://www.eskimo.com/~bloo/indexdot/css/properties/classify/display.htm

tcardoso · Apr 14, 2008

About the

1) that would only change that specific span. I have a name with 5 colors, then onmouseover it, I want to change it all (some stuff stays in red, others in blue, others in green, etc.) The way you told me, it changes only one color at a time.

2) I was saying that when I place the mouse over my name it only activates the onmouseOver if I place exactly over a letter (like an O on the middle doesn't activate the onmouseover)

3) the original code is like this:

Code:

<b><a title='Respected Member [XX Days Left]' href='profiles.php?id=".$worked['id']."'>$worked['username']</a></font></b>

where $worked['username'] can be (cannot be too, it depends):

Code:

<span id="muda" onMouseOver=changeName();" onMouseOut="backName();"><font color='green'>A</font><font color='blue'>name</font></span>

<script type='text/javascript'>
function changeName() {
     document.getElementById('muda').innerHTML ="<font color='blue'>A</font><font color='#8AFB17'>name</font>";
}

function backName() {
     document.getElementById('muda').innerHTML ="<font color='green'>A</font><font color='blue'>name</font>";
}

So I was saying that the link in the code (<a></a>) doesnt work and doesn't show the title with the days of the member.

Thanks

j4606 · Apr 14, 2008

I mean to show how to reference style properties instead of using font tags with color attributes and innerhtml.
But here is an example of how to achieve what i think you are asking for:

Code:

<html>
<head>
<script type="text/javascript">
	function changeName() {
		var mudaObj = document.getElementById('muda');
		mudaObj.style.width = "300px";
		var	 spanObjs = mudaObj.getElementsByTagName("span");
		for(var i = 0; i <spanObjs.length; i++){
			switch(spanObjs[i].className){
				case "class1":
				spanObjs[i].style.color = "red";
				break;
				case "class2":
				spanObjs[i].style.color = "blue";
				break;
				case "class3":
				spanObjs[i].style.color = "green";
				break;
			}
		 }
	}

	function backName() {
		var mudaObj = document.getElementById('muda');
		mudaObj.style.width = "500px"
		var	 spanObjs = mudaObj.getElementsByTagName("span");
		for(var i = 0; i <spanObjs.length; i++){
			switch(spanObjs[i].className){
				case "class1":
				spanObjs[i].style.color = "blue";
				break;
				case "class2":
				spanObjs[i].style.color = "green";
				break;
				case "class3":
				spanObjs[i].style.color = "red";
				break;
			}
		 }
	}
</script>
</head>
<body>
	<div id="muda" onMouseOver="changeName();" onMouseOut="backName();" style="border:solid 1px black;">
		<span class="class1">test 1</span>
		<span class="class2">test 2</span>
		<span class="class3">test 3</span>
	</div>
<body>
</html>

Still having trouble understanding your problem with the span mouse over attribute. Posting client side code only or a link to the page may help.

tsuji · Apr 14, 2008

[0] As said, font tag is deprecated and should be replaced by nested span tag and script its style.color accordingly. But, I would offer an explanation and resolution retaining font tags as demonstration.

[1] Actually ie and ff both try to perform and have equal chance of success. However, the way you script the handler makes the process instable. The mouseover happens infinite number of times (mouseout is asymmetric and can be well-behaved.) Why? Because you redraw the span tag. After the 1st redraw, mouseover is against called, hence, another redraw... repeatedly. The shows you how the browser struggle to stop at some random time.
[tt]
<span id="muda" onMouseOver=changeName();" onMouseOut="backName();"><font color='green'>A</font><font color='blue'>name</font></span>
[blue]<div id="write"><div>[/blue]
<script type='text/javascript'>
function changeName() {
[blue]document.getElementById("write").innerHTML+=document.getElementById('muda').innerHTML;[/blue]
document.getElementById('muda').innerHTML ="<font color='blue'>A</font><font color='#8AFB17'>name</font>";
}

function backName() {
document.getElementById("write").innerHTML+=document.getElementById('muda').innerHTML;
document.getElementById('muda').innerHTML ="<font color='green'>A</font><font color='blue'>name</font>";
}
</script>
[/tt]
[1.1] In the div write, you'll see repeated call of the mouseover handler, as explained above.

[2] This is the resolution. It avoids redraw of the node and hence no repeated call.
[tt]
<span id="muda" onMouseOver=changeName();" onMouseOut="backName();"><font color='green'>A</font><font color='blue'>name</font></span>

<script type='text/javascript'>
function changeName() {
var cfont=document.getElementById('muda').getElementsByTagName("font");
if (cfont.length >=1 ) {
cfont[0].color = 'blue';
cfont[1].color = '#8AFB17';
}
}

function backName() {
var cfont=document.getElementById('muda').getElementsByTagName("font");
if (cfont.length >=1 ) {
cfont[0].color = 'green';
cfont[1].color = 'blue';
}
}
</script>
[/tt]
[3] To fend off all criticism, you could use nested spans.
[tt]
<span id="muda" onMouseOver=changeName();" onMouseOut="backName();"><span style="color:green;">A</span><span style-"color:blue;">name</span></span>
[/tt]
Then replace cfont.color by cspan.style.color. And you're done.

tcardoso · Apr 14, 2008

Today I don't have too much time, but I'll take a good look, try it, test it all

and then post again if I have any doubts.

Thanks guys

tsuji · Apr 14, 2008

[uAmendment[/u]
Upon re-read what I posted, this line too hastily made appeared in both function should be amended as a matter of course.
>[self]if (cfont.length >=1 ) {
[tt]if (cfont.length [COLOR=red ivory]>[/color] 1 ) {[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Doubts - OnMouse and innerHTML

tcardoso

Programmer

j4606

MIS

tcardoso

Programmer

j4606

MIS

tsuji

Technical User

tcardoso

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor