# Image Hotspots click

**URL:** <https://forum.freecodecamp.org/t/image-hotspots-click/507504>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [May 6, 2022, 9:26am UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504 "2022-05-06T09:26:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Teresa0486](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@Teresa0486](https://forum.freecodecamp.org/u/Teresa0486)\
**Post date:** [May 6, 2022, 9:26am UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504/1 "2022-05-06T09:26:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [May 6, 2022, 9:43am UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504/2 "2022-05-06T09:43:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Teresa0486](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@Teresa0486](https://forum.freecodecamp.org/u/Teresa0486)\
**Post date:** [May 7, 2022, 12:08pm UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504/3 "2022-05-07T12:08:33Z")

</div>

Hi,

Heres the code:

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![javanoob](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@javanoob](https://forum.freecodecamp.org/u/javanoob)\
**Post date:** [May 7, 2022, 2:22pm UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504/4 "2022-05-07T14:22:52Z")

</div>

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.

> **[ToolTip (CSS ONLY)](https://codepen.io/Sickxiczix/pen/wvyMgad)**
>
> ...

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 6, 2022, 2:23am UTC](https://forum.freecodecamp.org/t/image-hotspots-click/507504/5 "2022-11-06T02:23:51Z")

</div>

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