Требуется Помощь Зала или Парка с AREA

341

mark2011

16 февраля 2011, 08:06

575

Люди, помогите пожалуйста...

Есть картинка:


<div id="window">

			<div id="window_bg">

				<img src="images/main_window.png" alt="" usemap="#main_window">

                	<!-- сюда будет грузиться весь контент страницы -->

                	<div id="page_content">

						

						<div id="page_text" class="anotherFont">

							<div>

								<h1 id="pTitle"></h1>

							</div>

							<div id="pageText">

							

							</div>

						</div>	

					</div>

			</div>

			

		</div>

Сама картинка вот здесь:


<img src="images/main_window.png" alt="" usemap="#main_window">

К ней есть карта:


<map id="main_window" name="main_window">

	

<area onclick="main_page_content();return false;" id="ar1" shape="rect" alt="Главная страница" href="index.php" coords="661,32,752,57" title="Главная страница">



<area onclick="alert(document.getElementById('ar2').style.backgroundImage); return false;" id="ar2" shape="rect" alt="Прайс-лист" coords="757,33,871,58" title="Прайс-лист" href="price.php">



<area onclick="articles_page_content();return false;" href="articles.php" id="ar3" shape="rect" alt="Статьи" coords="876,32,959,58" title="Статьи" />

<area onclick="contacts_page_content(); return false;" href="contacts.php" id="ar4" shape="rect" alt="Контакты" coords="966,28,1052,60" title="Контакты" />

<area id="ar5" shape="circle" alt="" coords="1092,165,41" href="http://goldfish-nn.ru" title="" />

<area id="ar6" shape="default" nohref="nohref" alt="" />

</map>



</body>

В общем-то надо сделать так, чтобы у каждого area на onmouseover появлялось некое заранее определённое изображение, на onmouseout - исчезало.

Вообще реально?

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше

239

Ragnarok

16 февраля 2011, 08:27

#1

порезать пикчу? версткой потом натянуть чтобы казалось что картинка одна. по onMouseOver менять

//TODO: перестать откладывать на потом

M2

341

mark2011

16 февраля 2011, 08:30

#2

Нет, резать точно не вариант. Как-то с AREA можно управиться?

C

291

Chukcha

16 февраля 2011, 08:34

#3

<img src="images/main_window.png" alt="" usemap="#main_window" id="mapped">   

<area onclick="articles_page_content();return false;" href="articles.php" onmouseover="mapped.src='адрес новой картинки';" onmouseout="mapped.src='адрес исходной картинки' />

Chukcha добавил 16.02.2011 в 11:39

и... желательно сделать preload изображений.

M2

341

mark2011

16 февраля 2011, 08:44

#4

Chukcha

Мне не заменять исходную картинку нужно, а на то, что есть, навесить бэкграунд. Это разные вещи. Т.е. пункты меню должны остаться неизменными. Просто когда по ним водишь мышкой, то должно появляться то изображение, которое сейчас есть над пунктом меню "Главная".

mark2011 добавил 16.02.2011 в 11:47

Сразу скажу. Вот это:


mapped.backgroundImage=url('images/menubutton.png')

не работает.

Таинственное исчезновение GoogleX Яндекс.Браузер теперь умеет переводить Улучшенный дизайн сервиса Картинки

314

T.R.O.N

16 февраля 2011, 08:48

#5

onMouseOver можно и для AREA, а вот кусок картинки менять - сложнее.

Как вариант решения. делаеш еще одну картинку(*2), где над всеми пунками то то хочеш. А по событию, поверх *1 картинки выводится фрагмент из *2, на котором есть помеченный пункт.

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)

Как связывать через onmouseover Тег AREA + hover Про ПР с блогов.

M8

100

miker81

16 февраля 2011, 08:51

#6

Смысл примерно такой:

http://www.hartool.nl/house.htm

т.е. onmouseover у area работает

UPD Пока я писал, всё объяснил T.R.O.N

Сумма разума на планете - величина постоянная. А население растёт ... Русской грамоте обучен плохо.

C

291

Chukcha

16 февраля 2011, 08:52

#7

mark2011,

Вы делаете 4 изображения, где область area меняете под свои нужды

новая картинка - это та же картинка, только изменена область area

Можно поиграться прозрачной картинкой, а на img натянуть background, и тогда используя спрайты можно управлять стилем.

Тег AREA + hover Стили для area CSS a:hover, при наведении

M2

341

mark2011

16 февраля 2011, 08:54

#8

miker81

Нет, смысл не такой.

Chukcha

Можешь стукнуться мне в аську? сейчас сброшу номер в личку

mark2011 добавил 16.02.2011 в 13:45

Если Onmouseover можно для area, то почему не работает указанный код?

<area onclick="main_page_content(); return false;" onmouseover="$('#ar1').addClass('main_slider');" onmouseout="$('#ar1').removeClass('main_slider');" id="ar1" shape="rect" alt="Главная страница" href="index.php" coords="661,32,752,57" title="Главная страница">

Голосовой ассистент Яндекса поможет Стоимость акций Twitter упала Сервис Яндекс.Такси подключил услугу

Все что нужно знать о DDоS-атаках грамотному менеджеру

Open AI тестирует память для ChatGPT