• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Замена фонового изображения при наведении курсора на ссылку. (Как реализовать?)
Замена фонового изображения при наведении курсора на ссылку.
Blaz
Дата: Суббота, 16.01.2010, 23:18 | Сообщение # 1
молчун
Группа: Пользователи
Пользователь №: 994
Сообщений: 5
Собственно задача:
Имеется страница с нейтральным фоном и 2-мя ссылками в виде кнопок.
Необходимо чтобы при наведении на 1 ссылку фон заменялся картинкой 1.
При уходе с ссылки фон возвращался к нейтральному.
Также и со второй ссылкой, только фон заменялся на картинку 2.

Помогите реализовать.
Заранее всем СПАСИБО.

  
Чекк
Дата: Суббота, 16.01.2010, 23:48 | Сообщение # 2
молчун
Группа: Пользователи
Пользователь №: 730
Сообщений: 3
Получено оценок: 3 		о мне тож всегда было интересно, как так сделать
  
MadeMan
Дата: Воскресенье, 17.01.2010, 02:19 | Сообщение # 3
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6 		Blaz, Чекк, Это псевдокласс hover
  
Blaz
Дата: Воскресенье, 17.01.2010, 20:23 | Сообщение # 4
молчун
Группа: Пользователи
Пользователь №: 994
Сообщений: 5
Quote (MadeMan)
Blaz, Чекк, Это псевдокласс hover

Спасибо за ответ, но это немного не то.
С этим псевдоклассом я могу менять оформление "поведение" самой ссылки.
А мне нужно замена фона страницы, в частности у меня в качестве фона картинка.
Вот как бы её сменить?
  
MadeMan
Дата: Воскресенье, 17.01.2010, 22:50 | Сообщение # 5
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6 		Blaz,

Code
<style type="text/css">
A.rollover{background:url('ССЫЛКА К ИЗОБРАЖЕНИЮ');display:block;width:ШИРИНАpx;height:ВЫСОТАpx;}
A.rollover:hover{background:url('ССЫЛКА К ИЗОБРАЖЕНИЮ ПРИ НАВЕДЕНИИ');}
</style>
  
DSC
Дата: Воскресенье, 17.01.2010, 22:50 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		Попробуй так:
Code
<script type="text/javascript">
document.getElementById('Айди твоей ссылки').onmouseover=function(){document.getElementsByTagName('body')[0].style.cssText='background:url("ссылка на фон")'}
</script>

aka Latro
  
Blaz
Дата: Воскресенье, 17.01.2010, 23:35 | Сообщение # 7
молчун
Группа: Пользователи
Пользователь №: 994
Сообщений: 5
Всем спасибо за ответы, но уже туплю страшно под вечер.
Не выходит. Решил воспользоваться кодом предложенным DSC, не получается. Привожу листинг, ткните носом где ошибка.

Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
document.getElementById('im1').onmouseover=function(){document.getElementsByTagName('body')[0].style.cssText='background:url("index_files/fon1.jpg")'}
</script>
</head>

<body>

<div align="center" >
<p><a href="#" id="im1"><img src="index_files/batton1.jpg" width="230" height="70" border="0" /></a></p>
<p><a href="#" ><img src="index_files/batton2.jpg" width="230" height="70" border="0" /></a></p>

</div>
</body>
  
MadeMan
Дата: Понедельник, 18.01.2010, 03:21 | Сообщение # 8
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
A.rollover{background:url('index_files/batton1.jpg');display:block;width:ШИРИНАpx;height:ВЫСОТАpx;}
A.rollover:hover{background:url('index_files/batton2.jpg');}
</style>

</head>
<body>  
<p><a  href="#" class="rollover"> </a></p>
</body>  
</html>
  
BeSinLi
Дата: Понедельник, 18.01.2010, 04:02 | Сообщение # 9
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112 		MadeMan, :) вы свой код проверяли?
——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

  
DSC
Дата: Понедельник, 18.01.2010, 14:19 | Сообщение # 10
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		Blaz, дело в том, что поставь мой код после </body>
aka Latro
  
Blaz
Дата: Понедельник, 18.01.2010, 19:43 | Сообщение # 11
молчун
Группа: Пользователи
Пользователь №: 994
Сообщений: 5
DSC, Спасибо, в самом деле работает!!!
:D
  
MadeMan
Дата: Понедельник, 18.01.2010, 21:18 | Сообщение # 12
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6 		BeSinLi, проверял — работает.
  
BeSinLi
Дата: Понедельник, 18.01.2010, 23:23 | Сообщение # 13
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (MadeMan)
BeSinLi, проверял — работает.

Я не совсем это имел в виду. Вы точно поняли смысл первого сообщения?
——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

  
Blaz
Дата: Вторник, 19.01.2010, 19:39 | Сообщение # 14
молчун
Группа: Пользователи
Пользователь №: 994
Сообщений: 5
Думаю, во избежании разрастания темы сообщениями уводящими от сути вопроса предлагаю модераторам закрыть тему.

Для решения был выбран код предложенный DSC,

Code
<script type="text/javascript">
document.getElementById('Айди твоей ссылки').onmouseover=function(){document.getElementsByTagName('body')[0].style.cssText='background:url("ссылка на фон")'}
</script>
его нужно вставлять после тэга </body>

Спасибо всем откликнувшимся!

  
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Замена фонового изображения при наведении курсора на ссылку. (Как реализовать?)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.