Помощник
 |
|
|
|
|
Сообщение сайта
|
 Div'ы меняющие изображения в шапке |
govegan
|
Сообщение
#1
|
||
|
Новичок  Группа: User Сообщений: 15 Регистрация: 30.1.2013 Поблагодарили: 0 раз Репутация:  1 
 |
|
||
 |
|
||
|
Kirinka
|
 15.3.2013, 19:27;
Ответить: Kirinka
Сообщение
#2
|
 Частый гость Группа: User Сообщений: 57 Регистрация: 8.2.2013 Из: Харьков Поблагодарили: 0 раз Репутация: 12
|
Если, в шапке картинки использовать как фон, то можно так:
<!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> |
|
|
|
|
govegan
|
Сообщение
#3
|
|
Новичок Группа: User Сообщений: 15 Регистрация: 30.1.2013 Поблагодарили: 0 раз Репутация: 1
|
Спасибо огромное!
Но что то не получается... Вставил вызов скрипта в макет (скопировал из Вашего сообшения): <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 При наведении на блок с красным бордюром, сверху должно меняться изображение. Но оно не хочет. Подскажите, в чем может быть проблема? |
|
|
|
|
Kirinka
|
17.3.2013, 16:43;
Ответить: Kirinka
Сообщение
#4
|
|
|
Частый гость Группа: User Сообщений: 57 Регистрация: 8.2.2013 Из: Харьков Поблагодарили: 0 раз Репутация: 12
|
У вас ошибка в скрипте перед 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> То есть вместо картинки-фона будет картинка с активными областями. На этом сервисе можно добавить подсветку выделенных областей(если их аккуратно выделить  )
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Моя div-ная верстка соответствует ли стандартам Хотелось бы конструктивной критики |
10 | muratastana | 1594 | 14.1.2023, 1:16 автор: xweb |
|
Изображения с shutterstock от 15 рублей/штука | 5 | Mr_Big | 3669 | 10.9.2017, 21:30 автор: Palundra |
|
DIV'ы в строку | 0 | RedEclipse | 5465 | 29.9.2016, 17:53 автор: -RedEclipse- |
|
Вывод изображения при наведения на часть картинки по area | 1 | androv77 | 4837 | 16.7.2016, 17:32 автор: -YroKPROG- |
|
Создаю фрактальные изображения для разных целей | 22 | Russ33 | 5072 | 27.6.2016, 21:42 автор: Russ33 |
|
Текстовая версия | Сейчас: 20.4.2024, 1:11 |
