Модная карта на javascript

enf0rce · September 11, 2008

Собтвен. сабж. Хочется сделать нормальную юзабильную карту для сайта.

Допустим есть карта, рядом с картой допустим права от неё будут идти ссылки, как сделать так чтобы при наведении на ссылки, допустим менялся цвет кружка (котрый на карте), допустим с синего на красный или на какую нить другую форму

Вот макет:

а вот тут можно посмареть наглядно что я имею ввиду, только тут еще при наведении на точке всплывает окошко, это как сделать я знаю)

Заранее благодарен, жду ответа.

Edited September 11, 2008 by enf0rce

Victor Ananiev · September 11, 2008

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

enf0rce · September 11, 2008

а можно привести пример для одной такой ссылке на карте как это будет выглядеть?

просто я js я знаком слабо

ZoNT · September 11, 2008

там используется карта salons. Отмечены ареи по координатам и на маусовер/маусаут навешаны функции:

onmouseover = "show('box1', this);"

Так вот делаешь дивы в тех местах, где эти квадраты на карте и в маусовер/маусаут дописываешь их отображение/скрытие:

onmouseover = "show('box1', this); document.getElementById('ХреновДив1').style.display='block';

onmouseout = "show('box1', this); document.getElementById('ХреновДив1').style.display='none';

Victor Ananiev · September 11, 2008

'ХреновДив1' - :rolleyes:

ZoNT · September 11, 2008

Двойные кавычки не закрыты (прошляпил):

onmouseover = "show('box1', this); document.getElementById('ХреновДив1').style.display='block';"

onmouseout = "show('box1', this); document.getElementById('ХреновДив1').style.display='none';"

enf0rce · September 12, 2008

всё равно не оч понял, а можно более наглядно

сделать какую нить типа карты и показать как полностью это работает...

(т.е. карту, на ней поставить точку и показать как всё это будет работать)

Вячеслав · September 12, 2008

Посмотри здесь, игрался когда-то

http://unek-lyon2.freehostia.com/statistics/statistics.php

если я правильно конечно понял, что тебе именно такой принцип нужен

xaero · September 16, 2008

Esli jQuery znayte u nego est jmap plugin kak raz podxodit... poprobuyte...

enf0rce · October 2, 2008

В общем проблема не работает

подскажите что сделал не так

в архиве пример

оч нужна помощь

<html>
<!-- Created on: 02.10.2008 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="generator" content="AceHTML 6 Pro">
<style>	
#main
{
background:#fff url('sample.gif') left top no-repeat;
height:557px;
width:669px;
}				 
#point
{
position:relative;
top:340px;
left:110px;
height:10px;
line-height:10px;
width:10px;
}	  
#link
{
width:110px;
height:12px;
left:465px;
top:110px;
line-height:12px;
position:relative;				
cursor:pointer;
background-color:red;
}
</style>
<script language="javascript" type="text/javascript"> 				   
function over()
{
document.getElementById('point').src="2_t04ka.gif";
}
function out()
{
document.getElementById('point').src="1_t04ka.gif";
}
document.onload=load;
function load()
{
document.getElementById('link').onmouseover=over;
document.getElementById('link').onmouseout=out;
}
</script>
</head>
<body>
<div id="main">
 <img src="1_t04ka.gif" id="point" />
 <div id="link"> </div>
</div>
</body>
</html>

вот скрин чтобы как то понять

заранее благодарен

и хотелось чтобы было видно во всех браузерах

homm · October 2, 2008

Ммм… У меня отличная идея, как можно это сделать на CSS…

Victor Ananiev · October 2, 2008

Мне приходят в голову вложенные дивы, но не могу придумать как это кроссбраузерно верстануть))

Понял, ща заверстаю))

Victor Ananiev · October 2, 2008

CSS:


#bg
{
height:557px;
width:669px;
background:url('sample.gif') left top no-repeat;
}
#point
{
position:absolute;
top:220px;
left:-200px;
height:16px;
line-height:16px;
width:16px;
background:url('1_t04ka.gif') no-repeat;
}	  
#link
{
display:block;
width:40px;
height:12px;
left:465px;
top:63px;
line-height:12px;
position:relative;
text-decoration:none;				
}
#link:hover #point
{
background:url('2_t04ka.gif') no-repeat;
}

HTML


<div id="bg">
<a href="#" id="link">
<div id="point"> </div>
</a>
<div>

ОСЕЛ - инвалид, а в опере и фф все четко)

Edited October 2, 2008 by Vindex10

enf0rce · October 2, 2008

может кто подсказать как сделать чтобы осел норм отображал всё это...

homm · October 2, 2008

может кто подсказать как сделать чтобы осел норм отображал всё это...

Может a#link

Victor Ananiev · October 2, 2008

даже если убрать #link и для единичного случая поставить просто a, все равно не работает)

homm · October 2, 2008

Ты заставляешь меня запустить эксплорер

Прикол в том, что если зажать мышь на id="bg" и перемещать на ссылку — все работает.

enf0rce · October 3, 2008

ну кто поможет ? вопрос в том что не работает по ie 6 (

как решать ?

Edited October 3, 2008 by enf0rce

Victor Ananiev · October 3, 2008

гигиги, ну всетаки вопрос всиле, просто весь вечер просидел, аж обидно))))

Sign In

Модная карта на javascript

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information