6 Replies Latest reply: Dec 31, 2009 11:46 AM by thanser RSS

    Two Swap Image Behaviors - Only One Swap Image Restore Works

    thanser Community Member

      How come?

       

      I have a button image with a two swap image behaviors applied to it - a rollover for the OVER state and one behavior for a disjointed or "remote" rollover effect.

       

      Both rollover effects work fine, but the disjointed or remote rollover effect does not return the button to it's original state.  (I've determined this by removing the second or remote swap image behavior and testing it.)

       

      Why doesn't this work?

       

      All scripts are contained within the HTML page itself; no linked scripts are used.

       

      Thanks!

        • 1. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
          pziecina CommunityMVP

          Hi

           

          Can you provide a link to a live site?

           

          Check the variables being used by the behaviors are not the same, (i.e. one behavior is not changing the others variable for the button).

           

          PZ

          • 2. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
            thanser Community Member

            Page code is attached to original post - no images, sorry.

             

            I can post this page tonight but I'm at work for a while.

             

            Thanks!

            • 3. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
              pziecina CommunityMVP

              Hi

               

              The attached file is a zip file, and I like many others will not download a zip file unless there is no alternative.

               

              PZ

              • 4. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
                thanser Community Member

                Page code:

                 

                 

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <title>index</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <script type="text/javascript">
                <!--
                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_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_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>
                <style type="text/css">
                <!--
                body {
                background-image: url(images/screens_back.gif);
                }
                -->
                </style></head>
                <body bgcolor="#FFFFFF" onLoad="MM_preloadImages('images/navigation_2_over-05.gif','images/navigation_2_over-06.g if','images/navigation_2_over-07.gif','images/navigation_over-08.gif','images/navigation_o ver-09.gif','images/navigation_over-10.gif','images/team.gif','images/forms.gif','images/e xport.gif','images/consulting.gif','images/programming.gif','images/contact.gif')">

                <table width="792" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
                <tr>
                  <td width="792" height="126" colspan="2">
                   <img id="index" src="images/index.gif" width="792" height="126" alt="" /></td>
                </tr>
                <tr>
                  <td width="792" height="34" colspan="2">
                       
                <table id="Table_01" width="792" height="34" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="34" height="34">
                   <img src="images\navigation_2.gif" width="34" height="34" alt="" /></td>
                  <td width="426" height="34">
                   <img src="images\navigation_2-02.gif" width="426" height="34" alt="" /></td>
                  <td width="105" height="34" id="title">
                   <img src="images\blank.gif" alt="" name="blank" width="105" height="34" id="blank" /></td>
                  <td width="5" height="34">
                   <img src="images\navigation_2-04.gif" width="5" height="34" alt="" /></td>
                  <td width="36" height="34">
                   <img src="images\navigation_2-05.gif" alt="" width="36" height="34" id="Image1" onMouseOver="MM_swapImage('Image1','','images/navigation_2_over-05.gif',1);MM_swapImage(' blank','','images/team.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="32" height="34">
                   <img src="images\navigation_2-06.gif" alt="" width="32" height="34" id="Image2" onMouseOver="MM_swapImage('Image2','','images/navigation_2_over-06.gif',1);MM_swapImage(' blank','','images/forms.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="31" height="34">
                   <img src="images\navigation_2-07.gif" alt="" width="31" height="34" id="Image3" onMouseOver="MM_swapImage('Image3','','images/navigation_2_over-07.gif',1);MM_swapImage(' blank','','images/export.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="33" height="34">
                   <img src="images\navigation_2-08.gif" alt="" width="33" height="34" id="Image4" onMouseOver="MM_swapImage('Image4','','images/navigation_over-08.gif',1);MM_swapImage('bl ank','','images/consulting.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="31" height="34">
                   <img src="images\navigation_2-09.gif" alt="" width="31" height="34" id="Image5" onMouseOver="MM_swapImage('Image5','','images/navigation_over-09.gif',1);MM_swapImage('bl ank','','images/programming.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="42" height="34">
                   <img src="images\navigation_2-10.gif" alt="" width="42" height="34" id="Image6" onMouseOver="MM_swapImage('Image6','','images/navigation_over-10.gif',1);MM_swapImage('bl ank','','images/contact.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
                  <td width="17" height="34">
                   <img src="images\navigation_2-11.gif" width="17" height="34" alt="" /></td>
                </tr>
                </table>

                td>
                </tr>
                <tr>
                  <td width="410" height="352">
                   <img id="index003" src="images/index-03.gif" width="410" height="352" alt="" /></td>
                  <td width="382" height="352">
                   <img id="index004" src="images/index-04.gif" width="382" height="352" alt="" /></td>
                </tr>
                <tr>
                  <td width="792" height="29" colspan="2">
                   <img id="index005" src="images/index-05.gif" width="792" height="29" alt="" /></td>
                </tr>
                </table>
                </body>
                </html>

                 

                 

                 

                 

                I can't publish the page and images until later tonight.

                 

                Thanks, as always.

                • 5. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
                  pziecina CommunityMVP

                  Hi

                   

                  A quick look at the code does point to the variables used (or not), causing a conflict.

                  The simple solution would be to use pure css for the disjointed behavior that you are using.

                  See - http://bonrouge.com/br.php?page=disjointed1.

                  or http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml

                  The second link is from Nancy's site (a respected contributor to this forum), and is the one I would recommend.

                   

                  PZ

                  • 6. Re: Two Swap Image Behaviors - Only One Swap Image Restore Works
                    thanser Community Member

                    Great, thank you.  I'll try one of these recomendations tonight.

                     

                    I wasn't sure if I could apply two behaviors on the same link/image and obviously it won't work.

                     

                    Thanks again.