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
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
...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.
=======
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>
<a href="https://bing.com" title="Bing"><img src="https://dummyimage.com/100x100" alt="placeholder"></a>
<a href="https://example.com" title="Example"><img src="https://dummyimage.com/100x100" alt="placeholder"></a>
</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/
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.
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>
Copy link to clipboard
Copied
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 ????
Copy link to clipboard
Copied
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.
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 > 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_Graphics
Copy link to clipboard
Copied
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.
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
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.
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!
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.
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! 🙂
Copy link to clipboard
Copied
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.