I have created an image popup which uses javaScript to call different images onClick.
HTML Code snippet for the same as below.
<img onmouseover="imgload();" src="11.jpg">
<img onmouseover="imgbarb();" src="13.jpg">
I use the below javaScript to load the onmouseover function
JavaScript code for 11.jpg
function imgload() {
var imgContainers = document.querySelectorAll('.img-container');
var tooltipElements = document.querySelectorAll('.tooltip');
var popup = document.getElementById('imagePopup1');
var popupOverlay = document.getElementById('imagePopupOverlay1');
var popupImage = document.getElementById('popupImage1');
var closePopupBtn = document.getElementById('closeImagePopupBtn1');
// Show tooltip on hover
imgContainers.forEach((container, index) => {
var tooltip = container.querySelector('.tooltip');
var image = container.querySelector('img');
container.addEventListener('mouseenter', function() {
tooltip.style.display = 'block';
});
container.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
// Open full-size image popup when image is clicked
image.addEventListener('click', function() {
var imageSrc = "11-new.jpg";
popupImage.src = imageSrc;
popup.style.display = 'block';
popupOverlay.style.display = 'block';
});
});
// Close the image popup when clicking the close button
closePopupBtn.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
// Close the image popup when clicking the overlay
popupOverlay.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
}
JavaScript code for 13.jpg
function imgbarb() {
var imgContainers = document.querySelectorAll('.img-container');
var tooltipElements = document.querySelectorAll('.tooltip');
var popup = document.getElementById('imagePopup1');
var popupOverlay = document.getElementById('imagePopupOverlay1');
var popupImage = document.getElementById('popupImage1');
var closePopupBtn = document.getElementById('closeImagePopupBtn1');
// Show tooltip on hover
imgContainers.forEach((container, index) => {
var tooltip = container.querySelector('.tooltip');
var image = container.querySelector('img');
container.addEventListener('mouseenter', function() {
tooltip.style.display = 'block';
});
container.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
// Open full-size image popup when image is clicked
image.addEventListener('click', function() {
var imageSrc = "13-new.jpg";
popupImage.src = imageSrc;
popup.style.display = 'block';
popupOverlay.style.display = 'block';
});
});
// Close the image popup when clicking the close button
closePopupBtn.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
// Close the image popup when clicking the overlay
popupOverlay.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
}
I have around 30+ images. So each time when I wish to create a popup image for a new image, I have to create a new function and then call onmouseover everytime.
I feel it is very cumbersome to manage as it also increases the code.
Is there a simple way to this so I do not have to create a new function every time when I add a new image for popup?
I tried if and else, arrays and other stuff, but it did not work.
6
Answer is based on folowing assumptions:
- The only difference of the
onmouseoverfunctions for all the image is thevar imageSrc - Elements the code means to affect (‘.img-container’) are not added dynamically
The issues:
- Hardcoded imgSrc inside js function – fixed with data attributes
- Using
onmouseovermeans that the functions will be called again and again on every onmouseover event for those images, which will cause tens/hundreds/thousands/… functions executions, and each execution will add more EventListeners – fixed with DOMContentLoaded
Html part:
<img data-popup-src="11-new.jpg" src="11.jpg" />
<img data-popup-src="13-new.jpg" src="13.jpg" />
JS part:
function setupImagePopups() {
var imgContainers = document.querySelectorAll('.img-container');
var popup = document.getElementById('imagePopup1');
var popupOverlay = document.getElementById('imagePopupOverlay1');
var popupImage = document.getElementById('popupImage1');
var closePopupBtn = document.getElementById('closeImagePopupBtn1');
// Attach events to all containers dynamically
imgContainers.forEach(container => {
var tooltip = container.querySelector('.tooltip');
var image = container.querySelector('img');
// Show tooltip on hover
container.addEventListener('mouseenter', function() {
tooltip.style.display = 'block';
});
container.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
// Open full-size image popup on click
image.addEventListener('click', function() {
var imageSrc = image.getAttribute('data-popup-src'); // DIFFERENCE
popupImage.src = imageSrc;
popup.style.display = 'block';
popupOverlay.style.display = 'block';
});
});
// Close popup on button click or overlay click
closePopupBtn.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
popupOverlay.addEventListener('click', function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
});
}
// Call setupImagePopups on DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
setupImagePopups();
});
1