Question

我的网站有一个问题我正在处理kirandarren.com我在网站上的图标我希望在悬停时进行某种图像交换或翻转以显示它的按钮。起初我尝试使用Dreamweaver进行翻转图像交换，它工作得很好，但是一旦我实现了fancybox，它似乎与翻转图像交换冲突。有任何想法吗？

任何正确方向的帮助将不胜感激！我是新手，只是想让我们的婚礼网站完成任何帮助，在正确的方向将不胜感激！提前谢谢！我希望我在下面附上正确的代码。

<body onload="MM_preloadImages('images/our_story_rollover.png','images/directions_rollover.png','images/bridal_party_rollover.png','images/chicago_spots_rollover.png','images/registry_rollover.png')">

加入我们于2013年10月13日晚上5点

仪式将于5:30开始 鸡尾酒时间＆amp;接待处

<p align="center">

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/58303552"><img src="images/our_story_off.png" name="our_story" width="206" height="210" hspace="14" vspace="0" border="0" id="our_story" /></a>

Answer 1

不要使用iframe，因为它总会与各种浏览器冲突，并且可能会产生比解决方案更多的问题。

正如您所说，您想要显示图像是按钮，所以只是让用户知道这是一个链接或按钮，我建议在IMG标记中使用onmouseover和onmouseout。并根据需要使用自定义jQuery或javascript来提供它和动画或转换。例如

<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}

function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

</body>
</html>

提示：创建一个更好看的按钮，USE box-shadow（您将创建的脚本中的css属性）。

新手：使用fancybox iframe悬停/翻转imageswap按钮

1 个答案: