Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #7

    Алексей111
    Очков активности: 39 6 тем, 8 сообщений, 1 балл репутации

  • Фотография AnnaYa
    #8

    AnnaYa (topbase.ru)
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Developer
    #9

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 26.09.2018
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


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

#1 govegan

govegan
  • Неактивные
  • 15 сообщений
  • Репутация: 1
0

Отправлено 15 March 2013 - 16:16

Здравствуйте уважаемые вебмастера!
Нуждаюсь в вашем совете.

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

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

 

 

  • 0

#2 Kirinka

Kirinka
  • Неактивные
  • 57 сообщений
  • Репутация: 12

Отправлено 15 March 2013 - 18:27

Если, в шапке картинки использовать как фон, то можно так:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function replaceImg(address)
{
  document.getElementById("header").style.backgroundImage="url("+ address + ")";
}
</script>
</head>
<body>
<div id="header" style="background-image:url(img.jpg); height:100px; width:100%;">картинка</div>
<div onmouseover="replaceImg('img1.jpg')">Текст1</div>
<div onmouseover="replaceImg('img2.jpg')">Текст2</div>
<div onmouseover="replaceImg('img3.jpg')">Текст3</div>
</body>
</html>


А если просто картинка, то так:

<!Doctype html>
<html>
<head>
<script type="text/javascript">
function replaceImg(address)
{
  document.getElementById("header").innerHTML="<img src="+ address + " alt=''>";
}
</script>
</head>
<body>
<div id="header"><img src="img.jpg" width="200" height ="300" alt=""></div>
<div onmouseover="replaceImg('img1.jpg')">Текст1</div>
<div onmouseover="replaceImg('img2.jpg')">Текст2</div>
<div onmouseover="replaceImg('img3.jpg')">Текст3</div>
</body>
</html>

  • 1

#3 govegan

govegan
    Topic Starter
  • Неактивные
  • 15 сообщений
  • Репутация: 1

Отправлено 17 March 2013 - 13:53

Спасибо огромное!

Но что то не получается...

Вставил вызов скрипта в макет (скопировал из Вашего сообшения):

<script type="text/javascript">
function replaceImg(address)
{
  document.getElementById("smena").style.backgroundImage="url("+ address + ")";
}
</script>

В код страницы вставил
<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 При наведении на блок с красным бордюром, сверху должно меняться изображение. Но оно не хочет.

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

#4 Kirinka

Kirinka
  • Неактивные
  • 57 сообщений
  • Репутация: 12

Отправлено 17 March 2013 - 15:43

У вас ошибка в скрипте перед document.getElementById("smena").style.backgroundImage="url("+ address + ")"; стоят лишние символы.
В вашем случае лучше использовать image map, то есть карту картинки. Можете воспользоваться генератором карт htmlmapgenerator.ru либо любым другим. На карте выделите активные области это будет выглядеть примерно так:
<img alt="block.jpg" src="http://milfort.ru/images/block.jpg" usemap="#myMap" width="1000" height="588" />
	<map name="myMap" id="myMap">
		<area shape="poly" coords="427,265,551,265,552,348,540,398,423,391" onmouseover="replaceImg('img1.jpg')" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" />
		<area shape="poly" coords="12,193,245,168,294,208,240,241,127,269,23,285" onmouseover="replaceImg('img2.jpg')" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" />
	</map>
То есть вместо картинки-фона будет картинка с активными областями. На этом сервисе можно добавить подсветку выделенных областей(если их аккуратно выделить B) )
  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru