Log in

View Full Version : Resolved on mouse out error


keyboard
09-28-2011, 01:42 AM
Does anyone know why this won't work?


<html>
<head>

</head>
<body>
<center>
<p>
<font size="+5" color="purple">keyboard1333S IS <div onMouseOver="changeText()" onMouseOut="çhangeTexte()" id="status">EPIC</div>
</font>
</p>
</center>
</body>
</html>

<script>
function changeText()
{
document.getElementById("status").innerHTML='Awesome'
}
</script>

<script>
function changeTexte()
{
document.getElementById("status").innerHTML='Epic'
}
</script>


Any help would be great!
mburt
09-28-2011, 02:22 AM
There's a cedilla over the "c" in the onmouseout function for some reason. Try changing:

<font size="+5" color="purple">keyboard1333S IS <div onMouseOver="changeText()" onMouseOut="çhangeTexte()" id="status">EPIC</div>
To:

<font size="+5" color="purple">keyboard1333S IS <div onMouseOver="changeText()" onMouseOut="changeTexte()" id="status">EPIC</div>
keyboard
09-28-2011, 05:11 AM
Yeah, works fine now. Don't know why it did that. Thanks for your help!
keyboard
09-28-2011, 10:55 PM
One more thing guys



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
display:none;
}
.show {
display:block;
}
</style>

<script type="text/javascript">
var el;
window.onload=function() {
el=document.getElementById('status');
el.onmouseover=function() {
changeText('hide','show')
}
el.onmouseout=function() {
changeText('show','hide');
}
}
function changeText(cl1,cl2) {
document.getElementById('span1').className=cl1;
document.getElementById('span2').className=cl2;
}
</script>

</head>
<body>

<center>
<font size="+5">
KEYBOARD1333 IS
<p id="status">
<span id="span1">EPIC</span>
<span id="span2" class="hide">AWESOME</span>
</p>
</font>
</center>
</body>
</html>


DO you know how I can make the Keyboard1333 is and the epic/amazing on the same line?

any help would be great
mburt
09-28-2011, 11:41 PM
Try changing:

<p id="status">
To:

<p id="status" style=" display: inline; ">
keyboard
09-29-2011, 01:03 AM
It works when I first load it, but when I mouse over the Epic the epic/awesome moves onto the next line.
mburt
09-29-2011, 04:02 AM
In your CSS, change:


.show {
display:block;
}

to:


.show {
display:inline
}

Block causes an element to take up an entire "row" of space, whereas inline keeps it all text width.