Bildvorschau JavaScript mit mouseover

Question

Ich versuche, ein Mouseover-Ereignis auf Miniaturbilder zu verwenden, um ein größeres Bild oben zu zeigen. Ich habe drei Bilder mit der Klasse 'preview' und schreibe eine Funktion upDate(), die den Parameter previewPic in einer externen JS-Datei verwendet, die das Hintergrundbild eines separaten Div in die Thumbnail-Vorschau ändern soll. 'x' ist das div, für das ich ein Hintergrundbild festlegen möchte, 'y' ist, wo ich glaube, dass ich falsch liege. Mein Code ist wie folgt:

function upDate(previewPic){ 

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

Answer 1

ich denke

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

Problem ist, können Sie versuchen

x.style.backgroundImage = url(y); 

Answer 2

Sie müssen die Art und Weise Sie die Variable/string

Zuordnung sind ändern

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

Answer 3

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

Hier übergeben Sie y als Zeichenfolge innerhalb der URL(). Sie müssen die Varibale nicht mit einer Zeichenfolge verknüpfen.

Versuchen Sie es, es wird funktionieren.

Hier wird + Zeichen verwendet, um die Variablen zu verknüpfen.

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

Answer 4

Sie müssen Ihre HTML-Dokument Statt img-Tag bilden diesen Text eingeben, wie <img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

Als nächstes sollten Sie dieses Element ausgelöst wird, um JavaScript oder Leistungsfähiger JavaScript-Bibliothek "JQuery". Hier ist Code (Denken Sie daran, dass Ihre jquery-Datei zuerst enthalten sein sollte).

geben Sie neben Ihrem Javascript innerhalb des HTML-Dokuments oder externen Javascript-Datei, die Sie wünschen

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

Es wird gut arbeiten ...... Ich hoffe, dass Sie Ihre problum gelöst werden.

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