IDN Форум
Выделенные серверы по отличным ценам!

Вернуться   IDN Форум > Разработка > Кодинг

Кодинг Веб-программирование. Обсуждение скриптов и вопросы по ним. Ajax, PHP, Perl, Java, HTML, XHTML, XML, WML, CSS, JavaScript, SQL.


Ответ
 
Опции темы
  #1  
Старый 21.10.2007, 18:05
Аватар для Artem
low $x'xxx
 
Регистрация: 31.05.2007
Сообщений: 1,096
По умолчанию Новичкам: создание rollover-изображений - для тех, кто не знает JavaScript

Одно из самых частых применений JavaScript - rollover-объекты, то есть объекты, заменяющиеся другими при наведении на них указателем мыши. Вы можете видеть эти эффекты на таких сайтах как Apple.com и других.

Создание самого простого rollover-объекта:

Для создания одного объекта нам потребуется два изображения. Ничего кроме нескольких атрибутов тега <a> и атрибут name тега <img> нам не понадобится.

Код:
<a href="next.html" onmouseover="document.img.src='images/img_on.gif'" onmouseout="document.img.src='images/img_out.gif'"><img src="images/arrow_off.gif" name="button" alt="button" /></a>
Атрибут onmousover определяет картинку при наведении на ссылку мышью, а onmouseout - обычном состоянии.

Тут очень важно отметить, что за изменение объекта отвечает ссылка, а не сам тег изображения.

Можно проверить браузер на поддержку JavaScript и изображений:
Этот код вставляем между тегами <head> </head>(необязательно, можно вставить в <body>):

Код:
<script language="javascript" type="text/javascript">
<!- Hide script from old browsers
if (document.images) {
img1on = new Image
img1off = new Image
img1on.src = "images/img_on.gif"
img1off.src = "images/img_off.gif" }
else {
img1on = ""
img1off = ""
img1on.src = ""
img1off.src = ""
document.img1 = "" }
// End Hiding script from old browsers ->
</script>
Здесь мы объявляем переменные для случаев, если браузер поддерживает изображения и если не поддерживает. Для увеличения количества изображений нужно просто увеличить количество переменных. В атрибуте onmouseover указываем "document.img1.src=img1on.src", а в onmouseout - "document.img.src=img1off.src".

Оригинальная статья: http://createweb.blogspot.com/2007/1...avascript.html

Последний раз редактировалось khurtsiya; 21.10.2007 в 18:34.
Ответить с цитированием
  #2  
Старый 21.10.2007, 18:25
Аватар для khurtsiya
low $x'xxx
 
Регистрация: 05.12.2006
Сообщений: 2,870
По умолчанию Ответ: Новичкам: создание rollover-изображений - для тех, кто не знает JavaScript

Интересно
Только немного неудобочитаемо имхо...
__________________
Я IDN
Ответить с цитированием
  #3  
Старый 21.10.2007, 18:27
Аватар для Artem
low $x'xxx
 
Регистрация: 31.05.2007
Сообщений: 1,096
По умолчанию Ответ: Новичкам: создание rollover-изображений - для тех, кто не знает JavaScript

Да. Что-то не очень.
Ответить с цитированием
  #4  
Старый 21.10.2007, 18:33
Аватар для khurtsiya
low $x'xxx
 
Регистрация: 05.12.2006
Сообщений: 2,870
По умолчанию Ответ: Новичкам: создание rollover-изображений - для тех, кто не знает JavaScript

Я имел в виду не текст, а оформление. Вот так вроде бы юзабильнее, нет?
__________________
Я IDN
Ответить с цитированием
  #5  
Старый 21.10.2007, 18:35
Аватар для Artem
low $x'xxx
 
Регистрация: 31.05.2007
Сообщений: 1,096
По умолчанию Ответ: Новичкам: создание rollover-изображений - для тех, кто не знает JavaScript

Я это и имел в виду
Ответить с цитированием
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход


Часовой пояс GMT +3, время: 15:09.

     

Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot