X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Вывод изображения при наведения на часть картинки по area
androv77
androv77
Topic Starter сообщение 15.4.2016, 17:05; Ответить: androv77
Сообщение #1


Имеется рисунок разбитый на области, вот один пример
<area shape="poly" coords="473,83,482,169,504,226,532,277,543,298,484,315,426,314,412,338,363,363,296,
375,241,361,200,328,163,290,135,272,98,238,46,193,6,186,12,145,49,107,61,70,87,45
,95,2,473,83" title="Сектор 1" *href="javascript:;" alt="" onmouseout="MM_swapImage('genplan222','','/genplan222.png',1);" onmouseover="MM_swapImage('genplan222','','/genplan222_s2.png',1);">

Нужно что бы при наведении на эту область выводилась картинка или блок с нужной информацией.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
YroKPROG
YroKPROG
сообщение 16.7.2016, 17:32; Ответить: YroKPROG
Сообщение #2


Я не гонюсь за выгодой.
HTML: <!doctype>
<html>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css">
<body>
<div id="tri-d-wrapper">
<figure id="img-wrapper">
<img src="1.jpg" alt="Preview Image">
<figcaption>
<h2 class="title">Powered by YroKPROG</h2>
<div class="bottom-detail">
<p>Пример Обьемного меню , или выпад от YroKPROG</p>
<ul class="social-icons">
<li><a class="fa fa-facebook" href="#"></a></li>
<li><a class="fa fa-dribbble" href="#"></a></li>
<li><a class="fa fa-twitter" href="#"></a></li>
<li><a class="fa fa-behance" href="#"></a></li>
</ul>
</div>
</figcaption>
</figure>
</div>
</body>

</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

* {
font-family: 'Roboto', sans-serif;
}

body {
background: #3498db;
}

#tri-d-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
position: absolute;
height: 100%;
width: 100%;
}

#img-wrapper {
width: 350px;
background: #3498db;
margin: 0;
position: absolute;
cursor: pointer;
border-radius: 3px;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -131px;
-webkit-transform: rotateX(30deg) scale(.65);
transform: rotateX(30deg) scale(.65);
-webkit-transition: .3s all ease;
transition: .3s all ease;
box-shadow: 0 15px 20px 5px rgba(0,0,0,.2);
}

#img-wrapper:hover {
-webkit-transform: rotateX(0deg) scale(1);
transform: rotateX(0deg) scale(1);
box-shadow: none;
}

#img-wrapper img {
width: 100%;
margin: 0;
position: relative;
display: block;
-webkit-transition: .3s all ease;
transition: .3s all ease;
}

#img-wrapper:hover img {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

#img-wrapper:hover figcaption {
background: rgba(0,0,0,.75);
}

#img-wrapper:hover figcaption h2 {
opacity: 1;
padding-left: 20px;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}

Должно работать так, если я конечно тебя понял:rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Sbitcoin.ru – Ввод, Вывод, Обмен: Qiwi, YD, Btc, Btc-e, PM, Cash IN, PR24, MG, WU, Нал (RU, UA).
10 sbitcoinru 7131 18.6.2024, 19:07
автор: Sbitcoin
Открытая тема (нет новых ответов) Судьба денег при блокировке акка Фейсбук и Googe
4 Nekit 1178 5.6.2024, 23:00
автор: Liudmila
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
172 metvekot 29560 12.5.2024, 22:30
автор: KIzilcash
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
7 stu999 1830 31.3.2024, 11:19
автор: stu999
Горячая тема (нет новых ответов) Ручной обмен, ввод/вывод электронных валют | ЮMoney, WMZ, Крипта, Приват, Монобанк | Низкие комиссии, минимальные суммы сделок
быстро, удобно, по доступному курсу
200 Sostavitel 99056 11.2.2024, 21:07
автор: Wolfhound


 



RSS Текстовая версия Сейчас: 20.6.2024, 4:13
Дизайн