over image not working

Question

jhatter 0 Unverified User

18 Years Ago

Help I need your advice please!

My Problem:
I have created a navigation bar in Dreamweaver MX, using the INSERT NAVIGATION BAR tool. I have used a different files for both up & over images in each case. Everything works apart from one called LINKS. I have checked it in both SAFARI and IE, but when you mouse-over LINKS, instead of the image changing it remains the same.

Here is the code that DW generated, the top part is the problematic bit the bottom works OK:

<td width="57"><a href="links.html" target="_top" onclick="MM_nbGroup('down','group1','links','images/menu_bar_06.jpg',1)" onmouseover="MM_nbGroup('over','links','images/menu_bar_overs_06.jpg','images/menu_bar_06.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_06.jpg" alt="links" name="links" width="57" height="35" border="0" id="links" onload="" /></a></td>

<td width="106"><a href="term_dates.html" target="_top" onclick="MM_nbGroup('down','group1','termdates','images/menu_bar_07.jpg',1)" onmouseover="MM_nbGroup('over','termdates','images/menu_bar_overs_07.jpg','images/menu_bar_07.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_07.jpg" alt="termdates" name="termdates" width="106" height="35" border="0" id="termdates" onload="" /></a></td>

A few points:
The 2 images used are definetly different.
I tested it in a different file - same problem.
I tested it so that the 2 image files were swapped around ie up image was used in place of over and over image was used for the up image - same problem.

graphics:image web-design

2 Contributors
3 Replies
93 Views
8 Hours Discussion Span
Latest Post 18 Years Ago Latest Post by aravelli

Dani AI

Generated 10 Months Ago

The behavior described by (one button not swapping while others do) plus 's confirmation that the swap works in isolation points to a DOM-name collision rather than bad image files or a broken swap routine.

Dreamweaver's MM_* helpers use old-fashioned lookups like document[n] before getElementById. If your item is named or id'd links, that name collides with the built-in document.links collection and MM_findObj can return the wrong object (an HTMLCollection instead of the image), breaking the rollover. You can confirm this in the browser console by running console.log(document['links']) and comparing that to document.getElementById('links'). The document.links collection is documented here: Document.links.

Fixes (safe order):

Rename the image name and id to something unique (for example menu_links), and update every MM_nbGroup/callsite to that new id. This is the quickest, lowest-risk fix.
If renaming is not desired, edit the generated MM_findObj so it prefers getElementById before d[n]; see document.getElementById for behavior. Editing DW scripts is more invasive and can affect other pages, so backup first.

Also clear caches and test on the real hosting environment (case-sensitive filenames on Linux servers can mask problems). Once renamed, verify with dev tools that the element returned is an HTMLImageElement and that its src changes on mouseover.

All 3 Replies

aravelli 0 Newbie Poster

18 Years Ago

<script language="JavaScript">
function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { 
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_findObj(n, d) {
  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;
}
</script>
<body>
    <a onmouseover="MM_swapImage('Image1','','images/menu_bar_overs_06.jpg',1)" onmouseout="MM_swapImgRestore()" href="term_dates.html" ><img id="Image1" 
      height=24 alt="" src="images/menu_bar_06.jpg" width=125 border=0 name=Image1></a>
</body>

try this

i hope this works fine.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jhatter 0 Unverified User · Answer 1 · 2008-03-05T18:39:22+00:00

Thank you very much aravelli, I can get the link to work in isolation with your new code, but not in the file, which includes other code. Please could you make the changes to the code below. Hopefully then I will be able to copy & paste to all the site documents which include the site nav bar.

The problem link is the one called LINKS (menu_bar_overs_06.jpg), between CURRICULUM and TERM DATES.

FYI this is for my 3 year old's nursery website which I am doing as a favour for them.

Kind regards

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

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>
<link href="maples.css" rel="stylesheet" type="text/css" />
</head>

<Body link="#000066" onload="MM_preloadImages('images/menu_bar_09.jpg','images/menu_bar_overs_09.jpg','images/menu_bar_10.jpg','images/menu_bar_overs_10.jpg','images/menu_bar_04.jpg','images/menu_bar_overs_04.jpg','images/menu_bar_05.jpg','images/menu_bar_overs_05.jpg','images/menu_bar_06.jpg','images/menu_bar_overs_06.jpg','images/menu_bar_07.jpg','images/menu_bar_overs_07.jpg')">
<table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="43" height="77">&nbsp;</td>
    <td height="77" colspan="3" align="left" valign="bottom"> <table width="691" height="77" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="148" height="77"><img src="images/maples_logo_combined.jpg" alt="mapleslogo" name="logo" width="148" height="77" id="logo" /></td>
          <td height="77" valign="bottom"> <table border="0" align="left" cellpadding="0" cellspacing="0">
              <tr> 
                <td width="97"><a href="under 3s.html" target="_top" onclick="MM_nbGroup('down','group1','under3s','images/menu_bar_09.jpg',1)" onmouseover="MM_nbGroup('over','under3s','images/menu_bar_overs_09.jpg','images/menu_bar_09.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_09.jpg" alt="under3s" name="under3s" width="97" height="34" border="0" id="under3s" onload="" /></a></td>
                <td width="80"><a href="over 3s.html" target="_top" onclick="MM_nbGroup('down','group1','over3s','images/menu_bar_10.jpg',1)" onmouseover="MM_nbGroup('over','over3s','images/menu_bar_overs_10.jpg','images/menu_bar_10.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_10.jpg" alt="over3s" name="over3s" width="80" height="34" border="0" id="over3s" onload="" /></a></td>
                <td width="91"><a href="applying.html" target="_top" onclick="MM_nbGroup('down','group1','applying','images/menu_bar_04.jpg',1)" onmouseover="MM_nbGroup('over','applying','images/menu_bar_overs_04.jpg','images/menu_bar_04.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_04.jpg" alt="applying" name="applying" width="91" height="35" border="0" id="applying" onload="" /></a></td>
                <td width="106"><a href="curriculum.html" target="_top" onclick="MM_nbGroup('down','group1','curriculum','images/menu_bar_05.jpg',1)" onmouseover="MM_nbGroup('over','curriculum','images/menu_bar_overs_05.jpg','images/menu_bar_05.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_05.jpg" alt="curriculum" name="curriculum" width="106" height="35" border="0" id="curriculum" onload="" /></a></td>

                <td width="57"><a href="links.html" target="_top" onclick="MM_nbGroup('down','group1','links','images/menu_bar_06.jpg',1)" onmouseover="MM_nbGroup('over','links','images/menu_bar_overs_06.jpg','images/menu_bar_06.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_06.jpg" alt="links" name="links" width="57" height="35" border="0" id="links" onload="" /></a></td>

                <td width="106"><a href="term_dates.html" target="_top" onclick="MM_nbGroup('down','group1','termdates','images/menu_bar_07.jpg',1)" onmouseover="MM_nbGroup('over','termdates','images/menu_bar_overs_07.jpg','images/menu_bar_07.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_bar_07.jpg" alt="termdates" name="termdates" width="106" height="35" border="0" id="termdates" onload="" /></a></td>
              </tr>

aravelli 0 Newbie Poster · Answer 2 · 2008-03-05T19:02:14+00:00

can you please check the two images again.

nothing wrong in this.

i think unfortunately the names of the images may change.

over image not working

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers