Переход с this.src = image1.src; на onmouseover в html

0 
<img src="images/home.png" onmouseover="this.src=image1.src;" onmouseout="this.src=image0.src;" id="imgHome">

Могу ли я применить CSS-переход к этим двум изображениям, поэтому он не будет выглядеть мгновенно.

Я рассматриваю возможность делать это без этой строки и просто делать 2 отдельных изображения, но я предпочитаю это так.

  • 1
    Что ты только что спросил? Можете ли вы уточнить?
  • 0
    Прямо сейчас у меня есть 2 изображения, которые переключаются при наведении курсора мыши на него. Все это происходит мгновенно, без какого-либо перехода, но, поскольку у него есть 1 идентификатор, я не могу на самом деле установить переход на него
Показать ещё 2 комментария
Теги:

2 ответа

2

Поэтому вы хотите сделать это с помощью одного тега img. Используя свойство background css, вы можете его достичь.

HTML:

<img id="image1">

CSS:

#image1
{
    background: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
}

#image1:hover
{
    background: url("http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg");
}

img
{
    height: 250px;
    width: 500px;
    -webkit-transition: background-image 1s ease-in-out;
}

Пример JSFiddle: ссылка на образец

Поделиться
1

Переходы предназначены только для изменения свойств CSS. То, что вы делаете, это изменение пути к изображению, поэтому никаких переходов не требуется.

Например, вы можете использовать jQuery для перехода (jQ имеет некоторые простые анимации или вы можете использовать несколько более сложных библиотек).

Если вы хотите использовать CSS, вы можете попытаться сделать 2 изображения один на другой (используя абсолютное позиционирование). Затем при наведении изменяем непрозрачность нижнего значения от 1 до 0 и один вверху от 0 до 1. Если вы применяете переход к непрозрачности, он должен сделать плавный переход.

<style>
    .img{position:relative;}
    .top{position:absolute;top:0;left:0;opacity:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -transition: opacity 1s ease-in-out;
    }
    .bottom{opacity:1;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -transition: opacity 1s ease-in-out;
     }
    .top:hover{opacity:1;}
    .bottom:hover{opacity:0;}
</style>
<div class="img">
    <img class="bottom" src="http://placekitten.com/200/300?image=15">
    <img class="top" src="http://placekitten.com/200/300?image=16">
</div>

Пример: http://jsfiddle.net/5kyBX/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню