SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Change non-link image on link rollover

    I have a map of the united states with 8 locations. This map uses javascript for the rollovers (going from a green icon to purple), ok no big deal.

    I also have a picture at the bottom that I want to change with each rollover. For instance, as the person rolls over the icon for Washington, the icon goes from green to purple and at the bottom of the page the picture changes to the Washington facility, etc. (for all 8).

    I used Dreamweaver CS3's built-in roll-over javascript as you can see below.

    I just wasn't sure if I could change that picture with the same script somehow.

    Here's the javascript:

    Code JavaScript:
    <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>

    And here is an example of one of the links:

    HTML Code:
    <img id="mapWithPurple_02" src="img/map/images/mapWithPurple_02.jpg" width="14" height="211" alt="" /></td>
    <a href="washington.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WA','','img/map/images/purple.jpg',1)">
    <img src="img/map/images/green.jpg" alt="Washington Facility" name="WA" width="17" height="21" border="0"></a>
    If it matters, the map is an include on the page.

    Oh, I almost forgot, here is the image code if needed:

    HTML Code:
    <div id="facility">
        	<img src="img/WA.jpg" alt="Washington Facility" width="298" height="191" /></div>
            <div id="facility_copy">Praesent nec augue id ligula tempor molestie. Suspendisse potenti. Proin quam. Pellent esque habitant morbi tristique.
      	</div>
    Thanks in advance!

  2. #2
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Figured it out

    If anybody is interested I finally figured it out.

    Here is a tutorial that explains it perfectly (using dreamweaver CS3's rollovers):

    http://library.creativecow.net/artic...reamweaver.php

    Basically, from my code above, you add this:

    HTML Code:
    <a href="washington.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WA','','img/map/images/purple.jpg','target','','img/Washington.jpg',1)">
    You have to name the image you want to swap out "target" (or whatever you would like, they just have to match). And that's it!

    Hope that is helpful to somebody someday!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •