решение для наведения изображения

Question

У меня есть эта разметка:

<a href="assets/1.jpg" class="lightbox" rel="group1">
<img src="images/albums/album1/thumbs/1.jpg" /></a>

И для каждого миниатюры у меня есть изображение при наведении (см. Уменьшенное изображение здесь )

Нормальное изображение - это шкала серого, а наведенное - цветное изображение. У меня вопрос, как правильно добавить разметку при наведении на изображение, потому что в моей галерее есть что-то вроде 40 изображений? Спасибо!

Answer 1

Вы должны использовать Javascript (Jquery или пользовательский код, если хотите) для каждого изображения в событии onmousover.Передайте источник изображения в качестве параметра и просто добавьте, например, _hover.jpg к источнику.В событии onmouseout вы удаляете выхлопную трубу, и на этом все.

Помните, вы должны назвать каждое изображение при наведении на них одним и тем же окончанием (в моем примере это _hover.jpg) и установить для id изображенийих базовое имя (без .fileformat и т. д.)

(вы можете использовать JQuery для определения дополнительных свойств вместо идентификатора)

Примерно так:

<a href="dummy.html">
    <img src="images/basename.png" id="basename"
         onmouseover="showHint(this)"   
         onmouseout="backHint(this)" />
</a>

И Javascript будет выглядеть примерно так:

function showHint(img) {
    img.src = "images/" + img.id + "_hover.png";
}

function backHint(img) {
    img.src = "images/" + img.id + ".png";
}