Question

寻找智慧：

我尝试使用html，javascript和jquery来创建翻转图像按钮。无论我如何创建翻转按钮，当我添加一个href fancybox iframe弹出链接时，它会打开整个网页到该链接，而不是像它应该创建一个弹出窗口。

如果我只有一个没有翻转的图像按钮，弹出窗口就可以了。有什么我需要添加到fancybox javascript或fancybox与翻转不兼容？

            <!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>TESTING</title>

              <!-- rollover images using javascript -->

            <script language="javascript" type="text/javascript">

            normal_image = new Image();
            normal_image.src = "images/contact_us_red.png";

            mouseover_image = new Image();
            mouseover_image.src = "images/contact_us_black.png";


            <!-- repeat the 4 lines above for any subsequent images. -->

            function swap(){
            if (document.images){
            for (var x=0;
            x<swap.arguments.length;
            x+=2) {
            document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
            }
            }
            }
            </script>


            <!-- JAVASCRIPT FOR FANCYBOX -->
             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
                <script>
                    !window.jQuery && document.write('<script src="popup/jquery-1.4.3.min.js"><\/script>');
                </script>
                <script type="text/javascript" src="popup/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
                <script type="text/javascript" src="popup/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
                <link rel="stylesheet" type="text/css" href="popup/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
                <link rel="stylesheet" href="style.css" />
                <script type="text/javascript">

                $(document).ready(function() {
                     $("img.rollover").hover(
                      function() { this.src = this.src.replace("_off", "_on");
                      },
                      function() { this.src = this.src.replace("_on", "_off");

                      });
                      }); 


            $(document).ready(function() {
                        /*
                        *   Examples - images
                        */

                        $("a#example1").fancybox();

                        $("a#example2").fancybox({
                            'overlayShow'   : false,
                            'transitionIn'  : 'elastic',
                            'transitionOut' : 'elastic'
                        });

                        $("a#example3").fancybox({
                            'transitionIn'  : 'none',
                            'transitionOut' : 'none'    
                        });

                        $("a#example4").fancybox({
                            'opacity'       : true,
                            'overlayShow'   : false,
                            'transitionIn'  : 'elastic',
                            'transitionOut' : 'none'
                        });

                        $("a#example5").fancybox();

                        $("a#example6").fancybox({
                            'titlePosition'     : 'outside',
                            'overlayColor'      : '#000',
                            'overlayOpacity'    : 0.9
                        });

                        $("a#example7").fancybox({
                            'titlePosition' : 'inside'
                        });

                        $("a#example8").fancybox({
                            'titlePosition' : 'over'
                        });

                        $("a[rel=example_group]").fancybox({
                            'transitionIn'      : 'none',
                            'transitionOut'     : 'none',
                            'titlePosition'     : 'over',
                            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                            }
                        });

                        /*
                        *   Examples - various
                        */

                        $("#various1").fancybox({
                            'titlePosition'     : 'inside',
                            'transitionIn'      : 'none',
                            'transitionOut'     : 'none'
                        });

                        $("#various2").fancybox();

                        $("#various3").fancybox({
                            'width'             : '75%',
                            'height'            : '75%',
                            'autoScale'         : false,
                            'transitionIn'      : 'none',
                            'transitionOut'     : 'none',
                            'type'              : 'iframe'

                        });

                        $("#various4").fancybox({
                            'padding'           : 0,
                            'autoScale'         : false,
                            'transitionIn'      : 'none',
                            'transitionOut'     : 'none'
                        });
                    });
            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 onload="MM_preloadImages('images/contact_us_red.png')">
                <!-- THIS LINK WORKS. -->
            <p><a id="various3" href="Contact/templates/form.tpl.html"><img src="images/contact_us_red.png" width="108" height="36" /></a>

            </p>
            <p>&nbsp;</p>


            <!-- HERE IS THE JAVA LINK THAT WONT WORK -->
            <a id="various3" href="Contact/templates/form.tpl.html" onMouseOver="swap('name_of_img','normal_image')" onMouseOut="swap('name_of_img','mouseover_image')"><img name="name_of_img" src="images/contact_us_black.png" border="0"></a>

            <p>&nbsp;</p>

            <!-- HERE IS THE HTML LINK THAT WONT WORK -->
            <a id="various3" href="Contact/templates/form.tpl.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/contact_us_red.png',1)"><img src="images/contact_us_black.png" name="Image3" width="108" height="36" border="0" id="Image3" /></a>

            </body>
            </html>

Answer 1

只需使用热点和行为即可。如果您使用Dreamweaver，您的生活将变得更容易。

翻转图像按钮Fancybox iFrame？

1 个答案: