Image Hotspots click

HTML-CSS
1

Hi,
I have an image where a video should pop up on the of a specific spot. I have used area tags to define the coordinates of the spot, but the click is not working properly. The video pop up is working though. I am using HTML,CSS. please guide.

2

You will need to show the code, it’s almost impossible to provide help without knowing what you’ve tried and what isn’t working – a minimal example somewhere like Codepen would be the most useful

3

Hi,

Heres the code:

<!DOCTYPE html>
<html>

<head>
<!-- jQuery cdn link -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
    </script>
<script src="/LiveFeedImage/LiveFeedMap.js"></script>
<style type="text/css">
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 600px;
	text-align: center;
	background-color: #e8eae6;
	box-sizing: border-box;
	padding: 10px;
	z-index: 100;
	display: none;
            /to hide popup initially/
}
.close-btn {
	position: absolute;
	right: 20px;
	top: 15px;
	background-color: #464a4a;
	color: white;
	border-radius: 50%;
	padding: 4px;
	cursor: pointer;
	width: 25px;
}
.video-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.video-container .video {
	height: 28rem;
	width: 50rem;
	margin: 2rem;
	border-radius: 1rem;
	overflow: hidden;
}
.video-container .video .video {
	height: 100%;
	width: 100%;
	object-fit: cover;
	outline: none;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: auto;
}
.ms-rtestate-field h1, h1.ms-rteElement-H1, .ms-rtestate-field h2, h2.ms-rteElement-H2 {
	line-height: 1.4;
	color: white;
}
</style>
</head>

<body>

<link type="text/css" href="/LiveFeedImage/LiveFeedMap.css">
<div class="container" id="main-container">
	<div class="col-12 text-center">
		<img src="/Images/LiveFeedMap/CamLoc.jpg" loading="lazy" usemap="#image-map" class="img-fluid">
		<map name="image-map">
		<area alt="Camera 1" title="CCTV 1" href="#" coords="310,740,53" shape="circle" onclick="togglePopup1()">
		<area alt="Camera 2" title="CCTV 2" href="#" coords="176,691,51" shape="circle" onclick="togglePopup2()">
		</map></div>
</div>
<!-- <button onclick="togglePopup()">show popup</button>   -->
<!-- div containing the popup -->
<div class="content">
	
	<div onclick="togglePopup1()" class="close-btn">
		x </div>
	<h2>CCTV 1 Footage</h2>
	<div class="video-container">
		<div class="video">
			<iframe src="https://www.youtube.com" id="Popup1" onclick="togglePopup1()" width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" target="_top">
			</iframe></div>
	</div>
	
	<div class="content">
		<div onclick="togglePopup2()" class="close-btn">
			× </div>
		<h2>CCTV 2 Footage</h2>
		<div class="video-container">
			<div class="video">
				<iframe src="https://www.youtube.com" id="Popup2" onclick="togglePopup2()" width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" target="_top">
				</iframe></div>
		</div>
	</div>
	<script type="text/javascript">

        // Function to show and hide the popup
        function togglePopup1() {
            $(".content").toggle();
        }
          function togglePopup2() {
            $(".content").toggle();
        }   
          </script>
</div>


</body>

</html>
4

I recently found a way to include ToolTips anywhere on a page when the viewer hovers over that accepts any code within the tooltip. Perhaps it can be the solution for you instead of using javascript.