JavaScript. Смена картинки при наведении курсора мышки

Ответить
Аватара пользователя
Jeff
Сообщения: 159
Зарегистрирован: 02.01.2010

Код: Выделить всё

<a href="http://mir-tv.homeip.net/index.php" onmouseover=" document.test.src='4.gif;" onmouseout="document.test.src='4.1.gif;">
<img home="test" border=0 src="4.1.gif" alt="Переход">
</a>
То что я написал не совсем правильно :( .
Вот пример что я хочу
1.gif
1.gif    3.91 КБ • 10353 просмотра
1.1.gif
1.1.gif    3.95 КБ • 10353 просмотра
Т.е. при наведении курсора мыши кнопка меняла цвет с зелёного на красный. Что в коде не так или надо использовать другой код? (Буду делать ещё 4 кнопки)
Помогите пожалуйста :)

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
Jeff писал(а):home="test"
такого атрибута совсем не существует
Jeff писал(а):document.test.src
да и так ты к картинке не обратишься
Jeff писал(а):Что в коде не так или надо использовать другой код?
код кривой. для примера реализации смотри start.selfip.net/top/index.php?a=domolink (уже не работает) конечно не лучшая реализация в плане кода, но на первое время пойдет

p.s. проект на который написал ссылку был свернут уже давно

Аватара пользователя
Jeff
Сообщения: 159
Зарегистрирован: 02.01.2010
<img name="1" src="./images/1.gif" alt="1" width="95" height="36"></a><a href="http://mir-tv.homeip.net/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('1.1','','./images/cat/1.1.gif',1)"><hr>
Что то не так :(
У меня 2 картинки. Первая 1.gif а вторая 1.1.gif как это всё правильно написать?

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
сначала подключи

Код: Выделить всё

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
а потом уже описывай кнопки

Код: Выделить всё

<a href="index.php?a=domolink&cat=&on=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b1','','./images/1.1.gif',1)">
    <img name="b1" src="./images/1.gif" alt="on" width="32" height="32">
</a>

<a href="index.php?a=domolink&cat=&on=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b2','','./images/2.1.gif',1)">
    <img name="b2" src="./images/2.gif" alt="on" width="32" height="32">
</a>
у каждой кнопки должно быть уникальное
onMouseOver="MM_swapImage('on'
и
<img name="on"
менять можно на любые имена (англ. буквами).
В примере для кнопок использованы b1 для первой и b2 для второй

Аватара пользователя
Jeff
Сообщения: 159
Зарегистрирован: 02.01.2010
Большое спасибо очень красиво выглядит

Аватара пользователя
Jeff
Сообщения: 159
Зарегистрирован: 02.01.2010
<a href="http://mir-tv.homeip.net/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b1','','./images/1.1.gif',1)">
<img name="b1" src="./images/1.gif" alt="b1" width="95" height="36">
</a>
<a href="http://mir-tv.homeip.net/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b2','','./images/2.1.gif',1)">
<img name="b2" src="./images/2.gif" alt="b2" width="95" height="36">
и всё равно что-то не так

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
ну так я примерно написал.
у тебя вторая картинка для второй кнопки называется /images/2.2.gif а не /images/2.1.gif как я указал в коде

Аватара пользователя
AgentSIB
Сообщения: 329
Зарегистрирован: 17.05.2010
Загнались....

Код: Выделить всё

<img src="./images/2.gif" width="95" height="36" onmouseover="this.src='./images/1.gif'" onmouseout="this.src='./images/2.gif'">

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
AgentSIB писал(а):Загнались....
ну я сразу написал
конечно не лучшая реализация в плане кода
имхо правильнее делать смену средствами css - и о подгрузке дополнительных картинок не надо будет заботиться и при выключенном js будет работать.

Аватара пользователя
AgentSIB
Сообщения: 329
Зарегистрирован: 17.05.2010
К сожалению css не всегда кроуссбраузерно. Например, псевдоклассы типа :hover :active и подобные им в IE работают только на тегах a. Уже сталкивался с подобной проблемой. Поэтому в данном случае лучше использовать яваскрипт)

-- добавлено 17 май 2010, 21:04 --

А по поводу подгрузки дополнительных картинок - самый лучший вариант использовать одну картинку в бекраунде, а при наведении - изменять ее позицию. Тогда все будет ровно.

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
AgentSIB писал(а):псевдоклассы типа :hover :active и подобные им в IE работают только на тегах a
проблема существует только в IE6, который потихоньку вымирает. Имхо лучше использовать фикс именно для него ( viewtopic.php?t=219 ) чем js.

Хотя если желания загоняться нет, то действительно лучший вариант изменение позиции фона js-ом

Код: Выделить всё

<div style="width:96px; height:35px; background: url('/images/2.gif') 0 0 no-repeat" onmouseover="this.style.backgroundPosition='0 0'" onmouseout="this.style.backgroundPosition='0 36px'"></div>

enigmaalla
Сообщения: 1
Зарегистрирован: 01.10.2010
Подскажите пожайлуста почему не работает скрипт в php модуле??!!..

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type"  content="text/html; charset=windows-1251">
  <title>Эффект перекатывания</title>
  <style type="text/css">
   A.rollover {
    background: url(...images/stories/top5.jpg); 
    display: block; 
    width: 142px; 
    height: 193px; 

   }
   A.rollover:hover {
    background: url(...images/stories/top5b.jpg); 
   }
  </style>
 </head>
 <body>
  <p><a  href="#" class="rollover"> </a></p>
  </body>
</html> 

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
судя по всему, потому что "..." в путях не бывает. Есть только "." - текущая директория (папка) и ".." - директория на уровень выше

Аватара пользователя
AgentSIB
Сообщения: 329
Зарегистрирован: 17.05.2010
Вспомнил еще один совет. Если используется две картинки, а не одна, то при первом наведении второй картинке требуется время, чтобы прогрузиться. Чтобы такого избежать после загрузки страницы советую использовать кусок кода.

Код: Выделить всё

var preload = new Image();
preload.src = 'path_to_second_pic';
Это позволит загрузить картинку фоном.
Frustra fit per plura quod potest fieri per pauciora © Закон "Бритвы Оккама"

Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
AgentSIB писал(а):Если используется две картинки, а не одна, то при первом наведении второй картинке требуется время, чтобы прогрузиться.
хотя наиболее правильно использовать одну картинку в которой будут оба состояния, которые надо менять (например именно так сделано в движке phpBB3 - используется картинка styles/ca_gen2/imageset/ru/button_topic_reply.gif и при наведении отображается нужная ее часть используя сдвиг фона (background-position)). В таком случае проблем с подгрузкой картинок не будет.

// TODO переписать всю тему в виде нормальной статьи где рассмотреть все варианты с примерами

Ответить