Hotspots broken?

New Here ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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.

Views

116

Likes

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

Adobe Community Professional , May 09, 2022 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..

Likes

Translate

Translate
Adobe Community Professional ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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

Likes

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
New Here ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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.

Likes

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
Adobe Community Professional ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

LATEST

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.

 

image.png

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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