1

我有 2 张图片说theImg_enabled.gif和theImg_disabled.gif。我需要img src动态更改。我怎么能在css中做到这一点？

 <img class="changeImg" src="theImg_enabled.gif" alt="" width="16" height="16" border="0"/>

<style>
    .changeImg {
                      // I need src="theImg_enabled.gif"
    }

    .changeImg.disabled {

                      // I need src="theImg_disabled.gif"
    }
</style>
4

4 回答 4

3

您不能通过使用 CSS 来做到这一点，您需要使用客户端脚本，例如 JavaScript

document.getElementById("my_id").src="URL";

但是，如果您有一个元素的背景图像，并且您想在悬停时更改它，您当然可以编写类似的内容

div {
   background-image: url('SRC');
}

div:hover {
   background-image: url('SRC2');
}
于 2013-05-29T07:36:45.907 回答
3

你不能用 CSS 做到这一点（它可以用 JavaScript 完成）。

但是，如果图像不是作为<img>元素显示，而是作为background-image其他元素的 显示，您可以通过更改该 CSS 属性（示例）来实现。

于 2013-05-29T07:35:06.677 回答
0

您可以更改 img 的 css，但您必须使用 javascript。所以在javascript中更改img的src。

于 2013-05-29T07:41:29.313 回答
0

如果在img src中设置值，则无法使用 CSS 更改它。

解决方案 1

<img class="changeImg" />  
<style>
    .changeImg {
        border:0;
        width:16px;
        height:16px;
        background-image: url('theImg_enabled.gif');
    }
    .changeImg:hover  {
        background-image: url('theImg_selected.gif');        }
</style>

解决方案2：

    <a href="." class="changeImg" /> 
    <style> 
        .changeImg a {
            display:block;
            width:16px;
            height:16px;
            background-image: url('theImg_enabled.gif');
         }

         .changeImg a:hover {
            background-image: url('theImg_selected.gif');
         }
    </style>
于 2015-09-17T21:26:32.717 回答