Problems With Rollover Buttons

Question

rossowen 0 Newbie Poster

18 Years Ago

I have been making a basic webpage but am having lots of difficulties with rollover buttons. Despite the 2 images for my rollover being exactly the same size, when i make the button it creates a duplicate which is then placed alongside where I want the rollover to appear. This then knocks my whole layout across to the right and creates all sorts of problems when viewing in the browser.

Does anyone know what might be causing this problems or could offer any suggestions to get me back on track? Any suggestions would be greatly appreciated.

(These pictures illustrate the problems I'm having on a very basic site design and show the script involved)

html-css user-interface web-design

3 Contributors
5 Replies
207 Views
6 Days Discussion Span
Latest Post 18 Years Ago Latest Post by rossowen

Dani AI

Generated 6 Months Ago

The output shows two copies of each nav slice because ImageReady/Dreamweaver left a static slice image in the table cell and Dreamweaver also inserted the rollover image inside an anchor — so the same graphic appears twice. correctly identified the issue: removing the leading static <img> in each table cell and keeping only the anchor-wrapped image (the one with the id/name used by the swap script) eliminates the duplicate and stops the layout from shifting; confirmed this resolved the problem.

A few practical technical notes that extend the thread:

Reserve layout space so swaps do not reflow the page: keep width/height on the <img> (or set the dimensions in CSS) so the browser does not re-layout when the src changes.
Prevent inline-image gaps by making nav images display: block (or make anchors display: inline-block) and remove the deprecated border attribute via CSS (for example img{border:0}).
Ensure the image id/name exactly matches the identifier passed to the swap function so the correct element is targeted.

Modern, more robust alternatives (better performance and accessibility) avoid JS rollovers entirely by using CSS hover states or a sprite. Example pattern:

.nav a {
  display:inline-block;
  width:110px;
  height:30px;
  background:url(images/nav-sprite.png) 0 0 no-repeat;
  text-indent:-9999px; /* keep readable text for screen readers */
  overflow:hidden;
}
.nav a:hover,
.nav a:focus {
  background-position:0 -30px;
}

Accessibility note (echoing ): prefer text-based links styled visually, provide meaningful alt (or visible text), and add :focus styles so keyboard users can see focus. Quick checklist: remove duplicate <img>, confirm id/name match, set dimensions, add alt text, and consider CSS-based hover or sprites for a cleaner, more accessible solution.

All 5 Replies

FC Jamison 31 Posting Pro in Training

18 Years Ago

In the <head> section, add the following script:

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  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_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_swapImage() { //v3.0
  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];}
}
//-->
</script>

preload the rollover images in the head tag as in the following example:

<body onload="MM_preloadImages('resources/images/rollover1.gif','resources/images/rollover2.gif')">

Then add the rollover buttons as in the following example:

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','resources/images/rollover1.gif',1)">
  <img src="resources/images/image1.gif" width="100" height="50" border="0" id="Image1" />
</a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','resources/images/rollover2.gif',1)">
  <img src="resources/images/image2.gif" width="100" height="50" border="0" id="Image2" />
</a>

I created this using dreamweaver.

FC Jamison 31 Posting Pro in Training

18 Years Ago

After looking at your code, it appears you have told the browser to show each image twice.

change this code

<td>
<img src="images/home_original.gif" width="110" height="30" alt=""><a href="home_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/home_rollover.gif',1)"><img src="images/home_original.gif" alt="home" name="Image19" width="110" height="30" border="0"></a></td>

to

<td>
<a href="home_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/home_rollover.gif',1)"><img src="images/home_original.gif" alt="home" name="Image19" width="110" height="30" border="0"></a></td>

eliminating the leading image from each button.

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.

rossowen 0 Newbie Poster · Answer 1 · 2008-01-24T16:54:56+00:00

Thanks so much for the suggestion. I have had a look through my code and it appears that Dreamweaver has inserted a lot of this by itself in creating the rollover buttons. I am going to show you my document and code here in the hope that anyone with more knowledge of the subject than myself can see where I'm going wrong.

It is a simple nav bar with 4 links that are to be rollovers, however it creates my rollover buttons adjacent to where I want them to appear and leaves a static copy of the navigation bar where I want the rollovers to appear. I have watched countless tutorials and read up all over the web in regards to this problem and am at my wits end!

My code as it stands is as follows - anyone have any idea where my problem lies? (any suggestions would be greatly appreciated!)

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
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_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_swapImage() { //v3.0
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];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/home_rollover.gif','images/about_rollover.gif','images/contact_rollover.gif','images/print_rollover.gif')">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="600" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <img src="images/home_page_01.gif" width="160" height="100" alt=""></td>
    <td>
        <img src="images/home_page_02.gif" width="110" height="100" alt=""></td>
    <td>
        <img src="images/home_page_03.gif" width="330" height="100" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/home_page_04.gif" width="160" height="30" alt=""></td>
    <td>
        <img src="images/home_original.gif" width="110" height="30" alt=""><a href="home_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/home_rollover.gif',1)"><img src="images/home_original.gif" alt="home" name="Image19" width="110" height="30" border="0"></a></td>
    <td>
        <img src="images/home_page_06.gif" width="330" height="30" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/home_page_07.gif" width="160" height="30" alt=""></td>
    <td>
        <img src="images/about_original.gif" width="110" height="30" alt=""><a href="about_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/about_rollover.gif',1)"><img src="images/about_original.gif" alt="about" name="Image20" width="110" height="30" border="0"></a></td>
    <td>
        <img src="images/home_page_09.gif" width="330" height="30" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/home_page_10.gif" width="160" height="30" alt=""></td>
    <td>
        <img src="images/contact_original.gif" width="110" height="30" alt=""><a href="contact_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','images/contact_rollover.gif',1)"><img src="images/contact_original.gif" alt="contact" name="Image21" width="110" height="30" border="0"></a></td>
    <td>
        <img src="images/home_page_12.gif" width="330" height="30" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/home_page_13.gif" width="160" height="30" alt=""></td>
    <td>
        <img src="images/print_original.gif" alt="" width="110" height="30" border="0"><a href="print_page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/print_rollover.gif',1)"><img src="images/print_original.gif" alt="print" name="Image22" width="110" height="30" border="0"></a></td>
    <td>
        <img src="images/home_page_15.gif" width="330" height="30" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/home_page_16.gif" width="160" height="380" alt=""></td>
    <td>
        <img src="images/home_page_17.gif" width="110" height="380" alt=""></td>
    <td>
        <img src="images/home_page_18.gif" width="330" height="380" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Thanks guys :)
ps: have included a screen shot of preview in browser so you can see the static nav bar and the one with rollovers in case it might help to illustrate the problem.

MidiMagic 579 Nearly a Senior Poster · Answer 2 · 2008-01-26T10:19:28+00:00

Rollover buttons are for pinball machines, not web pages. Without them, pages are a lot easier for people with disabilities to use.

rossowen 0 Newbie Poster · Answer 3 · 2008-01-28T15:12:14+00:00

Thanks so much FC Jamison, you hit the nail on the head there! Really appreciate the help, that problem was grinding me down slowly. Anyways, problem solved!

Problems With Rollover Buttons

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers