Перейти к содержимому


Смена Картинки При Наведении

Автор hamer750, 10 марта 2013 16:16

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 13

#1 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 16:16

Здравствуйте!есть такой код.Что нужно добавить,чтобы при наведении курсора менялось изображение?Спасибо

<a href="http://xn--h1aka1au3...p1ai/feedback">
<img src="http://design.xn--h1...ai/e2.png?9187" style="display:inline;" />

#2 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 10 Март 2013 - 16:31

Просмотр сообщенияhamer750 (10 Март 2013 - 16:16) писал:

Здравствуйте!есть такой код.Что нужно добавить,чтобы при наведении курсора менялось изображение?Спасибо

<a href="http://xn--h1aka1au3...p1ai/feedback">
<img src="http://design.xn--h1...ai/e2.png?9187" style="display:inline;" />
Изображение у тега img можно поменять только с помощью js.
Пример кода:
<a href="адрес страницы" class="m1">
<img class="m2" src="адрес изображения" style="display:inline;" />
<script>
$('.m1').hover(
i='';
function(){
i = $('.m2').attr('src');
$('.m2').attr('src')='адрес второй картинки';
},
function() {
$('.m2').attr('src')=i;
});
</script>

#3 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 16:40

Просмотр сообщенияKoderhan (10 Март 2013 - 16:31) писал:

Изображение у тега img можно поменять только с помощью js.
Пример кода:
<a href="адрес страницы" class="m1">
<img class="m2" src="адрес изображения" style="display:inline;" />
<script>
$('.m1').hover(
i='';
function(){
i = $('.m2').attr('src');
$('.m2').attr('src')='адрес второй картинки';
},
function() {
$('.m2').attr('src')=i;
});
</script>
Подробнее можно?что куда писать?

#4 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 10 Март 2013 - 16:51

Просмотр сообщенияhamer750 (10 Март 2013 - 16:40) писал:

Подробнее можно?что куда писать?
В этом коде вам всего лиш нужно вставить адреса изображений и страниц.

#5 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 16:55

Просмотр сообщенияhamer750 (10 Март 2013 - 16:40) писал:

Подробнее можно?что куда писать?
Не работает!<img src="http://s342966.store...2/pustota2.png" style="display:inline;" />
<a href="http://xn--h1aka1au3...ЖЕННЫЙ-ПЛАТЁЖ">
<img src="http://design.xn--h1...ai/e3.png?0418" style="display:inline;" />
<a href="http://xn--h1aka1au3...page/Доставка">
<img src="http://design.xn--h1...ai/e1.png?8875" style="display:inline;" />
<a href="http://xn--h1aka1au3...p1ai/feedback">
<img src="http://design.xn--h1...ai/e2.png?9187" style="display:inline;" />
<a href="http://xn--h1aka1au3...i/page/ОТЗЫВЫ">
<img src="http://design.xn--h1...ai/e4.png?1051" style="display:inline;" />

<a href="http://xn--h1aka1au3...ОЖЕННЫЙ-ПЛАТЁЖ" class="m1">
<img class="m2" src="http://design.xn--h1...ai/e3.png?0418" style="display:inline;" />
<script>
$('.m1').hover(
i='';
function(){
i = $('.m2').attr('src');
$('.m2').attr('src')='http://design.xn--h1....png?3538&#39;;
},
function() {
$('.m2').attr('src')=i;
});
</script>

#6 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 10 Март 2013 - 17:23

Просмотр сообщенияhamer750 (10 Март 2013 - 16:55) писал:

Не работает!<img src="http://s342966.store...2/pustota2.png" style="display:inline;" />
<a href="http://xn--h1aka1au3...ЖЕННЫЙ-ПЛАТЁЖ">
<img src="http://design.xn--h1...ai/e3.png?0418" style="display:inline;" />
<a href="http://xn--h1aka1au3...page/Доставка">
<img src="http://design.xn--h1...ai/e1.png?8875" style="display:inline;" />
<a href="http://xn--h1aka1au3...p1ai/feedback">
<img src="http://design.xn--h1...ai/e2.png?9187" style="display:inline;" />
<a href="http://xn--h1aka1au3...i/page/ОТЗЫВЫ">
<img src="http://design.xn--h1...ai/e4.png?1051" style="display:inline;" />

