При наведении мыши на изображение в div изменениях

Question

Я хотел бы иметь "ссылки", это не настоящие ссылки, это фактически названия оборудования или что-то, что я хочу просмотреть.

При наведении курсора на этот заголовок я хотел бы изменить изображение, ноя хочу, чтобы после того, как мышь вышла из этого заголовка, там осталось последнее изображение.

У меня есть код, который мне не нравится.Это может быть jquery, css, javascript, я бы реализовал это на WordPress сайте.

Простая идея, что у меня было бы, например:

КАРТИНА ПРОХОДИТ ЗДЕСЬ

Оборудование1: передняя |назад |боковое оборудование 2: передняя |назад |сторона

Сначала Оборудование 1: передняя часть открыта сверху.После наведения мыши на любое другое: спереди, сзади или сбоку изображение будет загружаться, но не изменится, пока я не наведу указатель мыши на другой текст (спереди, сзади или сбоку).

Предварительная загрузка тоже будет в порядке, но она у меня уже есть.Было бы замечательно, что он работает так же, как обычные изображения на WP, поэтому, если я нажимаю на изображение, оно переходит к полноразмерному изображению или ссылке, мышь над изображением дает заголовок (заголовок) и т. Д. Если это невозможно, nvm.

Он должен выглядеть точно так же, как http://www.the -digital-picture.com / Обзоры / Tamron-18-270mm-f-3.5-6.3-Di-II-VC-Lens-Review.aspx , найдите изображение сбольше заголовков под ним, и наведите на них курсор мыши.

У меня есть jquery, который вообще не работает, и код с css, который при наведении мыши меняет картинку, но я не хочу менять при наведении мыши.

JQUERY - Tryout 1 - не работает, проверил, что он загружен

<script type="text/javascript">
  $(document).ready(function() {

    $("#picture_links a").hover(function(){
        var src = $(this).attr("href");
        $("#picture_holder img").attr("src", src);
    })

    $("#picture_links a").click(function(){
        return false;
    })

})
</script>

CSS - другой скрипт, работает, но не так, как я хочу:

/* On mouse image roll over */

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

Answer 1

Они делают это так

function chgimage(imgDocID,imgObjName)
{
    document[imgDocID].src = eval(imgObjName + '.src');
} 

Вы хотите, чтобы это было реальное изображение или фон?

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

Answer 2

использование

jQuery("elementid").mouseover(function() 
{
    var imageId = jQuery(this).attr("imageID");
    var image = jQuery(this).css('background-image');

    var newImageId = imageId++;
    if (newImageId >= 3)
        newImageId = 0;

    var newImage = image.replace(imageID, newImageId);
    jQuery(this).css({ "background-image": "newImage " })

}

это работает, только если ваши изображения названы последовательно. не иметь номера в настоящем имени, кроме порядкового номера и если вы добавите атрибут с именем imageId в ваши divs.