Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/72: Рейтинг темы: голосов - 72, средняя оценка - 4.78
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
1

Выделение при наведении в карте изображения

27.12.2012, 23:42. Показов 14628. Ответов 11
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Столкнулся с такой проблемой. Нужно было сделать карту изображения. Сделал в imageready. Теперь столкнулся с другой проблемой. Мне нужно сделать, чтобы при наведении на фрагмент изображения, являющийся ссылкой, он выделялся как нибудь, в рамку и т.д. Ну или как нибудь еще, красивый эффект какой нибудь. Чтобы было понятно, что там ссылка. Не знаю как это сделать. Был бы признателен, за помощь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 27.12.2012, 23:42
Ответы с готовыми решениями:

Выделение при наведении в карте изображения
А как сделать вот такую штуку? Учитывая то что картинка занимает всю ширину. То есть размер ее...

Выделение при наведении
Всем привет. Сори что только зарегался и сразу с вопросами, но нужна помощь. Дело в том, что...

Выделение картинки при наведении курсора
Я создаю игру (пытаюсь). Решил реализовать выделение картинки при наведении курсора. Картинка...

Выделение текста при наведении курсора
Здравствуйте. Я не совсем уверен, что пишу на нужную ветку форума (не уверен, что это js),...

11
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
28.12.2012, 07:24 2
Ну например, нарисовать гиф-картинку-контур-бордюр области на которую наехала мышь и показывать эту картинку в момент наезда.
Или поиграть с прозрачностью, сама область полностью прозрачная, а вокруг небольшой полупрозрачный контур, или наоборот.
0
9 / 9 / 0
Регистрация: 14.12.2012
Сообщений: 138
Записей в блоге: 1
28.12.2012, 14:05 3
Цитата Сообщение от Wildrunner Посмотреть сообщение
1
#(id меню или класс) a:hower{background: url('сыллка');}
Вот так вставляй картинку а что бы рамка была или что то подобное возьми основную картинку и сделай в фш рамку или обводку или белым цветом нарисуй что то где то для подсветки+ прозрачность 50% и все в код вставляй и будет работать.
1
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
28.12.2012, 15:22  [ТС] 4
Цитата Сообщение от Wildrunner Посмотреть сообщение
Вот так вставляй картинку а что бы рамка была или что то подобное возьми основную картинку и сделай в фш рамку или обводку или белым цветом нарисуй что то где то для подсветки+ прозрачность 50% и все в код вставляй и будет работать.
Так, если правильно понял. Беру картинку. И все куски, которые мне нужно, чтобы выделялись, в рамку беру???

А в код, что именно вставлять?? Ну ссылка, это понятно, а вот остальное?. Не особо еще в этом разобрался, поэтому пока не особо это представляю

Вот код карты. Может по нему опишите?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<title>untitled копия</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (untitled копия.jpg) -->
<img src="http://s017.***********/i444/1212/13/eb52209196ba.jpg" width="489" height="626" border="0" alt="" usemap="#untitled_______Map">
<map name="untitled_______Map">
<area shape="rect" alt="Колено" coords="259,380,402,443" href="http://doctorgeorge.besaba.com/?page_id=132" target="_blank">
<area shape="rect" alt="Плечо" coords="259,108,407,166" href="http://doctorgeorge.besaba.com/?page_id=130" target="_blank">
</map>
<!-- End ImageReady Slices -->
</body>
</html>
0
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
29.12.2012, 22:28  [ТС] 5
Помощи не будет?)))
0
9 / 9 / 0
Регистрация: 14.12.2012
Сообщений: 138
Записей в блоге: 1
30.12.2012, 01:13 6
Цитата Сообщение от Wolfgur Посмотреть сообщение
Помощи не будет?)))
Все будет просто времени небыло.

Добавлено через 5 минут
Я изначально не понял что ты хочешь сделать но сейчас попробую помочь...
то что я написал надо вставлять в css код.
Я бы прорисовал картинкой каждое свечение потом просто выставил их в нужных местах и потом уже работал со ссылками...
а так извиняй помочь не могу больше нечем...
1
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
30.12.2012, 18:49  [ТС] 7
Прорисовываю каждую рамку, или мне нужно изображение на куски разбить, а потом работать?
0
34 / 34 / 5
Регистрация: 16.11.2012
Сообщений: 138
31.12.2012, 15:56 8
Wolfgur, может картинку покажешь?
Можно сделать спрайтами, например или попробовать применить эффекты
0
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
01.01.2013, 01:16  [ТС] 9
Фон скорее всего будет меняться правда, но, думаю, это не важно
Миниатюры
Выделение при наведении в карте изображения  
0
34 / 34 / 5
Регистрация: 16.11.2012
Сообщений: 138
01.01.2013, 09:56 10
У меня возникла еще идея.
Собственно я бы попробовал 2 варианта, которые я сам, к сожалению, плохо знаю, но хочу научиться.
Первый: это спрайты. Довольно новая технология, позволяет как раз при наведении мышки показывать другое изображение, которое можно сделать с эффектом.
Второе: использование DIV-ов и прописывать на hover другую картинку или эффект.
Или может совместить эти два метода.

