Question

所以我在Photoshop中制作了一些.png，并通过插入＆gt;制作翻转图像。图像对象＆gt;翻转图像。他们完美地工作了几个星期，但所有突然停止工作，翻转效果和附加到该社交媒体网址的实际超链接。当您使用“翻转图像”功能时，它会将<body>变为：

<body onload="MM_preloadImages('images/facebook2.png','images/instagram2.png','images/twitter2.png','images/tumblr2.png','images/threadflip2.png','images/pintrest2.png','images/laceandlattes_title2.png')">

每个单独图标的HTML字符串在div标签中看起来像这样：

<a href="https://www.facebook.com/ssaammrr" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook2.png',1)"><img src="images/facebook.png" width="30" height="30" id="facebook" /></a>

对我来说似乎是对的，但如果有人可能知道为什么会失败，请告诉我

Answer 1

我很遗憾，2012年4月发布的Dreamweaver CS6仍然使用JavaScript来交换图像。只需使用CSS和一些额外的标记，这就容易得多，也更有效率。

我正在one of my earlier answers another question上翻译这个答案（这与您的相关），以展示如何使用CSS执行此操作的示例。

假设您有以下标记：

<a class="rollover-container">
    <img class="rollover" src="images/facebook.png"/>
    <img class="rollover-swap" src="images/facebook2.png"/>
</a>

对于翻转效果，我已经在元素上有一些类。包含<a>元素的元素包含两个<img>元素。这样您就可以点击图片，无论图片处于什么状态并链接到所需的页面（您可以在href上添加<a>以获取您想去的地方。然后，您可以使用您想要的任何图像填充src s上的<img>属性（默认显示.rollover，隐藏.rollover-swap，但在悬停时换入）。

使用此标记，您可以包含以下CSS以仅使用CSS实现图像交换效果：

/* Initially hide the hover image */
.rollover-swap {
    display: none;
}

/* When hovering over the <a> container, hide the default image */
.rollover-container:hover .rollover {
    display: none;
}

/* When hovering over the <a> container, show the hover image */
.rollover-container:hover .rollover-swap {
    display: inline;
}

你可以看到这个here的JSFiddle演示（带有一些额外但无害的标记，因为这个演示最初是针对另一个问题的。）

此方法不需要任何JavaScript，因此可以将其删除（即从元素中删除onload，onmouseout和onmouseover属性。）

Answer 2

您的代码在Dreamweaver中工作正常，为了进一步解决问题我会确保您的头标记中包含以下js函数：

<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>

翻转图像不起作用 - Dreamweaver CS6

2 个答案: