Превью JavaScript JavaScript с mouseover

Я пытаюсь использовать событие mouseover на миниатюрах, чтобы увеличить картинку выше. У меня есть три изображения с предварительным просмотром класса, и я пишу функцию upDate(), которая принимает параметр previewPic во внешнем JS-файле, который я хочу изменить фоновое изображение отдельного div в предварительный просмотр миниатюр. 'x' - это div, на который я хочу установить фоновое изображение, 'y' - это то место, где я считаю, что я ошибаюсь. Мой код выглядит следующим образом:Превью JavaScript JavaScript с mouseover

function upDate(previewPic){ 

    x = document.getElementById('image'); 
    y = previewPic.getAttribute('src'); 
    x.style.backgroundImage = url('y'); 
}

источник

2016-03-26 MARyan87

я думаю

x.style.backgroundImage = url('y');

проблема, вы можете попробовать

x.style.backgroundImage = url(y);

источник

2016-03-26 16:37:56

Да, оно не работает для меня тоже. – MARyan87

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

x.style.backgroundImage = 'url(' + y + ')';

источник

2016-03-26 16:40:00 baao

Это сработало. Не могли бы вы объяснить это решение? Я понимаю внешние кавычки, но я стараюсь понять + y + – MARyan87

Вот как вы конкатцируете строку с переменной в js. Всякий раз, когда вы хотите вывести значение переменных вместе с жестко закодированным текстом, вот как это делается. Как в: 'string' + variable + 'string' @MickeyR – baao

x.style.backgroundImage = url('y');

Здесь вы указываете y в качестве строки внутри url(). Вам нужно сконфигурировать varibale, а не строку.

Попробуйте это, он будет работать.

Здесь + знак используется для конкатенации переменных.

x.style.backgroundImage = 'url(' + y + ')';

источник

2016-03-26 16:59:42

Вы должны ввести свой HTML документ Вместо IMG тега формы этого текста, так же, как <img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

Далее вы должны вызвать этот элемент, Javascript или POWERFULL библиотеки JavaScript «Jquery». Вот код (помните, что вы должны сначала включить ваш файл jquery).

следующий введите JavaScript внутри HTML-документа или внешний файл JavaScript, который ваш выбор

$(document).on('mouseover','#img',function(){ 
$('body').css({'background-image':'url("showimageurl")'}); 
return true; 
});

Он работает нормально ...... Я надеюсь, что вы ваш problum будет решен.

источник

2016-03-26 17:03:11 Sidath

function upDate(previewPic){ 
 
    var src = previewPic.getAttribute("src"); 
 
    var alt = previewPic.getAttribute("alt"); 
 
    document.getElementById('image').style.backgroundImage = "url('" + src + "')"; 
 
    document.getElementById('image').innerHTML = alt; 
 
} 
 

 
function unDo(){ 
 
    document.getElementById('image').style.backgroundImage = "none"; 
 
    document.getElementById('image').innerHTML = "MouseOver Image to Display Here."; 
 
}

body{ 
 
\t \t margin: 2%; 
 
\t \t border: 1px solid black; 
 
\t \t background-color: #b3b3b3; 
 
} 
 
#image{ 
 
    line-height:650px; 
 
\t \t width: 575px; 
 
    height: 650px; 
 
\t \t border:5px solid black; 
 
\t \t margin:0 auto; 
 
    background-color: #8e68ff; 
 
    background-image: url(''); 
 
    background-repeat: no-repeat; 
 
    color:#FFFFFF; 
 
    text-align: center; 
 
    background-size: 100%; 
 
    margin-bottom:25px; 
 
    font-size: 150%; 
 
} 
 
.preview{ 
 
\t \t width:10%; 
 
\t \t margin-left:17%; 
 
    border: 10px solid black; 
 
} 
 
img{ 
 
\t \t width:95%; 
 
}

\t <div id = "image"> 
 
\t \t MouseOver Image to Display Here. 
 
\t </div> 
 
\t <img class = "preview" 
 
    src = "img/image1.png" 
 
    alt = "Image 1" 
 
    onmouseover = "upDate(this)" 
 
    onmouseout = "unDo()" 
 
    > 
 
\t <img class = "preview" 
 
    src = "img/image2.png" 
 
    alt = "Image 2" 
 
    onmouseover = "upDate(this)" 
 
    onmouseout = "unDo()" 
 
    > 
 
\t <img class = "preview" 
 
    src = "img/image3.png" 
 
    alt = "Image 3" 
 
    onmouseover = "upDate(this)" 
 
    onmouseout = "unDo()" 
 
    >

источник

2016-05-13 04:14:01 noobninja

Превью JavaScript JavaScript с mouseover

ответ

Смежные вопросы