При нажатии на ссылку выделить область изображения

@vitaly576 · Регистрация: 12.12.2007

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

В общем хочу реализовать подобную вещь: исть изображение и 2 ссылки.
При нажатии на первую ссылку, на изображении выделяется окружностью одна область.
при нажатии на другую ссылку выделяется окружностью меньшего диаметра другая область.
Реально ли такое сделать?

@newJS · 18.09.2012, 20:57

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

@vitaly576 · 19.09.2012, 11:22 **[ТС]**

примерный вариант такого метода можно посмотреть?

@newJS · 19.09.2012, 21:56

Сообщение от vitaly576

примерный вариант такого метода можно посмотреть?

Теоретически да, но не раньше завтра.

@newJS · 20.09.2012, 09:01

картинки свои ставь

HTML5
1
2
3
4
5
6
7
8
9
<div id="threePics">
<img src="https://www.cyberforum.ru/../pics/pic1.jpg" alt="">
<img src="krug1.gif" alt="" id="krug3">
<img src="krug2.gif" alt="" id="krug4">
<br>
<a href="#" onclick="krug1();">link 1</a>
<br>
<a href="#" onclick="krug2();">link 2</a>
</div>

CSS
1
2
#threePics {position:relative; top:0; left:0;}
#krug3, #krug4 {position:absolute; display:none;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function krug1(){
var el=document.getElementById("krug3").style;
el.top='55px';
el.left='48px';
el.display="block";
document.getElementById("krug4").style.display="none";
 };
 
function krug2(){
var el=document.getElementById("krug4").style;
el.top='127px';
el.left='198px';
el.display="block";
document.getElementById("krug3").style.display="none";
 };

@newJS · 20.09.2012, 09:03

картинки свои ставь

HTML5
1
2
3
4
5
6
7
8
9
<div id="threePics">
<img src="https://www.cyberforum.ru/../pics/pic1.jpg" alt="">
<img src="krug1.gif" alt="" id="krug3">
<img src="krug2.gif" alt="" id="krug4">
<br>
<a href="#" onclick="krug1();">link 1</a>
<br>
<a href="#" onclick="krug2();">link 2</a>
</div>

CSS
1
2
#threePics {position:relative; top:0; left:0;}
#krug3, #krug4 {position:absolute; display:none;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function krug1(){
var el=document.getElementById("krug3").style;
el.top='55px';
el.left='48px';
el.display="block";
document.getElementById("krug4").style.display="none";
 };
 
function krug2(){
var el=document.getElementById("krug4").style;
el.top='127px';
el.left='198px';
el.display="block";
document.getElementById("krug3").style.display="none";
 };

@vitaly576 · 25.09.2012, 16:01 **[ТС]**

спасибо большое за скрипт. Сделал примерно тоже самое:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="0" align="left" width="100%">
<tr><td width="830">
<img src="/0/fastrmig.png" border="0" width="827" height="560" usemap="#karta2">
 <map name="karta2">
 <area shape="circle" coords="105,200,40" href="javascript://" onclick="getElementById('one').style.display='';getElementById('one_text').style.background='#ececec';">
 <area shape="circle" coords="600,150,40" href="javascript://" onclick="getElementById('two').style.display='';getElementById('one_two').style.background='#ececec';">
 </map>
</td>
<td valign="top">
<table width="100%" border="1" align="center">
<tr><td>Номер детали</td><td>Описание</td></tr>
<tr id="one_text"><td>4277630</td><td>Разъем кабеля</td></tr>
<tr id="one_two"><td>4267130</td><td>Кабель платы</td></tr>
</table>
</td></tr></table>
<div id="one" style="position: absolute; left: 80px; top: 180px;display:none;"><img src="/0/circle.png" width="90"></div>
<div id="two" style="position: absolute; left: 600px; top: 150px;display:none;"><img src="/0/circle.png" width="90"></div>
 
</body>
</html>

Единственное, что хотелось бы уточнить/реализовать: если предположим будет не 2 или 3 картинки, а 20 (кругов), у которых разные координаты, как тогда скрывать предыдущие круги, ведь код будет возрастать в геометрической прогрессии.

@panicwassano · 26.09.2012, 21:26

Сообщение от vitaly576

Единственное, что хотелось бы уточнить/реализовать: если предположим будет не 2 или 3 картинки, а 20 (кругов), у которых разные координаты, как тогда скрывать предыдущие круги, ведь код будет возрастать в геометрической прогрессии.

сделать спрайт, и двигать его свойством background-position

03.10.2012, 23:12

Подскажите пожалуйста а как реализовать чтобы на изображении появлялось не одно изображение а до 6 изображений в разных координатах за раз при нажатии на одну ссылку.

