Skip to main content
M
meekzu
Participating Frequently
May 9, 2022
Answered

Hotspots broken?

  • May 9, 2022
  • 2 replies
  • 474 views

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.

    This topic has been closed for replies.
    Correct answer Jon Fritz

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

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 9, 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
    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    May 9, 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..

      M
      meekzuAuthor
      Participating Frequently
      May 9, 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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices