Mouseover Menu & Image Hotspots – Javascript & CSS Event Listener

Last Updated: July 24, 2023By

JavaScript and CSS. The basic process would be to create an event listener for the hover state of each hotspot. When the hover state is activated, a corresponding function would be triggered that highlights the respective side menu item.

<!DOCTYPE html>
<html>
<head>
<style>
.hotspot1 {
	background-color: #F00;
	height: 150px;
	width: 150px;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.hotspot2 {
	background-color: #FF0;
	height: 150px;
	width: 150px;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.hotspot3 {
	background-color: greenyellow;
	height: 150px;
	width: 150px;
	box-sizing: border-box;
}
#menu {
	display: block;
	width: 200px;
	float: left;
	box-sizing: border-box;
}
.mapimage {
	display: block;
	width: 500px;
	float: left;
	box-sizing: border-box;
	border: 1px solid #000;
}
/* CSS to highlight a menu item */
.highlight {
	background-color: yellow;
}
/* CSS to outline a hotspot */
.outline {
	border: 5px solid #000; 
}
</style>
<script>
	window.onload = function() {
		// Assume hotspot1, hotspot2 are the class names of your hotspots, 
		// and menuitem1, menuitem2 are the class names of your menu items.
		var hotspots = ['hotspot1', 'hotspot2', 'hotspot3'];
		var menuItems = ['menuitem1', 'menuitem2', 'menuitem3'];

		for (let i = 0; i < hotspots.length; i++) {
			(function(i) {
				var hotspot = document.getElementsByClassName(hotspots[i])[0];
				var menuItem = document.getElementsByClassName(menuItems[i])[0];

				// Add mouseover event listener to each hotspot
				hotspot.addEventListener('mouseover', function() {
					// Highlight the corresponding menu item
					menuItem.classList.add('highlight');
				});

				// Add mouseout event listener to each hotspot
				hotspot.addEventListener('mouseout', function() {
					// Remove the highlight from the corresponding menu item
					menuItem.classList.remove('highlight');
				});

				// Add mouseover event listener to each menu item
				menuItem.addEventListener('mouseover', function() {
					// Outline the corresponding hotspot
					hotspot.classList.add('outline');
				});

				// Add mouseout event listener to each menu item
				menuItem.addEventListener('mouseout', function() {
					// Remove the outline from the corresponding hotspot
					hotspot.classList.remove('outline');
				});

			})(i);
		}
	};
</script>
</head>
<body>
     <!-- Your PHP content goes here -->

    <!-- Here's an example of a simple menu -->
    <div id="menu">
		<a href="https://ibm.com" class="menuitem1">Menu Item 1</a><br>
		<a href="https://ibm.com" class="menuitem3">Menu Item 3</a><br>
		<a href="https://ibm.com" class="menuitem2">Menu Item 2</a><br><br>
    </div>

    <!-- The hotspots -->
	<div class="mapimage">
    <div class="hotspot1">Hotspot 1</div>
    <div class="hotspot2">Hotspot 2</div>
	<div class="hotspot3">Hotspot 3</div>
	</div>
	
</body>
</html>

editor's pick

latest video

news via inbox

Nulla turp dis cursus. Integer liberos  euismod pretium faucibua

you might also like