javascript - 单击时更改按钮图像并在 iframe 中显示结果，单击下一个按钮时，将原始按钮返回到第一个按钮

Question

我有多个按钮(作为菜单)作为索引页面上的图像。我的所有按钮上都有翻转图像。 单击后，结果显示在页面中间的 iframe 上。但我还希望该按钮发生变化并保持变化，直到单击下一个菜单按钮。

单按钮示例:

<a href="faq.html" target="show" onmouseover="MM_swapImage('faq','','images/faq_y.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/faq_b.jpg" alt="faq" name="faq" width="70" height="70" id="faq" /></a>

Answer 1

有很多更好的方法可以实现您想要做的事情。我认为您正在使用 Dreamweaver。一般来说，Dreamweaver 附带的脚本非常糟糕且过时。

例如，不使用 Dreamweaver 附带的“翻转”图像更改功能。你可以只使用计划旧的CSS。

例如，如果您创建的图像是按钮宽度的两倍，并并排添加按钮的两种状态。通过这样做，您现在可以使用 css 将按钮的可见区域从一侧移动到另一侧，或者将其从“正常状态”移动到“悬停状态”

CSS 示例:

//按钮正常。因为我们指定了宽度和高度就够了
//将显示我们的背景。例如我们的“正常状态”
a.myButton {
    显示: block ；
    宽度:200px；
    高度:80px；
    内边距:10px；
    光标:指针；
    背景:url(images/my-button-sprite.png) 左上角无重复；
}

//这会将按钮切换到右侧(或“上方状态”)
a:hover.myButton, a.myButton.active {
    背景:url(images/my-button-sprite.png) 右上角无重复；
}

与保持悬停状态直到单击另一个菜单项有关。

在 Google 上搜索“jQuery”。它是一组使用 Javascript 的工具和插件。 JavaScript 当前正在为您交换图像。

有 1,000 个关于如何使用 css 和 jQuery 来获得您想要的结果的教程。

查看这些资源:

http://www.w3schools.com/css/ << CSS 是你的 friend .. 学习它..

http://api.jquery.com/toggleClass/ <<这将允许您(使用我提供的代码)做您想做的事情。

但我不会告诉你具体如何做..因为这会破坏一半的乐趣!