1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 18 Ответов
  • 27296 Просмотров
*

Krax

  • Новичок
  • 19
  • 0 / 0
Смена картинки при наведении курсора
« : 10.07.2010, 22:05:22 »
Привет.  нужна в материале вставить картинку чтобы она при наведении курсора менялась на другую картинку
поставил код:
<p><img src="images/stories/2.jpg" border="0" onmouseover="this.src='images/stories/1.jpg';" onmouseout="this.src='images/stories/1.jpg';" /></p>

все устраивает, но проблема  в том, что при наведении "картинка 1" меняется на "картинку 2",
но если мы мышь отводим от "картинки 2" то "картинка 1" обратно не возвращается,
 как реализовать возврат "картинки 1" в коде?
Записан
*

baser

  • Захожу иногда
  • 69
  • 19 / 0
Re: Смена картинки при наведении курсора
« Ответ #1 : 10.07.2010, 22:38:16 »
<img onmouseover="this.src='images/stories/2.jpg';" onmouseout="this.src='images/stories/1.jpg';" alt="image001" src="images/stories/1.jpg"  />
Записан
*

Krax

  • Новичок
  • 19
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #2 : 11.07.2010, 10:51:41 »
Цитата: baser от 10.07.2010, 22:38:16
<img onmouseover="this.src='images/stories/2.jpg';" onmouseout="this.src='images/stories/1.jpg';" alt="image001" src="images/stories/1.jpg"  />

Спасибо , все работает !!
Записан
*

Ahmedhanjik

  • Захожу иногда
  • 107
  • 1 / 1
  • LEGION
Re: Смена картинки при наведении курсора
« Ответ #3 : 06.02.2011, 20:23:04 »
Спасибо NightGuard, всё получилось!
Записан
*

Ahmedhanjik

  • Захожу иногда
  • 107
  • 1 / 1
  • LEGION
Re: Смена картинки при наведении курсора
« Ответ #4 : 06.02.2011, 20:27:36 »
А можно, как нибудь сделать так чтобы всё время не вводить такой длинный код? Что то типа кнопки Изображение, что бы сразу два файла выбрать можно было!
Записан
*

NightGuard

  • Живу я здесь
  • 2932
  • 378 / 7
  • вжжж-вжжж
Re: Смена картинки при наведении курсора
« Ответ #5 : 06.02.2011, 20:29:25 »
А откуда берем картинки и как их вставляем?
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

skype: nightguardsrussia - только по рабочим вопросам, любые консультации - платные!
*

Ahmedhanjik

  • Захожу иногда
  • 107
  • 1 / 1
  • LEGION
