https://i.stack.imgur.com/Ojd0Q.pngI need assistance in reverting a div's background image back to its default state using the onmouseleave method. Below is the HTML and JS code I have been working on:
<script type="text/javascript">
function displayImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG") {
console.log(document.getElementById("viewer"));
document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';
}
}
function leaveImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName != "IMG") {
document.getElementById("viewer").style.backgroundImage: URL();
}
}
}
Both displayImage and leaveImage functions are called within the same HTML div tag like this:
<div class="thumbnails" onmouseover="displayImage(event)">
In summary, my goal is to reset the background image of the "viewer" div element to its default once the mouse leaves it, by using separate functions for each action. Is my approach correct? Thank you for your assistance!
Thank you all!