gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:20:32 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com