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

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

  • Завсегдатай
  • 1466
  • 191 / 1
Re: Смена картинки при наведении курсора
« Ответ #8 : 06.02.2011, 23:57:11 »
Записан
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Сайт о Joomla - CMSCafe
*

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
Просмотров: 992 		Последний ответ 15.08.2017, 13:21:31
от Elimelech
Открытие картинки

Автор andrei1537

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

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

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

Автор shadow05

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

Автор Vasuwa

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