Пробовал что то менять в скрипте так он выполняет один из двух запросов. короче я нуб в javascript

Буду очень благодарен вам если поможете разобраться с этим вопросом.

@newJS · 04.10.2012, 06:43

Сообщение от panicwassano

сделать спрайт, и двигать его свойством background-position

Какой тут спрайт, круги находятся сверху картинки, а не снизу, фоном круги окажутся под картинкой.

Сообщение от persons

а как реализовать чтобы на изображении появлялось не одно изображение а до 6 изображений в разных координатах за раз при нажатии на одну ссылку

это в лоб, простым наращиванием, когда будет точно известно чего и сколько, тогда в цикле сделать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="threePics">
<img src="https://www.cyberforum.ru/pics/pic1.jpg" alt="">
<img src="krug1.gif" alt="" id="krug3">
<img src="krug2.gif" alt="" id="krug4">
<img src="krug2.gif" alt="" id="krug5">
<img src="krug2.gif" alt="" id="krug6">
<img src="krug2.gif" alt="" id="krug7">
<br>
<a href="#" onclick="krug1();">link 1</a>
<br>
<a href="#" onclick="krug2();">link 2</a>
</div>

CSS
1
2
#threePics {position:relative; top:0; left:0;}
#krug3, #krug4, #krug5, #krug6, #krug7 {position:absolute; display:none;}

JavaScript
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
function krug1(){
var el=document.getElementById("krug3").style;
el.top='55px';
el.left='48px';
el.display="block";
document.getElementById("krug4").style.display="none";
 };
 
function krug2(){
var el=document.getElementById("krug4").style;
el.top='127px';
el.left='198px';
el.display="block";
el=document.getElementById("krug5").style;
el.top='155px';
el.left='98px';
el.display="block";
el=document.getElementById("krug6").style;
el.top='27px';
el.left='19px';
el.display="block";
el=document.getElementById("krug7").style;
el.top='55px';
el.left='77px';
el.display="block";
document.getElementById("krug3").style.display="none";
 };

04.10.2012, 16:31

Спасибо большое. Прям выручили очень сильно.
Только вот проблема при нажатии на одну ссылку все просто суппер выскакивает несколько картинок, после при нажатии на 1 ссылку убирается одна картинка из krug2 и меняется на krug1 и остаются прошлые 3 картинки krug2. как сделать чтобы при нажатии на другую ссылку прошлые картинки убирались и появлялись толлько новые.

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

Добавлено через 2 часа 55 минут
Все разобрался )

document.getElementById("krug3").style.d isplay="none";

в конце каждого запроса

var el=document.getElementById("krug4").styl e;
el.top='127px';
el.left='198px';
el.display="block";

А также

document.getElementById("krug3").style.d isplay="none"; равняется числу предыдуших запросов тоест может быть от krug3-krug9

Добавлено через 3 часа 30 минут
Теперь возник другой вопрос. К примеру у меня много запросов ссылок 10 по каждой ссылке подгружаются до 6 изображений. При нажатии на 3 ссылки на карте появляются 18 изображений, как мне сделать отмену для например 1 или 2х ссылок убрать изобрадения с карты и оставить нужные.

ДУмал 2 фаил с java скриптом написать с параметром document.getElementById("krug3").style.d isplay="none";. для отмены предыдуших запросов, создав для этого отдельные ссылки для отмены сделанных запросов.. а потом понял что они могут мешать друг другу эти два файла.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@vitaly576 1 / 1 / 0 Регистрация: 12.12.2007 Сообщений: 93

	При нажатии на ссылку выделить область изображения 18.09.2012, 11:27. Показов 3471. Ответов 10 Метки нет (Все метки) В общем хочу реализовать подобную вещь: исть изображение и 2 ссылки. При нажатии на первую ссылку, на изображении выделяется окружностью одна область. при нажатии на другую ссылку выделяется окружностью меньшего диаметра другая область. Реально ли такое сделать? 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	18.09.2012, 20:57
	Первое что приходит, это нарисовать две прозрачные картинки с этими кружками и по клику накладывать по нужным координатам. Если прямоугольную, то можно без картинок обойтись. 0

@vitaly576 1 / 1 / 0 Регистрация: 12.12.2007 Сообщений: 93
	19.09.2012, 11:22 [ТС]
	примерный вариант такого метода можно посмотреть? 0

persons
	03.10.2012, 23:12
	Подскажите пожалуйста а как реализовать чтобы на изображении появлялось не одно изображение а до 6 изображений в разных координатах за раз при нажатии на одну ссылку. Пробовал что то менять в скрипте так он выполняет один из двух запросов. короче я нуб в javascript Буду очень благодарен вам если поможете разобраться с этим вопросом.