Re: Смена картинки при наведении курсора
« Ответ #6 : 06.02.2011, 23:45:59 »
Придумал! Установил плагин spoiler. И в настройках в место текста {spoiler title=скрытый текс {/spoiler}, вписал    <img src="images/stories/DOWNLOAD_.png" border="0" onmouseover="this.src='images/stories/DOWNLOAD_1.png';" onmouseout="this.src='images/stories/DOWNLOAD_.png';" />
Записан
*

Ahmedhanjik

  • Захожу иногда
  • 107
  • 1 / 1
  • LEGION
Re: Смена картинки при наведении курсора
« Ответ #7 : 06.02.2011, 23:53:49 »
Но почему то не работает! Выкидывает на главную страницу админки! Не подскажите в чём дело?
Записан
*

Alldar

  • Завсегдатай
  • 1471
  • 191 / 1
Re: Смена картинки при наведении курсора
« Ответ #8 : 06.02.2011, 23:57:11 »
Записан
*

Ahmedhanjik

  • Захожу иногда
  • 107
  • 1 / 1
  • LEGION
Re: Смена картинки при наведении курсора
« Ответ #9 : 07.02.2011, 23:37:33 »
Спасибо! Сейчас попробую.
Записан
*

Nikita Web

  • Захожу иногда
  • 62
  • 1 / 1
Re: Смена картинки при наведении курсора
« Ответ #10 : 21.08.2011, 19:05:12 »
сообщение удалено
« Последнее редактирование: 21.08.2011, 19:09:00 от Nikita Web »
Записан
*

Duercos

  • Новичок
  • 2
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #11 : 17.05.2012, 17:51:26 »
Всем добрый вечер!
Народ помогите пожалуйста решить такую проблемку:
Установил VirtueMart и хочу, чтобы при наведении на картинку категории она менялась на другую.

Нашел в сети такой вот код
Спойлер
[свернуть]

Так вот, как мне это использовать в коде страницы категории?
Спойлер
[свернуть]

Ну или может есть другие варианты?
Все заранее спасибо!
Записан
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Смена картинки при наведении курсора
« Ответ #12 : 17.05.2012, 18:34:59 »
Решение в лоб:
Код: html4strict
<img src="images/orig.png" data-altsrc="images/alt.png" />​​​

Код: javascript
window.addEvent('domready', function(){

document.getElements('img').addEvents({
    'mouseenter' : function(e){
        this.set('data-origsrc', this.src);
        this.set('src', this.get('data-altsrc'));        
    },
    'mouseleave' : function(e){
        this.set('src', this.get('data-origsrc')); 
    }
});​​​​​​​​​​​​​​

});

Без всяких эффектов.

Посмотреть можно тут.
« Последнее редактирование: 17.05.2012, 18:39:48 от danik.html »
Записан
【Мегапак Virtuemart】:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Duercos

  • Новичок
  • 2
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #13 : 17.05.2012, 19:23:48 »
danik.html , спасибо за быстрый ответ, но мне наверное такой вариант не подойдет.
Я в этих делах еще новичок, но мне кажется что надо в часть кода, отвечающего за показ загруженной мною картинки
 
if ( $category["category_thumb_image"] ) {
            echo ps_product::image_tag( $category["category_thumb_image"], "alt=\"".$category["category_name"]."\"", 0, "category");

вписать что-то, чтобы было как написано тут , а именно чтобы изначально я загружал картинку большего размера, чем она будет показана на экране, а после наведения курсора показывалась другая половина картинки.
Я прям чувствую, что именно так и надо сделать, вот только знаний не хватает чтобы это сделать :(
Записан
*

TsMax

  • Захожу иногда
  • 84
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #14 : 25.01.2013, 01:26:09 »
Вопрос, просто интересно, почему когда я методом по умолчанию:
Код
<a href="/index.php/ru/store-r"><img src='images/stories/soff.jpg'
onmouseover="this.src='images/stories/son.jpg'"
onmouseout="this.src='images/stories/soff.jpg'" border=0>
Вставляю такие картинки в материал, то при загрузке страницы она не показывается, только когда на то место наводишь, картинки появляются и нормально работают.
И тут же у меня одна есть в модуле, и в модуле прекрасно работает, а в материале прям не хочет отображаться сразу после обновления страницы.
Записан
*

TsMax

  • Захожу иногда
  • 84
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #15 : 26.01.2013, 16:36:53 »
Разобрался. Просто немного исправил код :)
Код
<p style="text-align: center;"><a href="index.php/ru/store-r"><img src="images/stories/soff.jpg" border="0" onmouseover="this.src='images/stories/son.jpg'" onmouseout="this.src='images/stories/soff.jpg'" /></a></p>
Ну это вариант со смещение в центр, вообщем все работает :)
Записан
*

тома

  • Новичок
  • 11
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #16 : 17.02.2013, 23:49:52 »
А можно ли сделать так: есть картинка- вечерний город с многоэтажками, в окнах выключен свет. Если я навожу курсор на одну высотку, то она меняется другой картинкой( такая же только свет в окнах уже в этом доме горит)б курсор убираю картинка прежняя, навожу на другой дом, картинка уже с включеным светом в этом доме и т.д.?
или это надо делать в другой проге? к примеру думала сделать Flash, но чтото тоже не придумаю как показать что реагировать надо именно на этот домик. чтото похожее как я хочу есть на http://www.business-olymp.ru/ там водишь по яблочках и они меняют цвет )))
Записан
*

zasranez

  • Новичок
  • 3
  • 0 / 0
Re: Смена картинки при наведении курсора
« Ответ #17 : 19.02.2013, 11:26:52 »
Вопрос: столкнулся с проблемой показа изображений. Нужно вывести изображение одного материала в каталоге в виде 3-4 изображений сразу (желательно веером, при котором наводишь на определенное изображение и он подсвечивает и увеличивает эту картинку  ^-^ )
Записан
*

egr18

  • Осваиваюсь на форуме
  • 44
  • 1 / 0
Re: Смена картинки при наведении курсора
« Ответ #18 : 24.01.2014, 00:52:15 »
А вот накопал красивый и простой вариант.....
В CSS ставим
Спойлер
[свернуть]

А это туда где желаете видеть картинки
Спойлер
[свернуть]
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

При обновлении до Mobile-Joomla.2.1.21, пропали картинки

Автор Elimelech

 Ответов: 0
Просмотров: 1069 		Последний ответ 15.08.2017, 13:21:31
от Elimelech
Открытие картинки

Автор andrei1537

 Ответов: 10
Просмотров: 1029 		Последний ответ 06.07.2016, 13:39:32
от draff
Перестали грузиться картинки через CSV import

Автор Пономарев Дмитрий

 Ответов: 0
Просмотров: 597 		Последний ответ 09.11.2015, 13:35:38
от Пономарев Дмитрий
Смена домена и последующие проблемы

Автор shadow05

 Ответов: 8
Просмотров: 1964 		Последний ответ 08.07.2014, 12:15:26
от shadow05
Не обновляются картинки JA Slideshow2 Module

Автор Vasuwa

 Ответов: 1
Просмотров: 703 		Последний ответ 24.04.2014, 11:50:44
от darkghost