Можно ли изменить атрибут img src с помощью css?

Я пытаюсь изменить img src (а не фон img src) с помощью css

<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>  

#btnUp{
    cursor:pointer;
}
#btnUp:hover{
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

Ответ 1

Нет - CSS можно использовать только для изменения фоновых изображений CSS, а не содержимого HTML.

В общем, элементы UI (а не контент) должны быть визуализированы с использованием фонов CSS в любом случае. Классы подкачки могут менять фоновые изображения.

Ответ 2

Вы можете использовать:

content: url("/_layouts/images/GEARS_AN.GIF")

Ответ 3

Есть еще один способ исправить это: используя CSS-размер.

HTML:

<img class="banner" src="http://domaine.com/banner.png">

CSS:

.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://domain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

http://css-tricks.com/replace-the-image-in-an-img-with-css/

Ответ 4

Вы можете использовать CSS для: a) сделать оригинальное изображение невидимым, установив его ширину и высоту на 0 или перемещая его за пределы экрана и т.д., и b) вставить новое изображение в его:: before или:: after псевдо- элемент.

Это будет удар производительности, хотя браузер будет загружать как исходное, так и новое изображение. Но это не потребует Javascript!

Ответ 5

Вы не можете установить атрибут image src через CSS. вы можете получить, как если бы вы хотели установить использование background или background-image.

Ответ 6

вы можете попробовать что-то вроде этого

<img id="btnUp" src="empty.png" alt="btnUp" />

или

<div id="btnUp" title="btnUp"> <div/>

#btnUp{
    cursor:pointer;
    width:50px;
    height:50px;
    float:left;       
}

#btnUp{
    background-image:url('x.png')
}

#btnUp:hover{
    background-image:url('y.png')
}

Ответ 7

Вы можете использовать смесь JavaScript и CSS для достижения этой цели, но вы не можете сделать это только с помощью CSS. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" /> Вместо img вы должны указать тип файла sans file name.

function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}

Затем вы используете CSS для изменения тега img или идентификатора по своему вкусу.

Ответ 8

Вы можете установить изображение на полностью прозрачное изображение, а затем изменить фоновое изображение следующим образом:

img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}

Хотя изображения должны быть одинакового размера. :( Надеюсь это поможет!

Ответ 9

content:url('imagelinkhere');

Это работает, я проверял это