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

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

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

В общем хочу реализовать подобную вещь: исть изображение и 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

<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

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

<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

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

<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

<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

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.display="none";

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

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

А также

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

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

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

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

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

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

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	19.09.2012, 21:56	4
	Сообщение от vitaly576 примерный вариант такого метода можно посмотреть? Теоретически да, но не раньше завтра. 0

@panicwassano 601 / 569 / 104 Регистрация: 07.11.2010 Сообщений: 2,004
	26.09.2012, 21:26	8
	Сообщение от vitaly576 Единственное, что хотелось бы уточнить/реализовать: если предположим будет не 2 или 3 картинки, а 20 (кругов), у которых разные координаты, как тогда скрывать предыдущие круги, ведь код будет возрастать в геометрической прогрессии. сделать спрайт, и двигать его свойством background-position 2

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

persons
	04.10.2012, 16:31	11
	Спасибо большое. Прям выручили очень сильно. Только вот проблема при нажатии на одну ссылку все просто суппер выскакивает несколько картинок, после при нажатии на 1 ссылку убирается одна картинка из krug2 и меняется на krug1 и остаются прошлые 3 картинки krug2. как сделать чтобы при нажатии на другую ссылку прошлые картинки убирались и появлялись толлько новые. Я пытаюсь сейчас реализовать чтобы с помошью чекбоксов можно было выделять двух и несколько человек и показывались их обшие точки на карте только разными цветами так будет удобней. Добавлено через 2 часа 55 минут Все разобрался ) document.getElementById("krug3").style.display="none"; в конце каждого запроса var el=document.getElementById("krug4").style; el.top='127px'; el.left='198px'; el.display="block"; А также document.getElementById("krug3").style.display="none"; равняется числу предыдуших запросов тоест может быть от krug3-krug9 Добавлено через 3 часа 30 минут Теперь возник другой вопрос. К примеру у меня много запросов ссылок 10 по каждой ссылке подгружаются до 6 изображений. При нажатии на 3 ссылки на карте появляются 18 изображений, как мне сделать отмену для например 1 или 2х ссылок убрать изобрадения с карты и оставить нужные. ДУмал 2 фаил с java скриптом написать с параметром document.getElementById("krug3").style.display="none";. для отмены предыдуших запросов, создав для этого отдельные ссылки для отмены сделанных запросов.. а потом понял что они могут мешать друг другу эти два файла.