Known Participant

Answered

Responsive Image Map Not Working

Forum|Forum|4 years ago
May 20, 2021
3 replies
5635 views

Hi All,

I know that image maps are not recommended because they are not responsive, however, I was not able to find a way to go about making a clickable image without doing this. I have followed along different videos using the Matt Stow jQuery plugin, which I see many people are successful with making responsive image maps on Dreamweaver. I have followed all the steps, yet my webpage is still not responsive with clickable hotspots... any solutions? The image is responsive, but my hotspots are not resizing for different screen sizes like its supposed to. My site can be accessed at gatewaygreenbuilding.com. I would be more than happy to provide screenshots and copies of my code if it will help you help me. Thanks in advance!

-Melanie

Some of the links I used:

https://github.com/stowball/jQuery-rwdImageMaps

https://www.youtube.com/watch?v=zauLcSpxC1E

https://www.youtube.com/watch?v=o7Lj0MayO2I

This topic has been closed for replies.

Correct answer osgood_

You can just use an anchor tag approach as the graphic is fairly simple and there is only a few hotspots. I've taken your map and worked out the hotspot co-ordinates for you. All you need to do is link the pages to the hotspots by changing the # in the anchor tag to point to the appropriate pages you want to link to.

Your graphic is massive so you need to reduce that in size otherwise it takes too long to download plus it's good practice to use underscores to join the words together in the name of your image file, like below, instead of leaving spaces.

Gateway_Hall_Whole_Building_Graphic.jpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive image map</title>
<style>
.graphic {
position: relative;
width: 75%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
display: block;
}
.graphic a {
position: absolute;
height: 11.8%;
width: 7.7%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
}
.greenRoof {
top: 9.8%;
left: 48.3%;
}
.lobby {
top: 27.8%;
left: 2%;
}
.outdoorSpace {
top: 48.3%;
left: 16.6%;
}
.rainGarden {
top: 83.2%;
left: 5.3%;
}
.dormRoom {
top: 19.5%;
left: 65.4%;
}
.solarPanels {
top: 33%;
left: 86.9%;
}
.sawtoothFacade {
top: 80.6%;
left: 82.4%;
}
.bikeParking {
top: 83.3%;
left: 55.1%;
}
</style>
</head>
<body>
	
<div class="graphic">
<a href="#" class="greenRoof"></a>
<a href="#" class="lobby"></a>
<a href="#" class="outdoorSpace"></a>
<a href="#" class="rainGarden"></a>
<a href="#" class="dormRoom"></a>
<a href="#" class="solarPanels"></a>
<a href="#" class="sawtoothFacade"></a>
<a href="#" class="bikeParking"></a>
<img src="http://gatewaygreenbuilding.com./images/Gateway%20Hall%20Whole%20Building%20Graphic.jpg" alt="">
</div>
	
</body>
</html>

O

osgood_Correct answer

Legend

You can just use an anchor tag approach as the graphic is fairly simple and there is only a few hotspots. I've taken your map and worked out the hotspot co-ordinates for you. All you need to do is link the pages to the hotspots by changing the # in the anchor tag to point to the appropriate pages you want to link to.

Your graphic is massive so you need to reduce that in size otherwise it takes too long to download plus it's good practice to use underscores to join the words together in the name of your image file, like below, instead of leaving spaces.

Gateway_Hall_Whole_Building_Graphic.jpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive image map</title>
<style>
.graphic {
position: relative;
width: 75%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
display: block;
}
.graphic a {
position: absolute;
height: 11.8%;
width: 7.7%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
}
.greenRoof {
top: 9.8%;
left: 48.3%;
}
.lobby {
top: 27.8%;
left: 2%;
}
.outdoorSpace {
top: 48.3%;
left: 16.6%;
}
.rainGarden {
top: 83.2%;
left: 5.3%;
}
.dormRoom {
top: 19.5%;
left: 65.4%;
}
.solarPanels {
top: 33%;
left: 86.9%;
}
.sawtoothFacade {
top: 80.6%;
left: 82.4%;
}
.bikeParking {
top: 83.3%;
left: 55.1%;
}
</style>
</head>
<body>
	
<div class="graphic">
<a href="#" class="greenRoof"></a>
<a href="#" class="lobby"></a>
<a href="#" class="outdoorSpace"></a>
<a href="#" class="rainGarden"></a>
<a href="#" class="dormRoom"></a>
<a href="#" class="solarPanels"></a>
<a href="#" class="sawtoothFacade"></a>
<a href="#" class="bikeParking"></a>
<img src="http://gatewaygreenbuilding.com./images/Gateway%20Hall%20Whole%20Building%20Graphic.jpg" alt="">
</div>
	
</body>
</html>

B i r n o u

Community Expert

Your graphic is massive so you need to reduce that in size otherwise it takes too long to download
By @osgood_

Are you kidding... the image is just 10 749 per 7113 pixels. why would you like to downsize it ????

O

osgood_

Legend

Your graphic is massive so you need to reduce that in size otherwise it takes too long to download
By @osgood_

Are you kidding... the image is just 10 749 per 7113 pixels. why would you like to downsize it ????

By @B i r n o u

4.6mb, I'd double that at least, if not more......just to be sure the image will load......... by this time next week.

Nancy OShea

Community Expert

More advanced coders use Scalable Vector Graphics (XML code) instead of old fashioned image maps. See link below for code and working demo.

Responsive SVG Image Map

https://jsfiddle.net/NancyO/6k3v4ge1/21/

Post back if you have any questions.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Hi All,

I know that image maps are not recommended because they are not responsive, however, I was not able to find a way to go about making a clickable image without doing this.

=======

@defaultvbg7e1p6wn4g

Making images into hyperlinks is HTML 101. No complicated scripts or workarounds required. Just basic HTML code with the <a> tag is all that's needed. Copy & paste the following code into a new, blank document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Links</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {max-width:100%}

a img {border-bottom:2px solid transparent}

a img:hover, a:active, a:focus {border-bottom:2px solid red; }
</style>
</head>
<body>
<h1>Hyperlinks with Images</h1>
<p><a href="https://google.com" title="Google"><img src="https://dummyimage.com/100x100" alt="placeholder"></a>&nbsp;
<a href="https://bing.com" title="Bing"><img src="https://dummyimage.com/100x100" alt="placeholder"></a>&nbsp;
<a href="https://example.com" title="Example"><img src="https://dummyimage.com/100x100" alt="placeholder"></a>&nbsp;
</p>
<p>That's all there is to it.</p>
</body>
</html>

Incidentally, understanding code fundamentals is compulsory for building websites. Start with these links. Read chapters, do the code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded