圖像預覽與鼠標懸停的JavaScript

我想在縮略圖圖像上使用鼠標懸停事件以顯示上方的較大圖像。我有三個類'預覽'的圖像，並且正在編寫一個函數upDate（），它需要參數previewPic，在一個外部JS文件中，我想將單獨div的背景圖像更改爲縮略圖預覽。 'x'是我想要設置背景圖像的div，'y'是我相信我會出錯的地方。我的代碼如下：圖像預覽與鼠標懸停的JavaScript

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');

在這裏，您在url（）內傳遞y作爲字符串。你需要將varibale而不是一個字符串。

試試這個會有用。

這裏+符號用於concinerate變量。

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

來源

2016-03-26 16:59:42

您必須在您的HTML文檔而不是IMG標記的形式這樣的文字，就像<img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

接下來你應該觸發此元素的JavaScript或強大的JavaScript庫「jQuery的」。這裏是代碼（記住你應該首先包含你的jquery文件）。

下一個輸入HTML文檔或外部JavaScript文件裏面你的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

回答

相關問題