Hotspots broken?

Report · May 09, 2022

I'm using Dreamweaver 2021 and I'm trying to manipulate a hotspot that someone already created, however, I can't select the hotspot. I can make it display briefly as an outline, and that's it.

Additionally, I can't create new ones either. I can name an image map, but when I click on the mapping buttons, they're unresponsive. Is there some setting I need to adjust? I'm used to a really old version and this is my first time using this one. I'm just really unsure as to why this wouldn't be working out of the box.

Report · May 09, 2022

Are you in Live View by chance?

DW's Image Map controls only work in Design View, they were never ported to the new Live View Editor..

Report · May 09, 2022

I just figured it out. I was in Split View, but I just converted it to Design by clicking around a bit more. This has been a major PITA. Thanks for the reply.

Report · May 09, 2022

Hotspots on images maps are NOT responsive. When the image rescales to fit smaller devices (mobile & tablets), the hotspot coordinates invariably fall out of register with the image below making links unusable to access. For this reason, old fashioned images maps are rarely if ever used anymore.

Most modern web designers use separate images instead of one big map. Another option is to manually code a responsive SVG image map. See example below.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive SVG Image Map</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
width:90%; 
margin:0 auto;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
/**scalable fonts**/
font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
/**SVG Image Map**/
circle:hover, rect:hover, text:hover {
opacity: 1; 
fill:#000;
}
</style>
</head>

<body>
<div class="container">
<h3>Responsive SVG Image Map</h3>

<figure id="myMap">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"> 
<!--bitmap background image-->
<image width="1200" height="800" xlink:href="https://dummyimage.com/1200x800.jpg"> </image>
<!--outbound link--> 
<a xlink:href="https://google.com"><title>Google.com</title>
<!--vector shape-->
<circle cx="200" cy="200" r="150" fill="#ff0" opacity="0.4" /><text x="200" y="225" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Google]]></text>
</a>
<!--2nd outbound link--> 
<a xlink:href="https://example.com"> 
<title>Example.com</title>
<!--vector shape-->
<rect x="460" y="28" rx="40" fill="#f00" opacity="0.4" width="700" height="250"/><text x="800" y="185" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Example]]></text>
</a> 
<!--3rd outbound link--> 
<a xlink:href="https://yahoo.com"> 
<title>Yahoo.com</title>
<!--vector shape-->
<circle cx="450" cy="620" r="150" fill="#f0f" opacity="0.4" /><text x="450" y="634" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Yahoo]]></text>
</a> 
<!--4th outbound link--> 
<a xlink:href="https://bing.com"> 
<title>Bing.com</title>
<!--vector shape-->
<circle cx="990" cy="475" r="150" fill="#0ff" opacity="0.4" /><text x="990" y="500" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Bing]]></text>
</a> 
</svg>
</figure>
</div>
</body>
</html>

IMPORTANT: Toggle to Live View (Ctrl+Shift+F11). SVG images won't display in Design view.

Hope that helps.

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

Adobe Community

Hotspots broken?

1 Correct answer