6 Replies Latest reply on Jul 21, 2013 2:56 PM by LeeHeinemann

    Last rollover image inserted in a row displaces "image 2" to another spot when hovered over

    LeeHeinemann

      I am in DW CS6 building a site where each element is insterted into a new AP DIV held within a main centered AP DIV wrapper. I know that this may not be the most efficient or current way to build a site, but I need to have many layers of image and text, and this method works for me.

       

      I have a row of 5 rollover images that link to the different sections of the site on my main page. Each is inserted in an AP DIV within the main wrapper. Screen shot 2013-07-21 at 1.48.10 PM.png

      When I save the site and preview in a browser, whichever rollover I inserted last displaces the second image to the far left AP DIV when hovered over. I have tried deleting and re-entering each rollover, and whichever is the last to be placed does this. The image below shows what happens when I hover the cursor over the "Whoop Dee Doo" rollover link. All the other rollovers work.

      Screen shot 2013-07-21 at 1.47.36 PM.png

      Here is the CSS code for the rollover section of this page:

       

      <body onload="MM_preloadImages('../buttons/about2.png','../buttons/styling2.png','../buttons/pr ojects2.png','../buttons/other2.png','../buttons/wdd2.png')">

      <center>

      </center>

      <div id="wrapper">

        <div id="mainimage"><img src="../indexsmaller.png" width="928" height="650" /></div>

        <div id="apDiv6"><img src="../name.png" width="853" height="252" /></div>

        <div id="apDiv8"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../buttons/about2.png',1)"><img src="../buttons/about1.png" width="130" height="215" id="Image4" /></a></div>

        <div id="apDiv11"><a href="styling.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../buttons/styling2.png',1)"><img src="../buttons/styling1.png" width="130" height="210" id="Image5" /></a></div>

        <div id="apDiv13"><a href="projects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/projects2.png',1)"><img src="../buttons/projects1.png" width="130" height="195" id="Image7" /></a></div>

        <div id="apDiv17"><a href="other.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../buttons/other2.png',1)"><img src="../buttons/other1.png" width="130" height="195" id="Image6" /></a></div>

        <div id="apDiv23"><a href="wdd.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/wdd2.png',1)"><img src="../buttons/wdd1.png" width="130" height="211" id="Image" /></a></div>

      </div>