Как сделать, чтобы картинка менялась при наведении не на всю картинку, а лишь на часть ее?

@sasha612 · Регистрация: 11.02.2017

Студворк — интернет-сервис помощи студентам

Пример: фото человека, если навести курсор на его глаз, картинка меняется (появляются темные очки) и активизируется ссылка, которая ведет на секретную страничку.

Сделал карту фото с помощью плагина Summer-master (выделил глаз), нашел хороший урок, как плавно менять картинку: http://shpargalkablog.ru/2012/... u-ona.html (второй пример).

Сделал стили в css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.smena { 
    position:relative; 
    display: block;
}
 
.smena img { 
    left: 0; 
    position:absolute; 
    top: 0; 
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
 
}
 
.smena img.ris1 {opacity:0;filter:alpha(opacity=0);}
.smena:hover img.ris1 {opacity:1;filter:alpha(opacity=100);}
.smena:hover img.ris2, .smena img.ris2:hover {opacity:0;filter:alpha(opacity=0);}

Но вот как совместить код ссылки "<a>" c "<area>" все не могу додуматься.

При таком коде:

HTML5
1
2
3
<div align="right">
<a class="smena" href="[[~62]]"><img class="ris1" src="/pic/foto2.jpg" /><img class="ris2" src="/pic/foto1.jpg" /></a>
</div>

меняется фото при наведении на все фото.

А при таком коде:

HTML5
1
2
3
4
<div align="right"><img src="/pic/foto1.jpg" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="109, 80, 115, 77, 121, 77, 127, 80, 131, 83, 122, 83, 116, 84" href="[[~62]]" title="007" />
</map></div>

При наведении на глаз человека на фото курсор меняется на ладошку, т.е. появляется ссылка, ведущая на другую страницу.

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

@mrtoxas · 23.02.2017, 12:39

Принцип такой:

HTML5
1
2
3
4
<img id="image" alt="img_fjords.jpg" src="https://www.w3schools.com/css/img_fjords.jpg" usemap="#myMap" width="600" height="400" />
<map name="myMap" id="myMap">
        <area href="https://www.cyberforum.ru/html/thread1925731.html" id="personage" shape="circle" coords="236,164,30" class="" />
</map>

JavaScript
1
2
3
4
5
var area = document.getElementById('personage'),
  image = document.getElementById('image');
area.addEventListener('mouseover', function(){
  image.src="https://www.cyberforum.ru/images/cyberforum_logo.png";
})

Наведите на персонажа.

@sasha612 · 23.02.2017, 13:15 **[ТС]**

А без java, только средствами css и html, не обойтись?

@mrtoxas · 23.02.2017, 13:25

sasha612, Не обойтись. А java тут вообще не при делах.

@sasha612 · 24.02.2017, 05:28 **[ТС]**

Спасибо, заработало!
На случай, если вдруг кому понадобится, сделал так:
В head написал:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function() {
        $('.map').maphilight();
var area = document.getElementById('personage'),
  image = document.getElementById('image');
area.addEventListener('mouseover', function(){
  image.src="/pic/ris2.jpg";
});
});
</script>

На странице же код:

HTML5
1
2
3
4
<img id="image" alt="ris1.jpg" src="/pic/ris1.jpg" usemap="#myMap" width="200" height="300" />
<map name="myMap" id="myMap">
        <area href="[[~62]]" id="personage" shape="poly" coords="109, 80, 115, 77, 121, 77, 127, 80, 131, 83, 122, 83, 116, 84" class="" />
</map>

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@sasha612 0 / 0 / 0 Регистрация: 11.02.2017 Сообщений: 26
	23.02.2017, 13:15 [ТС]
	А без java, только средствами css и html, не обойтись? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.02.2017, 13:25
	sasha612, Не обойтись. А java тут вообще не при делах. 0

Как сделать, чтобы картинка менялась при наведении не на всю картинку, а лишь на часть ее?

Решение