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

@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";. для отмены предыдуших запросов, создав для этого отдельные ссылки для отмены сделанных запросов.. а потом понял что они могут мешать друг другу эти два файла.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

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

	При нажатии на ссылку выделить область изображения 18.09.2012, 11:27. Показов 3508. Ответов 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 Буду очень благодарен вам если поможете разобраться с этим вопросом.