onmouseover javascript photo gallery

Question

Я пытаюсь сделать фотогалерею, где фоновое изображение элемента div изменяется на изображение, эскиз которого вы наведите курсор (для этого нельзя использовать jQuery).

Вот мой HTML и JS код:

function displayImage(event) { 
 
    event = event || window.event; 
 
    var targetElement = event.target || event.srcElement; 
 

 
    if (targetElement.tagName == "IMG") { 
 
    document.getElementById("viewer").style.backgroundImage = targetElement.getAttribute("src"); 
 
    } 
 
}

<div id="viewer"> 
 
    <p>Hover over the image to display larger</p> 
 
</div> 
 

 
<div class="thumbnails" onmouseover="displayImage(event)"> 
 
    <div class="thumb-container"> 
 
    <img src="img/267400-R1-E003.jpg" /> 
 
    </div> 
 
</div>

где viewer идентификатор является то, что из сНа элемента я хочу, чтобы мои фотографии появляются, и onmouseover=displayImage вызывается в DIV тег контейнера моих тегов изображений.

Answer 1

Вы должны обернуть СРК изображения в url(), потому что то как CSS background-image работы:

function displayImage(event) { 
 
    event = event || window.event; 
 
    var targetElement = event.target || event.srcElement; 
 

 
    if (targetElement.tagName == "IMG") { 
 
     document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')'; 
 
    } 
 
}

#viewer { 
 
    height: 200px; 
 
    width: 800px; 
 
}

<div id="viewer"> 
 
    <p></p> 
 
</div> 
 

 
<div class="thumbnails" onmouseover="displayImage(event)"> 
 
    <div class="thumb-container"> 
 
     <img src="http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg"> 
 
    </div> 
 
</div>

Answer 2

Использование String.toUpperCase на targetElement.tagName может решить вашу проблему.