Мне нужно изменить исходный URL <img> на hover.
Я пробовал это, но не буду работать:
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>
CSS
#my-img:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Любая помощь будет оценена.
Update:
Это работает только для Webkit/Google Chrome.
С помощью только html и css его невозможно изменить src изображения. Если вы замените тег img тегом div, вы можете изменить изображение, установленное в качестве фона как
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
И если вы думаете, что можете использовать код javascript, тогда вы сможете изменить src тега img ниже
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
и html be
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
Я изменил несколько изменений, связанных с Патриком Костженсом.
<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png"
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>
ДЕМО
Что вы можете сделать, это немного обмануть, установив width и height на 0, чтобы скрыть фактическое изображение и применить некоторый CSS для выполнения того, что вы хотите:
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
И добавление делает тег img размером, который вы хотите, чтобы он был (в два раза меньше вашего фактического изображения).
У меня была аналогичная проблема, но мое решение состояло в том, чтобы иметь два изображения, один скрытый (display: none) и один видимый. При наведении на окружающий диапазон исходное изображение меняется на отображение: none и другое изображение для отображения: block. (Вместо этого вы можете использовать "inline" в зависимости от ваших обстоятельств)
В этом примере используются два тега span вместо изображений, чтобы вы могли видеть результат при его запуске. К сожалению, у меня не было источников онлайн-изображений.
#onhover {
display: none;
}
#surround:hover span[id="initial"] {
display: none;
}
#surround:hover span[id="onhover"] {
display: block;
}<span id="surround">
<span id="initial">original</span>
<span id="onhover">replacement</span>
</span>У меня есть еще одно решение. Если кто-то использует AngularJs: http://jsfiddle.net/ec9gn/30/
<div ng-controller='ctrl'>
<img ng-mouseover="img='eb00eb'" ng-mouseleave="img='000'"
ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>
Javascript:
function ctrl($scope){
$scope.img= '000';
}
Нет CSS ^^.
Согласитесь с ответом AshisKumar, существует способ изменить URL-адрес изображения с помощью функции jQuery, как показано ниже:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", url1); //URL @the time of mouse over on image
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", url2); //default URL
});
});
Вот альтернативный подход с использованием чистого CSS. Идея состоит в том, чтобы включить оба изображения в разметку HTML и отобразить их соответственно или скрытые: hover
HTML
<a>
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>
CSS
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
jsfiddle: https://jsfiddle.net/m4v1onyL/
Обратите внимание, что используемые изображения имеют одинаковые размеры для правильного отображения. Кроме того, эти размеры файлов изображений довольно малы, поэтому загрузка нескольких не является проблемой в этом случае, но может быть, если вы хотите переключать отображение изображений большого размера.
Поскольку вы не можете изменить src с помощью CSS: если jQuery является для вас вариантом, проверьте этот скрипт.
$('#aks').hover(
function(){
$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
},
function(){
$(this).attr('src','http://dummyimage.com/100x100/000/fff')
}
)
В основном используется метод .hover()... для его работы требуются две функции. Когда вы входите в режим наведения и когда вы выходите из него.
Мы используем атрибут .attr (short для) для изменения атрибута src.
Стоит отметить, что вам нужна библиотека jQuery, как в скрипте, чтобы сделать эту работу.
У меня была аналогичная проблема - я хочу заменить картинку на: hover, но не могу использовать BACKGRUND-IMAGE из-за отсутствия адаптивного дизайна Bootstrap.
Если вы любите меня, только хотите изменить картинку на: hover (но не настаивать на изменении SRC для определенного тега изображения), вы можете сделать что-то вроде этого - это только CSS-решение.
HTML:
<li>
<img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
<img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>
CSS
li { position: relative; overflow: hidden; }
li img.hoverPhoto {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
}
li.hover img { /* it optional - for nicer transition effect */
opacity: 0;
-web-kit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;li
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }
Если вам нужен код, совместимый с IE7, вы можете скрыть/показать: изображение HOVER, позиционируя не непрозрачность.
Лично я бы пошел с одним из решений JavaScript/jQuery. Это не только сохраняет вашу семантику HTML (т.е. Изображение отображается как элемент img с обычным src-изображением, определенным в разметке), но если вы используете решение JS/jQuery, то вы также сможете использовать JS/jQuery для предварительной загрузки вашего изображения наведите курсор.
Предварительная загрузка изображения наведения будет означать, что, вероятно, не будет задержки загрузки, когда пользователь нависает над исходным изображением, в результате ваш сайт будет вести себя гораздо более профессионально.
Это означает, что у вас есть зависимость от JS, но крошечное меньшинство, не поддерживающее JS, вероятно, не будет слишком суетиться - и все остальные получат лучший опыт... и ваш код будет хорошим, тоже!
Вы не можете изменить атрибут img tag src с помощью CSS. Возможно использование обработчика событий Javascript onmouseover().
HTML:
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>
JavaScript:
function hover() {
document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}
Вы не можете изменить img src с помощью css. Однако вы можете использовать следующее решение css css. HTML:
<div id="asks"></div>
CSS
#asks {
width: 100px;
height: 100px;
background-image: url('http://dummyimage.com/100x100/0000/fff');
}
#asks:hover {
background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Или, если вы не хотите использовать div с фоновым изображением, вы можете использовать решение javascript/jQuery. Html:
<img id="asks" src="http://dummyimage.com/100x100/000/fff" />
JQuery
$('#asks')
.mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
.mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});
Для этого вы можете использовать ниже код
1) html
<div id = "aks">
</div>
2) css
#aks
{
width:100px;
height:100px;
background-image:url('http://dummyimage.com/100x100/000/fff');}
#aks:hover {
background-image:url('http://dummyimage.com/100x100/eb00eb/fff');
}
В старых браузерах :hover работал только с элементами <a>. Поэтому вам нужно сделать что-то как это, чтобы заставить его работать.
<style>
a#aks
{
width:100px;
height:100px;
display:block;
}
a#aks:link
{
background-image: url('http://dummyimage.com/100x100/000/fff');
}
a#aks:hover
{
background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>
<a href="#" id="aks"></a>
Следующий код работает как в Chrome, так и в Firefox
<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>
Это чистое решение CSS. Поместите видимое изображение в тег img, поместите второе изображение в качестве фона в css, затем скройте изображение при наведении.
.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but4 a:hover img{
visibility:hidden;
}
<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>
Лучший способ изменить src для изображения:
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
Смотрите демо-версию: http://www.audenaerde.org/csstricks.html#imagereplacecss
Наслаждайтесь!
Попробуйте этот код.
.card {
width: 200px;
height: 195px;
position: relative;
display: inline-block;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
width:200px;
}
.card:hover .img-top {
display: inline;
} <!DOCTYPE html>
<html lang="en">
<head>
<title>Image Change on Hover with CSS</title>
</head>
<body>
<div class="card">
<img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">
<img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">
</div>
</body>
</html>