Skip to main content
G
graphicgal
Participating Frequently
July 1, 2020
Question

Swap an image upon rollover

  • July 1, 2020
  • 5 replies
  • 1043 views

On an old web site I was able to rollover a thumbnail and make a "base" image swap out to a larger version of the thumbnail (art site). I want to do this again on the current DW, but I can't figure out how to do it. I tried copying the code from the old site and replacing the names, but it still doesn't work. Can anyone help me with the code for this? I'll copy the existing code here in case that helps. Thanks so much for your attention to this request.

<td width="75"><img src="images/pmb1-tn.gif" alt="pm1" name="pm1" width="75" height="75" id="pm1" onmouseover="MM_swapImage('base','','images/pmb1.gif',1)" onmouseout="MM_swapImgRestore()" /></td>

Also, is there a link to a DreamWeaver manual? I'm having trouble finding one. Thanks again.

    This topic has been closed for replies.

    5 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 2, 2020

    What Ben said. 

     

    Look for a responsive Lightbox or Modal window viewer that provides a good experience on ALL devices, especially touch screens which the majority of people use now.

     

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      July 2, 2020

      Ugh - jQuery lightbox galleries, so yesterday!

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 2, 2020

      Osgood,

      MM Rollover scripts are a thowback to 2004.  How much more "yesterday" can one get?

       

      Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      July 2, 2020

      This depends on what it is you are trying to achieve.

       

      If you have just the one image per page you are swapping then you have already been given some options to explore in the other responses to your post. If you have a gallery of art thumbnails and would like to show a larger version of the thumbnail image then maybe a better solution would be an image gallery which opens a modal overlay window ontop of the tumbnails.

       

      I cant really see from your code how your page is set up but it appears the larger image will just displace the smaller image which is probably not a good solution, plus I would NOT use 'onmouseover', use 'onclick' as that will be compatible with non-desktop devices.

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      July 2, 2020

      If that's all of the code you copied over from the old page, the reason it won't work would be because you're missing the <script> from the <head> section that makes the code above "do something".

       

      You'll have a <script> tag in the <head> of the old page with lots of "MM_..." throughout (DW's behavior script style). That entire script tag would also need to be copied over to the new page or the code you've posted above can't do anything.

        JoseAlvira
        JoseAlvira
        Known Participant
        July 2, 2020

        Here's a simple HTML file that does what you want to do using simple javascript&colon;

        https://www.teoria.com/jra/small-large/image-roll.html

        Follows the HTML/JS source. Just edit the names of the images names/url to yours or download everything and try it out. Be sure NOT to specify image size. If you want to specify image size, then you should load both images and make one visible and the other invisible to change from one image to the other. jQuery would make things much easier but you can also do it using the document object. Hope this helps!

         

        <!doctype html>
        <html>
        <head>
        <meta charset="UTF-8">
        <title>Image rollover</title>
        <script>

        function goBig() {
        var i = document.getElementById('img');
        i.src='large.png';
        }

         

        function goSmall() {
        var i = document.getElementById('img');
        i.src='small.png';
        }
        </script>
        </head>

        <body>
        <img id="img" src="small.png" onMouseOver="goBig()" onMouseOut="goSmall()">
        </body>
        </html>

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        July 2, 2020

        Instead of the old method that use Javascript to animate/rollover images, the modern method is to use CSS. For more info, Google the subject or see https://www.w3schools.com/css/css3_images.asp

         

        For Dreamweaver tutorials: https://helpx.adobe.com/dreamweaver/how-to/what-is-dreamweaver.html#

         

         

         

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices