0

现在我正在使用 css 创建一个 onclick 图像更改。问题出在我的网站上，当我使用它时，图像加载会暂停。我想知道是否有一个 javascript 或 jquery 替代方案在我单击它时不需要加载图像，在我单击它直到它加载后，它会在后面几秒钟内变成白色。

现在这就是我正在使用的。示例在这里

<input type="submit" class="create" style="font: 24px Arial, Helvetica, sans-serif; width: 681px;" value="CREATE ">
​
.create {
    margin: 0 auto;
    height: 62px;
    width: 681px;
    color:#FFF;
    background-image:url(http://i.imgur.com/tWGcy.jpg);
    outline: 0;
    border: 0;
    margin-top: 7px;
    font-family: Arial, Helvetica, sans-serif;
}
.create:active {
    margin: 0 auto;
    height: 62px;
    width: 681px;
    color:#FFF;
    background-image:url(http://i.imgur.com/r9d3C.jpg);
    outline: 0;
    border: 0;
    margin-top: 7px;
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
}​
4

3 回答 3

2

不需要任何JS。您可以为此使用css sprites，这是一个更好的解决方案。

阅读这篇文章了解更多http://css-tricks.com/css-sprites/

于 2012-07-06T06:36:40.820 回答
1

有很多方法可以解决您的问题，

您的情况主张使用 css 图像精灵的解决方案。

在同一张图片中使用悬停和普通背景绘制图像，然后在悬停时仅更改背景位置，这样就不需要更改新图像。

css-tricks 教程你的简单精灵不需要所有这些东西，但它值得一读

另一种解决方案是使用 javascript 预加载图像。

var img = new Image();
img.src = "http://i.imgur.com/r9d3C.jpg";

使用图像精灵看起来更清洁的解决方案，但并不适用于所有条件。

于 2012-07-06T06:40:33.127 回答
1

您需要做的是将这些图像拼接成一个大图像，然后像这样更改左侧或顶部：DEMO

CSS：

button {
   background:url(http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png); 
   border:0;
   padding:0;   
   width:310px;
   height:80px;
}

button:hover {
   background-position:0 -70px;   
}

button:active {
   background-position:0 -140px;   
}

HTML：

<button></button>

​​​这是一种叫做精灵的技术，希望这有助于 -ck

于 2012-07-06T06:40:42.970 回答