画像プレビューJavaScript with mouseover

Question

サムネイル画像でmouseoverイベントを使用して、上記の拡大画像を表示しようとしています。私は、クラス 'プレビュー'で3つの画像を持っており、別のdivの背景画像をサムネイルプレビューに変更したいという外部JSファイルで、パラメータpreviewPicを使用する関数upDate（）を記述しています。 'x'は私が背景画像を設定したいdivです、 'y'は私が間違っていると信じています。次のように私のコードは次のとおりです。

function upDate(previewPic){ 

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

Answer 1

私は

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

が問題だと思う、あなたはあなたが変数/文字列を代入している方法を変更する必要が

x.style.backgroundImage = url(y); 

Answer 2

を試すことができます

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

Answer 3

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

ここでは、url（）内に文字列としてyを渡しています。文字列ではなく、文字列を連結する必要があります。

これを試してみてください。

ここでは、+という記号を変数に使用します。

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

Answer 4

あなただけ<img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

次のようにあなたはjavascriptやパワフルなJavaScriptライブラリ「jQueryの」によって、この要素をトリガーする必要があり、このテキストHTMLドキュメントの代わりにIMGタグの形式で入力しなければなりません。ここにコードがあります（あなたのjqueryファイルを最初に含めてください）。

次の私は、あなたのproblumが解決されることを願っていたHTML文書やお好み

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

は、それが正常に動作する外部のJavaScriptファイル、...... の内側にあなたのjavascriptを入力します。

Answer 5

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()" 
 
    >