onmouseover и onmouseout изображения не загружаются

0

На моем личном веб-сайте я пытался создать базовую анимацию, используя onmouseover/onmouseout. Первый URL-адрес представляет собой небольшое (50 x 50) изображение с серой шкалой, а второй URL - это одно и то же изображение, но в цвете.

<a><img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"></a>

Код функциональный, но он имеет некоторые проблемы. Я заметил, что как на рабочем столе, так и на мобильном устройстве после щелчка ссылки на изображение изображение исчезает. Имеет смысл, что браузер не будет загружать новые изображения, но мне было интересно, есть ли лучшая альтернатива.

  • 1
    Что представляет собой изображение? Как правило, гораздо лучше использовать CSS для такого рода вещей.
  • 0
    Это значки с логотипами социальных сетей и соответствующие ссылки. В идеале, я бы предпочел, чтобы при нажатии отображалось любое изображение. Вы думаете, что использование hover в CSS решит проблему?
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Как упоминалось в @minitech, вы должны использовать CSS... HTML будет выглядеть примерно так:

<a><div class="my_image"></div></a>

И CSS:

div.my_image {
    width: 50px;
    height: 50px;
    background-image: url('http://www.moo.com/blah.jpg');
}

div.my_image:hover {
    background-image: url('http://www.moo.com/otherblah.jpg');
}
Поделиться
  • 0
    Спасибо! Я попробую и посмотрю, исправит ли это.
0

Лучше всего использовать комбинацию CSS и jQuery для такого рода вещей. Вы можете сохранить изображения в виде отдельных файлов в корневом каталоге вашего сайта или в подкаталоге /img, а затем добавить класс в ссылку на основе события, для которого вы хотите изменить изображение.

Вот несколько быстрых кодов для иллюстрации:

HTML:

<div id="backgroundImg"><a class="img-link" href=""></a></div>

CSS:

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-50x50.png') no-repeat;
    display: block;
}

#backgroundImg a.color {
    background: url('img/color-50x50.png') no-repeat;
}

И jQuery:

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

Таким образом, вы определяете свой контейнер изображений как div, загружаете изображение через CSS в качестве фонового изображения самой ссылки, а затем изменяете имя класса, когда пользователь наводится на элемент.image-link.

Вы можете сделать еще один шаг и объединить два изображения в один спрайт справки 50x100 для повышения производительности. Тогда CSS хотел бы что-то вроде:

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-color-50x100.png') no-repeat;
    background-position: 0 0;
    display: block;
}

#backgroundImg a.color {
    background-position: 0 -50px;
}

Надеюсь, это поможет.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню