	AllExperts > DHTML
	Search

Volunteer
Answers to thousands of questions

Home · More DHTML Questions · Answer Library

· Encyclopedia ·

DHTML - DHTML

Expert: Andrew Hoffman - 3/5/2009

Question
QUESTION: Hi Andrew,

How do you make a mouseover in DHTML only work when passing over text rather than passing over the page ?

Thanks,
Harry

ANSWER: Harry,

There may be other ways to do this, but here's mine. I specify which elements I want to receive the mouseover effect (whatever it is), and bind the mouseover events to ONLY these elements. This may seem slightly annoying, but I find it faster than looping through ALL elements, and filtering on everything. Run the code below to see it in action:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
window.onload = function() {
  // specify the elements to receive the effects
  var els = new Array('p', 'li', 'dd');

  // declare variables
  var el, i, j;
  var len = els.length;

  // loop through the array of elements
  for (i = 0; i < len; i++) {
     // get the current batch of elements ('example: all <p> tags')
     el = document.getElementsByTagName(els[i]);
     for (j = 0; j < el.length; j++) {
        el[j].onmouseover = function() {
           // specify whichever onmouseover effect you desire
           this.style.color = 'red';
        }
        el[j].onmouseout = function() {
           // specify whichever onmouseout effect you desire
           this.style.color = 'black';
        }
     }
  }
}
</script>
</head>
<body>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que </p>
<dl>
<dt>definition title</dt>
<dd>definition data 1</dd>
<dd>definition data 2</dd>
</dl>
<img src="http://wvbr.com/images/uploads/after_dark_moon_guitar.jpg" width="377" height="358" alt="" />
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
<img src="http://wvbr.com/images/uploads/after_dark_moon_guitar.jpg" width="377" height="358" alt="" />
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</body>
</html>

---------- FOLLOW-UP ----------

QUESTION: Hi Andrew, I plead for your patience as this is very important.

I tried to paste your code into my frontpage but the code itself always showed up on the normal view page.

Below is "all" the code on my page.

Could you please insert your code and then return to me only what I need to paste into the html view on frontpage.

I truly appreciate your help.

You're the best. ;0)

Here's my code;

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<p> </p>
<p> </p>
<p> </p>

<script type="text/javascript">

txtsize=0;
maxsize=50;

function writemsg()
{
if (txtsize<maxsize)
  {
  document.getElementById('msg').style.fontSize=txtsize;
  txtsize++;
  timer=setTimeout("writemsg()",10);
  }
}

function stoptimer()
{
clearTimeout(timer);
}

</script>
</body>

<body onmouseover="writemsg()" onunload="stoptimer()">

<p id="msg" align="center"><b><font face="Arial">
Gravity = The Expansion Of All Mass !</font></p>
</b>
</body>
</html>
</body>
</html>

Answer
Harry,

Next time, please look through your HTML before submitting a question here. Many duplicate tags existed in your code that caused many errors.

I think this is what you were going for:

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">

txtsize=0;
maxsize=50;

function writemsg()
{
if (txtsize<maxsize)
{
document.getElementById('msg').style.fontSize=txtsize;
txtsize++;
timer=setTimeout("writemsg()",10);
}
}

function stoptimer()
{
clearTimeout(timer);
}

</script>
</head>

<body onMouseOver="writemsg()" onUnload="stoptimer()">

<p id="msg" align="center"><font face="Arial">
<strong>Gravity = The Expansion Of All Mass !</strong></font></p>

</body>
</html>

Add to this Answer Ask a Question