0

我的网站有问题 我正在使用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开始| 鸡尾酒时间和招待会

 

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

1 回答 1

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>

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

于 2013-02-01T05:12:01.933 回答