onmouseover change text

**blackhawkpowers** · 03:32 PM

well as the title tells I don't use javascript much and I need some help with a mouseover effect what I want to do is when the mouse is moved over one of my images it changes the text in a div somewhere else on the page...

what I have is this and it is not returning anything...

Code:

function writeToLayer(id, sHTML) {
  if (!page_loaded) return;
  var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
  if (!el) return;
  var cntnt = '<div class="info">' + sHTML + '</div>';
  if (typeof el.innerHTML!="undefined") {
      el.innerHTML = cntnt;
  } else if (document.layers) {
   el.document.write(cntnt);
   el.document.close();
  }
}
 
var msg6 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 700<br>Our design team and embroiderers can create a logo that is as unique as your company.</font></h5>';
 
 
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg7)"><img border="0" src="images/caps/700-1402.50.gif" onMouseOver="modifyimage('dynloadarea', 6)"></a>

any ideas?

**ADAM Web Design** · 12-22-2006, 03:26 PM

Do you have a div called infoDiv somewhere in your page? If not, that won't work.

**blackhawkpowers** · 12-22-2006, 03:31 PM

yes I do I can paste the entire html doc here but it's fairly lengthy I'm redesigning one and trying to keep some of the functions I like but that bit of the page looks as follows

HTML Code:

Here are some of our newest cap styles 
          and designs that we have created. We can construct a cap for you with 
          any number of options and fabrics, giving you an unlimited number of 
          capabilities for a cap style.</strong></h5>
 <div id="infoDiv">
 
 </div> <!-- close infodiv -->

**ADAM Web Design** · 12-22-2006, 06:01 PM

Actually, I think I just spotted it. And you're probably going to either hate me or yourself if I'm right. We've all done it at some point, though. I've done it at least a hundred times.

Look for the red parts.

Code:

var msg6 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 700<br>Our design team and embroiderers can create a logo that is as unique as your company.</font></h5>';
 
 
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg7)"><img border="0" src="images/caps/700-1402.50.gif" onMouseOver="modifyimage('dynloadarea', 6)"></a>

**blackhawkpowers** · 12-22-2006, 07:19 PM

good eye but that's not it there are a bunch of vars there i just copied the wrong one..... although this is very highly frustrating I'm going to give all my html so good luck filtering threw it I believe I have given the important parts here but maybe I'm wrong...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 <title>USA Made Caps</title>
 <meta http-equiv="Content-Language" content="en-us" />
 <meta name="description" content="Vanguard Manufactoring custom made caps and hats" 
/>
 <meta name="keywords" content="Caps Hats Vanguard Manufactoring American made USA 
custom hats caps" />
 <meta name="author" content="Dustin Powers" />
 <link rel="stylesheet" type="text/css" href="./css/style.css" />
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at http://www.dyn-web.com/
  See Terms of Use at http://www.dyn-web.com/bus/terms.html
  Permission granted to use this code 
  as long as this entire notice is included.
*************************************************************************/
// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
 origWidth = window.innerWidth; origHeight = window.innerHeight;
 window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}
var page_loaded; // set true onload (avoid errors onmouseover/out before page loaded)
function initInfoLyr() {
  page_loaded = true; 
  writeToLayer('infoDiv', origMsg); // write first message onload
}
function writeToLayer(id, sHTML) {
  if (!page_loaded) return;
  var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
  if (!el) return;
  var cntnt = '<div class="info">' + sHTML + '</div>';
  if (typeof el.innerHTML!="undefined") {
      el.innerHTML = cntnt;
  } else if (document.layers) {
   el.document.write(cntnt);
   el.document.close();
  }
}
// Variables for layer content
var origMsg = '<h5><font color="#000000" face="Times New Roman, Times, serif">Move your mouse over the images below to view a larger image and options.</font></h5>';
var msg1 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 600<br>This cap has a split visor, and also included an emroidered logo on the back panel of the cap.</font></h5>';
var msg2 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 700<br>A great way to combine our great camouflage fabrics and the saftey of hunters orange.</font></h5>';
var msg3 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 600<br>If you dont want the entire cap to be camouflage, you can choose different materials for different panels.</font></h5>';
var msg4 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 600<br>A pewter emblem and suede visor are just two of the many options we offer.</font></h5>';
var msg5 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 5300<br>Since we do all the sewing and embroidery at our factory, we can customize each cap detail like you want.</font></h5>';
var msg6 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 1047<br>Visors are a popular style these days, and our visor is stylish, comfortable and constructed to last.</font></h5>';
var msg7 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Style 700<br>Our design team and embroiderers can create a logo that is as unique as your company.</font></h5>';
var msg8 = '<h5><font color="#FF0000" face="Times New Roman, Times, serif">Realtree Hardwoods® Green HD™<br>Just one of the many camouflage fabrics we offer, we have several fabrics to fit your needs.</font></h5>';
</script>
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["images/caps/600-1815.250.gif", ""]
dynimages[1]=["images/caps/camo/cap11-10.gif", ""]
dynimages[2]=["images/caps/camo/cap11-30.gif", ""]
dynimages[3]=["images/caps/600-1437.250.gif", ""]
dynimages[4]=["images/caps/5300-1714.250.gif", ""]
dynimages[5]=["images/caps/1047-1433.250.gif", ""]
dynimages[6]=["images/caps/700-1402.250.gif", ""]
dynimages[7]=["images/fabrics/camo/realtreehardwoodsgreen.jpg", ""]
//Preload images ("yes" or "no"):
var preloadimg="yes"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script> 
</head>
<body>
<div id="wrapper"> 
 <div id="top">
  <h1>American Made </h1> <br>
  <h1>American Product </h1> <br>
    <h1>American QUALITY </h1><br>
 </div> <!-- close top -->
 
 <div id="sidebar-a">
   <ul id="menu">
        <li><a href="#">New Items</a></li>
        <li><a href="#">6 Panel Caps</a></li>
        <li><a href="#">5 Panel Caps</a></li>
        <li><a href="#">Visors</a></li>
        <li><a href="#">Camouflage</a></li><br><br>
        <li><a href="#">Options</a></li>
        <li><a href="#">Information</a></li>
        <li><a href="#">Pricing</a></li> <br>
        <li><a href="#">Visit USA Made Bags .com</a></li>
   </ul>
 <div class="announce">
<h3>Latest news:</h3>
<p><strong>January 1st 2007:</strong><br />
New design and layout finished and uploaded</p>
</div> <!-- close announce -->
 </div> <!-- close sidebar -->
 
 <div id="content">
 
  <h5><strong style="color: #FF0000;"><div id="dynloadarea">
 </div>
 Here are some of our newest cap styles 
          and designs that we have created. We can construct a cap for you with 
          any number of options and fabrics, giving you an unlimited number of 
          capabilities for a cap style.</strong></h5>
 <div id="infoDiv">
 
 </div> <!-- close infodiv -->
<div id="bottomofcontent">
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg1)"><img border="0" src="images/caps/600-1815.50.gif"  onMouseOver="modifyimage('dynloadarea', 0)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg2)"><img border="0" src="images/caps/camo/cap11-11.gif" onMouseOver="modifyimage('dynloadarea', 1)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg3)"><img border="0" src="images/caps/camo/cap11-31.gif" onMouseOver="modifyimage('dynloadarea', 2)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg4)"><img border="0" src="images/caps/600-1437.50.gif" onMouseOver="modifyimage('dynloadarea', 3)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg5)"><img border="0" src="images/caps/5300-1714.50.gif" onMouseOver="modifyimage('dynloadarea', 4)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg6)"><img border="0" src="images/caps/1047-1433.50.gif" onMouseOver="modifyimage('dynloadarea', 5)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg7)"><img border="0" src="images/caps/700-1402.50.gif" onMouseOver="modifyimage('dynloadarea', 6)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg8)"><img src="images/fabrics/camo/realtree50.gif" width="44" height="39" border="0" onMouseOver="modifyimage('dynloadarea', 7)"></a>
</div>
<?
  include ('./footer.inc');
?>

**ADAM Web Design** · 12-22-2006, 07:54 PM

Ahhh, now it makes sense.

<body onload="initInfoLyr()">

You need to run the initInfoLyr() function before you can have the script work. It initializes the page_loaded variable to true.

**blackhawkpowers** · 12-22-2006, 08:25 PM

Adam you're the man! thanks for your help!

**ADAM Web Design** · 12-22-2006, 08:26 PM

Please! Call me by my real first name...Jesus.

No probs, buddy. Glad you got it sorted out.