Image Hotspots click

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.

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

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>

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.