Problems With Rollover Buttons

Question

rossowen 0 Newbie Poster

16 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)

web-design

3 Contributors
5 Replies
172 Views
6 Days Discussion Span
Latest Post 16 Years Ago Latest Post by rossowen

FC Jamison 31 Posting Pro in Training

16 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

16 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!