Skip navigation
DoodleSprite
DoodleSprite Calculating status...
Currently Being Moderated

Dreamweaver Rollover Help

Mar 10, 2013 9:53 AM

Tags: #help #error #dreamweaver #rollover

When making a webpage, rollover images malfunction to show the rollover change over one central image, instead of the specified image. What did I do wrong?

 

Here's what I mean (ignore the whote squares, I edited out the title and any telling informationbecause this website is for a client)

 

(without rollover)

Untitled.png

 

(when rolled-over)

2.png

429 Views   11 Replies   Latest reply: DoodleSprite, Mar 10, 2013 10:54 AM
 
Replies
  • manojb05
    Currently Being Moderated
    1. manojb05,
    Mar 10, 2013 9:57 AM   in reply to DoodleSprite
    Report

    u should place same width & height of rollover image.

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    2. DoodleSprite,
    Mar 10, 2013 9:58 AM   in reply to manojb05
    Report

    I already did that. The rollover images showing up are supposed to go over the images with the same text. That's how i set it up.

     
    |
    Mark as:
  • manojb05
    Currently Being Moderated
    3. manojb05,
    Mar 10, 2013 10:00 AM   in reply to DoodleSprite
    Report

    upload ur link for checking?

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    4. DoodleSprite,
    Mar 10, 2013 10:01 AM   in reply to manojb05
    Report

    It's not hosted yet because of this glitch

     
    |
    Mark as:
  • manojb05
    Currently Being Moderated
    5. manojb05,
    Mar 10, 2013 10:04 AM   in reply to DoodleSprite
    Report

    send ur codes

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    6. DoodleSprite,
    Mar 10, 2013 10:24 AM   in reply to manojb05
    Report

    <html>

    <head>

    <title>Untitled-2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <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="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/index_ov_06.gif','images/index_ov_08 .gif','images/index_ov_09.gif','images/index_ov_10.gif','images/index_ ov_11.gif','images/index_ov_14.gif','images/index_ov_02.gif')">

    <div align="center"><!-- Save for Web Slices (Untitled-2) -->

      <table id="Table_01" width="696" height="582" border="0" cellpadding="0" cellspacing="0">

        <tr>

          <td colspan="5">

            <img src="images/Index_01.gif" width="695" height="30" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="30" alt=""></td>

          </tr>

        <tr>

          <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_02.gif',1)">< img src="images/Index_02.gif" width="295" height="84" id="Image6"></a></td>

          <td colspan="3" rowspan="2">

            <img src="images/Index_03.gif" width="400" height="100" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="84" alt=""></td>

          </tr>

        <tr>

          <td colspan="2">

            <img src="images/Index_04.gif" width="295" height="16" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="16" alt=""></td>

          </tr>

        <tr>

          <td>

            <img src="images/Index_05.gif" width="127" height="24" alt=""></td>

          <td colspan="3" rowspan="6"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_06.gif',1)">< img src="images/Index_06.gif" width="523" height="375" id="Image31"></a></td>

          <td rowspan="8">

            <img src="images/Index_07.gif" width="45" height="451" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="24" alt=""></td>

          </tr>

        <tr>

          <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_08.gif',1)">< img src="images/Index_08.gif" width="127" height="79" id="Image"></a></td>

          <td>

            <img src="images/spacer.gif" width="1" height="79" alt=""></td>

          </tr>

        <tr>

          <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_09.gif',1)">< img src="images/Index_09.gif" width="127" height="59" id="Image2"></a></td>

          <td>

            <img src="images/spacer.gif" width="1" height="59" alt=""></td>

          </tr>

        <tr>

          <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_10.gif',1)">< img src="images/Index_10.gif" width="127" height="63" id="Image3"></a></td>

          <td>

            <img src="images/spacer.gif" width="1" height="63" alt=""></td>

          </tr>

        <tr>

          <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_11.gif',1)">< img src="images/Index_11.gif" width="127" height="79" id="Image4"></a></td>

          <td>

            <img src="images/spacer.gif" width="1" height="79" alt=""></td>

          </tr>

        <tr>

          <td rowspan="3">

            <img src="images/Index_12.gif" width="127" height="147" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="71" alt=""></td>

          </tr>

        <tr>

          <td colspan="2" rowspan="2">

            <img src="images/Index_13.gif" width="380" height="76" alt=""></td>

          <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_14.gif',1)">< img src="images/Index_14.gif" width="143" height="39" id="Image5"></a></td>

          <td>

            <img src="images/spacer.gif" width="1" height="39" alt=""></td>

          </tr>

        <tr>

          <td>

            <img src="images/Index_15.gif" width="143" height="37" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="1" height="37" alt=""></td>

          </tr>

        <tr>

          <td>

            <img src="images/spacer.gif" width="127" height="1" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="168" height="1" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="212" height="1" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="143" height="1" alt=""></td>

          <td>

            <img src="images/spacer.gif" width="45" height="1" alt=""></td>

          <td></td>

          </tr>

      </table>

      <!-- End Save for Web Slices -->

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    7. DoodleSprite,
    Mar 10, 2013 10:38 AM   in reply to DoodleSprite
    Report

    Help

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    8. MurraySummers,
    Mar 10, 2013 10:43 AM   in reply to DoodleSprite
    Report

    1. The page has no doctype. It should do so to prevent browsers from rendering in Quirks mode.

    2. The page is built using methods right out of the mid-nineties. Are you sure you want to use such an antique approach?

    3. Many of your image tags are improperly formed, e.g., < img, instead of <img. There should be no space between the opening bracket and the "img".

     

    Your problem is that all of the rollovers are targeting "image31" -

     

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_08.gif',1)"><img src="images/Index_08.gif" width="127" height="79" id="Image"></a>

     

    So for example, this rollover should target the id of the image to rollover - "Image" -

     

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image','','images/index_ov_08.gif',1)"><img src="images/Index_08.gif" width="127" height="79" id="Image"></a>

     

    and this -

     

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/index_ov_09.gif',1)">< img src="images/Index_09.gif" width="127" height="59" id="Image2"></a>

     

    should target "Image2" -

     

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/index_ov_09.gif',1)"><i mg src="images/Index_09.gif" width="127" height="59" id="Image2"></a>

     

    Had you initially applied the rollovers properly to each of those images, this would not have happened.

     

    By the way, this page has no readable content and will therefore not be ranked at all by search engines.

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    9. DoodleSprite,
    Mar 10, 2013 10:51 AM   in reply to MurraySummers
    Report

    How do I give it a doctype?

     

    The "antique" layout that I am using is what the client wants. Also I'm not sure why the image tags are forming wrong. I'm not going through html and writing it, so something must be wrong with the software itself?

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    10. DoodleSprite,
    Mar 10, 2013 10:52 AM   in reply to DoodleSprite
    Report

    Also, the way I applied the rollovers to the image is the way that I had done so for previous sites. It worked that time.

     

    The client doesn't want readible content, and will be sending links to people through other means.

     
    |
    Mark as:
  • DoodleSprite
    Currently Being Moderated
    11. DoodleSprite,
    Mar 10, 2013 10:54 AM   in reply to DoodleSprite
    Report

    I fixed it. Thank you for your help

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points