Форум Сайтостроение Веб-строительство

div'ы меняющие изображения в шапке

B
На сайте с 10.01.2012
Offline
42
brokkoli
664

Здравствуйте уважаемые вебмастера!

Нуждаюсь в вашем совете.

Необходимо реализовать такую вещь: при наведении на один из трёх div’ов в блоке контента, нужно в шапке отображать три разные картинки (каждая для соответствующего div’a)

Подскажите, пожалуйста, какими методами и как это можно реализовать?

eis
На сайте с 18.10.2008
Offline
473
eis
#1

brokkoli, javascript

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
WebJunior
На сайте с 11.06.2010
Offline
155
WebJunior
#2

Можно и без JS попробовать :)

В каждый div пихаете нужные картинки; задаете для них position:absolute и скрываете через display: none; для блока, обволакивающего всё (вместо с шапкой), прописываете position: relative.

Затем -

.div:hover img {display: block}

Ну и позицию картинок отрегулировать, если нужно. Важно что бы только для главного, обволакивающего слоя было задано относительное позиционирование.

Мой сайт на этом хостинге - https://tuthost.ua/?from=2558 / Верстаю шаблоны (темы с отзывами: https://searchengines.guru/ru/forum/763758, https://searchengines.guru/ru/forum/600404 ).
Позиция модуля (footer) Абсолютное позиционирование div в JS и картинка
eis
На сайте с 18.10.2008
Offline
473
eis
#3

WebJunior, ie не понимает :hover кроме как для ссылок ☝

WebJunior
На сайте с 11.06.2010
Offline
155
WebJunior
#4

eis, IE? не, не слышал.

p.s. а какие версии? 🙄

seodata
На сайте с 04.03.2013
Offline
72
seodata
#5
eis:
WebJunior, ie не понимает :hover кроме как для ссылок ☝

Да давно уже понимает. ИЕ6 не понимал, это правда. Но с 7 все нормально, если слово "нормально" и ИЕ вообще можно ставить в одном предложении :)

B
На сайте с 10.01.2012
Offline
42
brokkoli
#6

Всем большое спасибо!

Делаю на JavaScript вот так:

<head> 

<script type="text/javascript">

function replaceImg(address)

{

  document.getElementById("smena").style.backgroundImage="url("+ address + ")";

}

</script>

</head> 

<div id="smena" style="background-image:url(img.jpg); height:100px; width:100%;"></div>

<div id="block">

<div id="left" onmouseover="replaceImg('img1.jpg')"></div>

</div><!-- #block-->

Делаю на сайте http://milfort.ru

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

Подскажите, в чем может быть причина?

Всплывающие изображения. javascript и файл js Digital Caramel - помогаем
RO
На сайте с 13.07.2009
Offline
88
RedOK
#7
brokkoli:
Всем большое спасибо!

Делаю на JavaScript вот так:

<head> 
<script type="text/javascript">

function replaceImg(address)

{

  document.getElementById("smena").style.backgroundImage="url("+ address + ")";

}

</script>

</head> 
<div id="smena" style="background-image:url(img.jpg); height:100px; width:100%;"></div>

<div id="block">

<div id="left" onmouseover="replaceImg('img1.jpg')"></div>

</div><!-- #block-->


Делаю на сайте http://milfort.ru
При наведении на блок с красным бордером, должно меняться изображение в блоке сверху... Но почему то скрипт не работает.

Подскажите, в чем может быть причина?

у тебя функция кривая. убери &nbsp; перед document.getElementById("smena").

B
На сайте с 10.01.2012
Offline
42
brokkoli
#8

Спасибо!

Получилось!

А можно ли как то сделать, чтобы при перемещении курсора от блока возвращалось первоначальное изображение? а то зависает то, на которое навёл.

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#9

Допишите onmouseout="replaceImg('OLD_image.jpg')"

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий