jquery - 新手 : hover/rollover imageswap button using fancybox iframe

标签 jquery css fancybox dreamweaver

我正在处理的网站有问题 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>

最佳答案

不要使用 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 属性)。

关于jquery - 新手 : hover/rollover imageswap button using fancybox iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14639991/

相关文章:

css - 你如何在前面获得 CSS 插入框阴影?

jquery - 将 jquery 函数绑定(bind)到 fancybox .close() 事件

javascript - 加载完成后如何获取 fancybox 框架宽度

html - 在 Ajax 调用返回之前重定向会导致问题吗?

html中的javascript点击按钮

javascript - 通过 JavaScript 重启 CSS 动画

html - 我可以在 css 中设置一个元素相对于另一个元素的位置吗?

jquery - animate wont .stop() - 令人烦恼的简单 Jquery 问题

javascript - 伴随着名字连续播放的音乐

jquery - 使用 jquery.fancybox-media.js 时,Youtube 视频无法在 iPad 上的 fancybox 中工作