0

我想创建一个翻转图像，在单击后更改为另一个图像。例如，当按钮没有被点击时，它显示图像 1：

将鼠标悬停在其上方时，它将变为图像 2：

然后，在用户单击按钮后，它将变为图像 3 并保持这种状态，直到页面刷新：

此外，当用户按下按钮时，它会在新选项卡中打开链接。

这是我到目前为止所拥有的： <img src="image/b1n.png" alt="Button 1" id="Image2" height="53" width="281">

4

4 回答 4

1

向按钮添加一个类，然后执行以下操作： 对于正常状态。

button.class{
    background-image: url("images/image.jpg");
}

对于悬停：

button.class:hover{
    background-image: url("images/image2.jpg");
}

对于主动：

button.class:active{
    background-image: url("images/image3.jpg");
}

请注意，活动伪类对某些 IE 版本不友好。

于 2013-08-02T16:22:13.690 回答
1

使用 CSS 进行悬停：

.button {
    background: #2c82b9;
}
.button:hover {
    background: #359cdd;
}
.button.clicked, .button.clicked:hover {
    background: #aa0000;
}

然后，使用 JavaScript 进行点击：

<div class="button" alt="Button 1" id="Image2" onClick="this.className = this.className + ' clicked';"></div>

看这个演示。

:active不应使用伪类，因为它的实现在不同的浏览器中有所不同。

于 2013-08-02T16:24:35.423 回答
0

将样式表添加到您的页面。其中有类似的东西：

.roll-over { background-image:url('image.png'); }
.roll-over:hover { background-image:url('image2.png'); }
.current { background-image:url('image3.png'); }

将当前应用到当前页面链接，并将翻转应用到其他链接。可能需要一些工作，但这是一般的想法

于 2013-08-02T16:22:08.043 回答
0

使用 CSS 创建悬停效果

 **CSS**
 #Image1:hover { background-image: url("dir/image2.jpg"); }

然后使用简单的 JavaScript 代码来处理点击事件以更改为图像 3

  **HTML**
 <img src="image/b1n.png" alt="Button 1" id="Image1" height="53" width="281" onclick="changeImage()">

 **JavaScript**
 function changeImage() {
      document.getElementById("Image1").src = "dir/image3.jpg";
 }
于 2013-08-02T16:35:14.693 回答