Как сделать круглое изменение изображения при наведении?

У меня есть круглое изображение, которое мне удалось найти, как сопоставить в предыдущем вопросе. Теперь мне интересно, как я могу изменить это изображение, когда я навожу на него курсор. Он имеет нанесенную на карту область. У меня проблема с этим.

HTML-версия без CSS, где я считаю, что «usemap="#imagechange"" вызывает проблему:

 <img src="1.png" 
     onmouseover="this.src='2.png'" 
     onmouseout="this.src='1.png'" 
     width="100" height="100" 
     alt="usemap" border="0" 
     usemap="#imagechange"/>
 <map name="imagechange">
     <area shape="circle" coords="50,50,50" href="image.com"  />
 </map>

Это работает только тогда, когда я нахожусь внутри области (= площадь 100x100 МИНУС области круга). У меня также есть версия с css, которая вообще не работает.

HTML-версия с CSS:

div class="imagechange" > 
<img src='foundation/images/Twitter.png' 
          title="Map Image" 
          alt="usemap" border="0"
          usemap="#imagechange"/> 
<map name="imagechange">
    <area shape="circle" coords="50,50,50" href="index.html"  />
</map>

CSS

      .imagechange {
 width: 100px;
 height:100px;
 display:block;
 overflow:hidden;
 border-radius:50px;
 -webkit-border-radius:50px;
}

.imagechange:hover {
 border-radius:0px;
 -webkit-border-radius:0px;
}

html css imagemap
person Datacrawler    schedule 13.10.2013    source источник
comment
Я хочу добавить, что все приведенные выше источники URL-адресов исправлены в моем исходном коде. Это не проблема.   -  person Datacrawler    schedule 13.10.2013

Ответы (1)


arrow_upward
1
arrow_downward

Использовать это:

<a href='http://www.google.com/'>
    <img src='1.png' onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" style='border:0px; border-radius:999px; -webkit-border-radius:999px;'/>
</a>
person Mobo    schedule 13.10.2013
comment
Я редактирую свой код. Проверь сейчас. Мой сценарий, как у вас, второй версии кода - person Mobo; 13.10.2013
comment
Я сделал это. Я нигде не вижу в коде второе изображение, которое будет отображаться при наведении курсора мыши. Должен ли я помещать фон в код CSS? - person Datacrawler; 13.10.2013
comment
Отредактируйте свой вопрос и скажите, какова ваша область карты? Также скажите, когда вы хотите, чтобы он был круглым. Я имею в виду по умолчанию или при наведении? - person Mobo; 13.10.2013
comment
Ответь в своем вопросе! Тогда в чем твоя проблема? - person Mobo; 13.10.2013
comment
Таким образом, мне не нужно отображение. Но все же это не работает. Я хочу, чтобы изображение менялось, когда я наводил указатель мыши на кружок здесь: ссылка и в то же время область, на которую я навел курсор, будет областью ссылок. - person Datacrawler; 13.10.2013