on mouse out error

**keyboard** · 09-28-2011, 01:42 AM

Does anyone know why this won't work?

HTML Code:

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

Code:

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

To:

Code:

<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

HTML Code:

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

Code:

<p id="status">

To:

Code:

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

Code:

.show {
    display:block;
 }

to:

Code:

.show {
    display:inline
 }

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

Thread: on mouse out error

Thread Tools

Search Thread

on mouse out error

Bookmarks

Bookmarks

Posting Permissions