Фон вообще можно сделать прозрачным, а под картинки подставлять что угодно
1
3 / 3 / 0
Регистрация: 08.02.2012
Сообщений: 32
01.01.2013, 13:10  [ТС] 11
Надо будет тогда в интернете смотреть подробности, как это делать
0
17 / 17 / 0
Регистрация: 31.12.2012
Сообщений: 68
01.01.2013, 13:46 12
Цитата Сообщение от Wolfgur Посмотреть сообщение
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<title>untitled копия</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (untitled копия.jpg) -->
<img src="http://s017.***********/i444/1212/13/eb52209196ba.jpg" width="489" height="626" border="0" alt="" usemap="#untitled_______Map">
<map name="untitled_______Map">
<area shape="rect" alt="Колено" coords="259,380,402,443" href="http://doctorgeorge.besaba.com/?page_id=132" target="_blank">
<area shape="rect" alt="Плечо" coords="259,108,407,166" href="http://doctorgeorge.besaba.com/?page_id=130" target="_blank">
</map>
<!-- End ImageReady Slices -->
</body>
</html>
1 Нужно всегда прописывать DOCTYPE иначе браузеры будут рендерить страницу в quirk режиме
2 Карту картинки можно сделать на CSS то есть убрать
HTML5
1
2
3
4

<map name="untitled_______Map">
<area shape="rect" alt="Колено" coords="259,380,402,443" href="http://doctorgeorge.besaba.com/?page_id=132" target="_blank">
<area shape="rect" alt="Плечо" coords="259,108,407,166" href="http://doctorgeorge.besaba.com/?page_id=130" target="_blank">
</map>
3 Не нужно смешивать контент с презентацией то есть
HTML5
1

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
убрать и оставить
HTML5
1

<body class="main">
а в CSS
CSS
1
2
3
4
5

.main{
background-color:#FFFFFF;
margin-left:0;
margin-top:0;
}
а это я не понял зачем. marginwidth нужно для iframe но увас здесь нет iframe
HTML5
1

marginwidth="0" marginheight="0"
также нужно убрать
HTML5
1

 border="0"
Карту изображения можно построить по такой технике

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="margin.css">
</head>
<body>
<div class="image-map">
<img src="eb52209196ba.jpg" alt="тело">
<ul>
<li class="hand1"><a href="#"><span>Кисть</span></a></li>
<li class="hand2"><a href="#"><span>Локоть</span></a></li>
<li class="hand3"><a href="#"><span>Плечо</span></a></li>
<li class="leg1"><a href="#"><span>Бедро</span></a></li>
<li class="leg2"><a href="#"><span>Колено</span></a></li>
<li class="leg3"><a href="#"><span>Стопа</span></a></li>
</ul>
</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

.image-map{
width:489px;
height:626px;
position:relative;
}
.image-map ul{
margin:0;
padding:0;
list-style:none;
}
.image-map a:link, .image-map a:visited{
position:absolute;
display:block;
width:50px;
height:50px;
color:white;
text-decoration:none;
border:1px solid transparent;
}
.image-map a span{
position:absolute;
text-indent:-1000em;
}
.hand1 a{
left:335px;
top:270px;
}
.hand2 a{
left:300px;
top:185px;
}
.hand3 a{
left:270px;
top:110px;
}
.leg1 a{
left:245px;
top:255px;
}
.leg2 a{
left:245px;
top:380px;
}
.leg3 a{
left:255px;
top:520px;
}
.image-map a:hover span, .image-map a:focus span{
display:block;
width:4em;
top:4em;
left:26px;
text-indent:0;
text-align:center;
background-color:gray;
padding:0.25em 0.5em;
margin-left:-2.5em;
}
.image-map a:hover, .image-map a:focus{
border:1px solid gold;
}
Выделение при наведении в карте изображения

Все это я узнал из книги CSS Mastery Second Editon от Andy Budd
0
01.01.2013, 13:46
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 01.01.2013, 13:46
Помогаю со студенческими работами здесь

Выделение ссылки при наведении на другую
Возможно как-нибудь сделать так, чтобы одна ссылка выделялась, когда пользователь наводит мышку на...

Выделение блока при наведении мыши
Использую boostrap 4, пытаюсь сделать, чтобы при наведении мыши на див, он менял свой фон ...

Не корректное выделение при наведении мыши
суть в том что при наведении мышкой на некоторые кнопки например, модерация, предварительный...

Сделать выделение Label при наведении
Как с помощью .css сделать так, что бы при наведении курсором на Label он увеличивался в размере?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru