Попытка изменить изображение баннера при наведении на навигационную ссылку

Question

Я пытаюсь изменить изображение в верхней части моей страницы на другое изображение, когда наведу указатель мыши на ссылку в списке. Есть идеи как это сделать?

Answer 1

при использовании jQuery:

$('#tabbar a').hover(
function(){$('#banner').attr('src',"newimg.png')}
function(){$('#banner').attr('src',"oldimg.png')}
)

, если нет:

вызов для onmouseover:

document.getElementById('banner').src = 'newimage.png'

вызов для onmouseout:

document.getElementById('banner').src = 'olgimage.png'

---

вы также можете использовать спрайты и изменять положение фона, чтобы у вас было меньше ресурсов и изображение не нужно загружать при отображении

Answer 2

Вы также можете использовать CSS Sprite: http://css -tricks.com / 158-CSS спрайтов-/

Просто взгляни на это ...

Оптимизирует количество http запросов и довольно прост в использовании ...

Answer 3

Есть множество способов.Вот простой:

<img id="topImg" scr="image.jpg" />

<a href="#" onmouseover="document.topImg.src='image_over.jpg'"
            onmouseout="document.topImg.src='image.jpg'">Rollover</a>