<a href="http://xn--h1aka1au3...ОЖЕННЫЙ-ПЛАТЁЖ" class="m1">
<img class="m2" src="http://design.xn--h1...ai/e3.png?0418" style="display:inline;" />
<script>
$('.m1').hover(
i='';
function(){
i = $('.m2').attr('src');
$('.m2').attr('src')='http://design.xn--h1....png?3538&#39;;
},
function() {
$('.m2').attr('src')=i;
});
</script>
Пожалуйста, скажите что вам нужно сделать на сайте. Просто, этот код нельзя отредактировать т.к форум отформатировал ссылки и теперь если скопировать их в редактор кода то ссылки просто не будут работать нужно вставлять код в тег [CODE] ScreenShot 484.png

#7 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 17:31

Снизу под банером 4 кнопки,хотел чтобы при наведении на них они выделялись.инфэшн.рф

#8 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 17:37

Просмотр сообщенияKoderhan (10 Март 2013 - 17:23) писал:

Пожалуйста, скажите что вам нужно сделать на сайте. Просто, этот код нельзя отредактировать т.к форум отформатировал ссылки и теперь если скопировать их в редактор кода то ссылки просто не будут работать нужно вставлять код в тег [CODE] Прикрепленный файл ScreenShot 484.png
Снизу под банером 4 кнопки,хотел чтобы при наведении на них они выделялись.инфэшн.рф

#9 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 10 Март 2013 - 19:29

В шаблоне HTML найдите строчки 

<img src="http://design.xn--h1aka1au3a.xn--p1ai/e3.png?0418" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e1.png?8875" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e2.png?9187" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e4.png?1051" style="display:inline;">
и замените на 

<img class="img_icon" src="{ASSETS_IMAGES_PATH}e3.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e1.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e2.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e4.png" style="display:inline;">
Затем в файл main.css добавьте блок 
.img_icon:hover {border:1px solid red; border-radius:5px;}

#10 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 20:12

Просмотр сообщенияStasya (10 Март 2013 - 19:29) писал:

В шаблоне HTML найдите строчки 

<img src="http://design.xn--h1aka1au3a.xn--p1ai/e3.png?0418" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e1.png?8875" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e2.png?9187" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e4.png?1051" style="display:inline;">
и замените на 

<img class="img_icon" src="{ASSETS_IMAGES_PATH}e3.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e1.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e2.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e4.png" style="display:inline;">
Затем в файл main.css добавьте блок 
.img_icon:hover {border:1px solid red; border-radius:5px;}
Спасибо ,работает)

#11 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 10 Март 2013 - 20:27

Просмотр сообщенияhamer750 (10 Март 2013 - 20:12) писал:

Спасибо ,работает)
Только в IE не отображает этот эффект выделения...почему?

Просмотр сообщенияStasya (10 Март 2013 - 19:29) писал:

В шаблоне HTML найдите строчки 

<img src="http://design.xn--h1aka1au3a.xn--p1ai/e3.png?0418" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e1.png?8875" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e2.png?9187" style="display:inline;">
<img src="http://design.xn--h1aka1au3a.xn--p1ai/e4.png?1051" style="display:inline;">
и замените на 

<img class="img_icon" src="{ASSETS_IMAGES_PATH}e3.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e1.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e2.png" style="display:inline;">
<img class="img_icon" src="{ASSETS_IMAGES_PATH}e4.png" style="display:inline;">
Затем в файл main.css добавьте блок 
.img_icon:hover {border:1px solid red; border-radius:5px;}
Только в IE не отображает этот эффект выделения...почему?

#12 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Март 2013 - 09:01

Просмотр сообщенияhamer750 (10 Март 2013 - 20:27) писал:

Только в IE не отображает этот эффект выделения...почему?


Только в IE не отображает этот эффект выделения...почему?

Что именно у вас не отображается в ie ? Можете дать ссылку на страницу? Или приложить скриншот

#13 hamer750

hamer750

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений

Отправлено 11 Март 2013 - 14:24

Просмотр сообщенияmiyako (11 Март 2013 - 09:01) писал:

Что именно у вас не отображается в ie ? Можете дать ссылку на страницу? Или приложить скриншот
Рамка вокруг картинок не отображается в IE.инфэшн.рф  кнопки под банером

#14 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 11 Март 2013 - 14:27

Просмотр сообщенияhamer750 (11 Март 2013 - 14:24) писал:

Рамка вокруг картинок не отображается в IE.инфэшн.рф  кнопки под банером

либо удалите строчку в шаблоне HTML
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

либо попробуйте изменить ее на
<meta http-equiv="X-UA-Compatible" content="IE=10"/>

Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. → Изменение общей стилистики
  6. Privacy Policy