• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Responsive Image Map Not Working

Community Beginner ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

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

 

Views

3.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 20, 2021 May 20, 2021

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

...

Votes

Translate

Translate
Community Expert ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

quote

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

quote

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 ????

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

quote
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

I think what osgood means is web images should be optimized to reduce bandwidth and page load. 

 

I use Photoshop to optimize my raster images before saving them to my local site folder.

File > Export > Export As > JPGFile > Export > Export As > JPG 

 

But whenever possible I prefer math-based SVGs from Illustrator especially for drawings because vectors support scalability without any loss in quality.  And when done right, SVGs yield significantly less bandwidth than JPGs and PNGs. 

 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_GraphicsSource: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

quote

I think what osgood means is web images should be optimized to reduce bandwidth and page load. 

 

 

That's exactly what I meant. I don't know if Birnou was being serious or 'tongue in cheek'. It's sometimes hard to tell given the different language in terms of the geographical location we all come from.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

For sure @B i r n o u was joking. No one in his right mind would condone MB images for a website.

 

I had a look at an SVG version of the image. This brought the file size down from 4.5MB to 285KB

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 22, 2021 May 22, 2021

Copy link to clipboard

Copied

my screens are three wide and two high... and the 10,749 by 7,113 pixel image doesn't manage to be displayed as a 100% image wall... that's how overloaded it is on a browser that only displays on one unique screen... wow... of course I was kidding in my previous post.

 

I personally have been using TinyPNG for a while now, which also preserves transparency even in JPG and the API is fantastic, which lets users load their own images without any specific tools.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

@osgood_ I used the code that you prepared for me and it worked! Thank you so much. I also tried to resize my image to be way smaller. I am very new to Dreamweaver and I orginally made the image file for a 24" x 36" poster, so it was craziness. Thank you all for bringing that to my attention. I was wondering if I could ask you two questions. 1. How do I get the gray shading over the icons to be a lower opacity or not there at all? 2. How would I go about making this for two other images with a couple more icons? Did you just play with the percentages under each icon until it was in the right location? Or is there some way for me to easily replicate what you did on two other images like this. I really appreciate all the help and support! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

To lower the opacity on the icons or remove the opacity completely adjust the following property in the css.

 

background-color: rgba(0, 0, 0, 0.3);

 

0.2 and 0.1 will reduce the opacity and 0 will remove the opacity completely at which point you can just delete the whole background-color line as it serves no purpose.

 

The only way of positioning the hotspots on the image is trial and error but its not that complicated. Its a matter of looking at the icon and visually observing its position. If it is far over to the right of the image then its going to be over 50% to the left, similarly visually observe its position from the top. Get the hotspot in roughly the correct position then its a matter of adjusting the percentages until you have the hotspots in the correct position. 

 

You will need the background color applied to help you see the hotspots when positioning them, once you are happy with the positioning and functionality you can remove the background color.

 

If you run into any issues then post a link to the image and l will have a look at helping you with positioning the hotspots.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

@osgood_ You are amazing. My site is finally up and running with the responsiveness and different pages that I wanted. Now I just need to work on the second layer of the site, but I would not have been able to do it without you. Thank you for taking the time to help me! 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

LATEST
quote

Thank you for taking the time to help me! 🙂


By @defaultvbg7e1p6wn4g

 

No problem............solution solving keeps my mind working, now that I don't code as frequently as I once did.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines