наведите курсор на текстовую ссылку, чтобы изменить изображение

Question

Я работаю над проектом, и мне нужно разработать несколько простых jquery для переноса текста, который меняет изображение в div позади него.

Смотрите идею здесь - http://sharifabraham.com/projects/

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

Имеет смысл?

Возможно ли это даже с помощью css?

Answer 1

Это всего лишь набросок того, что вы могли бы сделать.При наведении мыши мы создаем новый img, который будет содержать необходимое изображение и добавить его к #slider.Новый img нуждается в абсолютном позиционировании, чтобы появиться поверх предыдущего изображения (нам это нужно для затухания).Когда мышь покидает ссылку, мы просто удаляем img.

Измените ваш HTML следующим образом (добавьте URL-адрес соответствующего изображения в атрибут data):

<a class="hoverlink" data-img="../images/flinders_house.jpg" href="...

И немного jQuery:

var $slider=$('#slider'); //we save the slider
var $defaultimage=$('img', $slider); //and the default image

//mouseenter for the link
$('#projects .hoverlink').hover(function () { 
  var filename=$(this).attr('data-img'); //we get the filename from data-img

  $('<img id="hoverimage" src="'+filename+'" alt="" />')
    .appendTo($slider).fadeIn(500); //append and fade in new image (#hoverimage)

  $defaultimage.fadeOut(500); //fade out default image
}, 
//mouseleave for the link
function () { 
  $('#hoverimage').fadeOut(500, function () { //fade out #hoverimage
    $(this).remove(); //when animation is done, remove it
  });

  $defaultimage.fadeIn(500); //meanwhile fade in original image
});

Также нам нужны некоторые изменения CSS:

/* #hoverimage needs to appear on top of default image */
#slider { position: relative; }
#hoverimage { position: absolute; top: 0; left: 0; z-index: 100; }

ПРИМЕЧАНИЕ : я не учел время загрузки для этих довольно больших изображений,мой код предполагает, что они уже кэшированы.Вы можете выполнить некоторую предварительную загрузку или запустить эффекты затухания только после загрузки изображения (.load()).Последний не надежен в Опере, если я хорошо помню.

Answer 2

Гмц, учитывая, что я понял, что вы хотите:

HTML

<ul id="nav">
    <li><h3><a href="ideas.html">IDEAS</a></h3></li>
    <li><h3><a href="projects.html">PROJECTS</a></h3></li>
    <li><h3><a href="studio.html">STUDIO</a></h3></li>
</ul>

JS

$("#nav").hover(function(){$('#slider').hide();}, function(){$('#slider').show()});