DHTML/DHTML

Advertisement

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"><font face="Arial">
Gravity = The Expansion Of All Mass !</font></p>

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

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.