Заменить изображение при наведении курсора на ссылку - PullRequest
Новая
       19

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

1 голос
/ 01 февраля 2012

Я пытаюсь настроить страницу, которая выглядит как на картинке ниже.

Вот часть, которая меня подвешивает ...

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

Я пытался сделать это с чистым CSS и действительно испытывал трудности.

enter image description here

Спасибо за вашу помощь.

Ответы [ 5 ]

4 голосов
/ 01 февраля 2012

Решение JavaScript

HTML: 

<div id="output"></div>
<ul id="nav">
    <li data-href="http://placekitten.com/120/100">Cat 1</li>
    <li data-href="http://placekitten.com/110/100">Cat 2</li>
    <li data-href="http://placekitten.com/130/100">Cat 3</li>
    <li data-href="http://placekitten.com/150/100">Cat 4</li>
</ul>

JavaScript: 

$( nav ).on( 'click', 'li', function () {
    $( this ).addClass( 'selected' ).siblings().removeClass( 'selected' );
    var url = $( this ).data( 'href' );
    $( output ).html( '<img src="' + url + '">' );
});

Демонстрационная версия: http://jsfiddle.net/Kne3d/

Альтернативное решение (чистый CSS)

HTML: 

<div id="output">
    <img id="image1" src="http://placekitten.com/120/100">
    <img id="image2" src="http://placekitten.com/130/100">
    <img id="image3" src="http://placekitten.com/110/100">
    <img id="image4" src="http://placekitten.com/140/100">
</div>

<ul id="nav">
    <li><a href="#image1">Cat 1</a></li>
    <li><a href="#image2">Cat 2</a></li>
    <li><a href="#image3">Cat 3</a></li>
    <li><a href="#image4">Cat 4</a></li>
</ul>

CSS: 

#output img {
    display: none;
}

#output img:target {
    display: inline;
}

Демо-версия: http://jsfiddle.net/Kne3d/3/

Третье решение (чистый CSS, при наведении)

HTML: 

<ul id="gallery">
    <li>
        <span>Cat 1</span>
        <img src="http://placekitten.com/120/100">
    </li>
    <li>
        <span>Cat 2</span>
        <img src="http://placekitten.com/150/100">
    </li>
    <li>
        <span>Cat 3</span>
        <img src="http://placekitten.com/110/100">
    </li>
    <li>
        <span>Cat 4</span>
        <img src="http://placekitten.com/140/100">
    </li>
</ul>

CSS: 

#gallery img {
    display: none;
}

#gallery span:hover ~ img {
    display: block;
}

Liveдемо: http://jsfiddle.net/Kne3d/5/

2 голосов
/ 01 февраля 2012

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

<img id="mainImage"></img>

<ul id="mainImageLinks">
   <li><a href="image1.jpg" />Link 1</a></li>
   <li><a href="image2.jpg" />Link 1</a></li>
   <li><a href="image3.jpg" />Link 1</a></li>
   <li><a href="image4.jpg" />Link 1</a></li>
   <li><a href="image5.jpg" />Link 1</a></li>
</ul>

Тогда вы, очевидно, будете использовать CSS для стилизации элементов, что выходит за рамки вашего вопроса, но будет примерно так: 

#mainImage {
   width: 200px;
   height: 200px;
   border: 1px solid black;
   display: block;
   margin: 10px; 
}

#mainImageLinks a {
   display: block;
   float: left;
   padding: 3px; 
}

Тогда jQuery позаботится обо всем остальном: 

$('#mainImageLinks li a').bind('mouseenter', function() {
   var url = $(this).attr('href');
   $('#mainImage').attr('src', url);
   return false; // prevent the default action on click
});

И вот рабочий пример .

0 голосов
/ 01 февраля 2012

Я не уверен, как это сделать только с помощью css, но вот небольшая небольшая jquery, которая должна вам помочь. 

$("a").each(function(index) {
    $(this).click(function() {
        $("#mainImg").find("img").attr('src', $(this).find("img").attr('src'));
    });
});

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

0 голосов
/ 01 февраля 2012

Вы можете сделать изменение при наведении курсора в CSS с помощью спрайта, :hover и свойства background-position, но я не думаю, что это было бы идеально для такого типа вещей.Решение jQuery было бы лучше.

0 голосов
/ 01 февраля 2012

Попробуйте использовать это руководство. Изменение изображения при наведении . Он имеет реализацию mousehover. Вам нужно будет всего лишь изменить фон: url вместо background-position.

И эта ссылка для вашего клика вроде полной реализации На MouseClick . На самом деле вам нужно всего лишь зарегистрировать событие клика, которое вы хотите пройти по маршруту CSS.

...