Skip to main content
E
edinav24550678
Known Participant
July 10, 2023
Answered

Making hotspots on a responsive image

  • July 10, 2023
  • 2 replies
  • 1334 views

Hello all,

 

Presently I'm working on renewing a static website into a responsive one using Bootstrap and responsive grid lay-out. I've stumbelt on a problen regarding a page with hotspots:. If I try to place them in the old-fahsioned way it wont' work with responsive image.

Here's an image of the old design followed by the code:

<td valign="top" bgcolor="#E0F1F2">
      <h4 class="head">        Haren (click Groningen)<br>
      <span class="paragraph">In Haren the public library is in  possession of a special Dickens colletion which is housed in a Victorian period room called <i>the Dickens Room.</i></span></h4>
      <p><span class="head">Leeuwarden / Ljouwert (click Friesland)</span><br>
      <span class="paragraph">      Almost certain the only place in the world where you can find a Dickens&#8217; novel translated into Frisian (Frysk)</span></p>
      <h4 class="head">Deventer (click Overijssel)<br>
        <span class="paragraph">Every year during Christmas time there is a Dickens street festival <i>(Dickens Festijn)</i> in Deventer.</span></h4>
      <p><span class="head">Braamt (click Gelderland)</span><br>
        <span class="paragraph">There is also a lovely small Dickens Museum in the amusement park Het Land van Jan Klaassen, Braamt. Originally it was situated in Bronkhorst, the smallest city in The Netherlands.</span>
      </p>
      <h4 class="head">Overveen (click Noord-Holland)<br>
      <span class="paragraph">The <i>charter of the Haarlem Branch</i> of the Dickensfellowship can be seen on the wall in restaurant "Kraantje Lek <i>(on the wall on the left-hand side of the staircase)</i>.</span></h4>
      <p><span class="head">Laren (click in the south-eastern region of Noord-Holland above Utrecht)<br>
        </span><span class="paragraph">In this theatre in Victorian style the audience can see how Charles Dickens held his famous public readings, 
         original glass plates are shown by means of the magic lantern.</span><br>
      </p>
      <h4 class="head">Dordrecht (click Zuid-Holland)</span><br>
        <span class="paragraph">Dordrecht is the birth-place of the 19th century painter Ary Scheffer. He painted a portret of Charles Dickens while he stayed in Paris.
          In the <i>Dordrechts Museum</i> a number of paintings of this romantic painter are on display.<br />
      </span></h4>
      <h4 class="head"><br />
        </h4>
      <blockquote>&nbsp;      </blockquote></td>
    <td width="406" valign="top" bgcolor="#E0F1F2"><div align="center">
      <p><br>
        <img src="afbeeldingen/kaart-nederland.GIF"alt="Map of the Netherlands" width=351 height=416 border=0 align="absmiddle" usemap="#plaatsenmenu" class="image">
        <map name="plaatsenmenu">
          <area shape="rect" coords="268,33,328,53" href="https://www.dickensroom.nl" target="_blank" alt="Haren">
          <area shape="rect" coords="199,54,254,74" href="https://koninklijkfriesgenootschap.nl" target="_blank" alt="Friesland">
          <area shape="rect" coords="257,163,312,178" href="http://www.vvvdeventer.nl/nl/site/dickens_festijn" target="_blank" alt="Deventer">
          <area shape="rect" coords="215,199,270,219" href="https://dickensmuseum.nl" target="_blank" alt="Braamt">
          <area shape="rect" coords="114,109,164,134" href="https://www.kraantjelek.nl" target="_blank" alt="Tetterode">
          <area shape="rect" coords="88,210,128,235" href="https://www.dordrechtsmuseum.nl" target="_blank" alt="Dordrecht Museum">
          <area shape="rect" coords="-179,1096,-141,1118" href="#">
          <area shape="rect" coords="133,190,148,191" href="#">
          <area shape="rect" coords="153,177,174,196" href="http://www.dickenstheater.nl" target="_blank">
          <area shape="rect" coords="327,249,328,251" href="#">
          <area shape="rect" coords="147,180,149,181" href="#">
        </map>
        </p>

Here's the link to the actual page:https://www.dickensfellowship.nl/dutch_connections.html 

 

Here's an image of the new page, followed by the html-code and css-stylesheet:

		<!-- InstanceBeginEditable name="inhoud" -->
		<div class="row main">
				<div class="col-md-6 article">
						<h5>Haren 	(<em>click Groningen</em>)</h5>
								<p>In Haren the public library is in possession of a special Dickens colletion which is housed in a Victorian period room called the Dickens Room.</p>
									<h5>Leeuwarden / Ljouwert (<em>click Friesland)</em></h5>
						<p>Almost certain the only place in the world where you can find a Dickens’ novel translated into Frisian (Frysk)</p>
						<h5>Deventer (<em>click Overijssel</em>)</h5>
												<p>Every year during Christmas time there is a Dickens street festival (Dickens Festijn) in Deventer.</p>
												<h5>Braamt (<em>click Gelderland</em>)</h5>
												<p>There is also a lovely small Dickens Museum in the amusement park Het Land van Jan Klaassen, Braamt. Originally it was situated in Bronkhorst, the smallest city in The Netherlands.</p><br>
												<h5>Overveen (<em>click Noord-Holland</em>)</h5>
						<p>The charter of the Haarlem Branch of the Dickensfellowship can be seen on the wall in restaurant&#8220;Kraantje Lek&#8221; (on the wall on the left-hand side of the staircase).</p>
												<h5><br>
												Laren (<em>click in the south-eastern region of Noord-Holland above Utrecht</em>) </h5>
								<p>In this theatre in Victorian style the audience can see how Charles Dickens held his famous public readings, original glass plates are shown by means of the magic lantern.</p>				
												<h5>Dordrecht (<em>click Zuid-Holland</em>)<br>
												</h5>
												<p>Dordrecht is the birth-place of the 19th century painter Ary Scheffer. He painted a portret of Charles Dickens while he stayed in Paris. In the Dordrechts Museum a number of paintings of this romantic painter are on display.</p><br><br>
				</div>
				<div class="col-md-6 aside">
<img src="../afbeeldingen/kaart-nederland.GIF" alt="" width="351" height="416"/>
<p class="light2 text-center">Map of The Netherlands with hotspots</p>
				</div>
		</div>

 

@charset "UTF-8";    

    body {
    background-color:white;
	padding-bottom: 90px;
}
.top{
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 10px;
}

.main{
	margin: 10px;
}
.top {
	border-bottom: thin double #FF3734;
}
.article {
padding-left: 20px;
padding-top:20px;
background-color:white;
 min-height: 300px;
 overflow-y: auto;
}

.aside {
background-color: #801B19;
	padding-top: 12px;
	padding-right: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	border: thick solid #FF3734;
	border-radius: 12px;
	overflow-y: auto;
	clear: both;
}

h1{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bolder;
	line-height: 2em;
}

h2{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bold;
	line-height: 1.5em;
	text-decoration: none;
}

h3 {
	color: #000000;
	text-align: left;
	font-weight: bolder;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(2,2,2,1.00);
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(93,47,46,1.00);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(247,246,235,1.00);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(120,33,31,1.00);
}

.navbar-light .navbar-toggler {
  color: rgba(68,63,1,1.00);
  border-color: rgba(68,63,1,1.00);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data&colon;image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-expand-lg{
		background-color: #E6AAA9;
	}

.footer {
   background-color: #FF6C6A;
	padding-top:20px;
	text-align: center;
	bottom: 0;
	left:0;
	position: fixed;
	height: 70px;
	display: block;
	width: 100%;
}

.header {
	padding-top: 15px;
	padding-right: 2%;
	padding-left: 2%;
	background-color: #E6AAA9;
	position: static;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 120px;
	width: 100%;
	
}
.navbar {
	background-color: #E6AAA9;
}
	.imageclass1{
max-width: 40%;
	height: auto;
	float: right;
	margin: 15px;
	padding: 5px;
	border: medium double #804140;
	}

	.imageclass2{
	width:70%;
	height: auto;
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	}
.slide-image{
	height: 70%;
	width: auto;
	display:block;
	margin-left:auto;
	margin-right: auto;
}

h1{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bolder;
	text-align: center;
}
h2{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bold;
	text-align: center;
}
h3 {
	color: #000000;
	text-align: left;
	font-weight: bolder;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	color: #000000;
	font-weight: lighter;
	text-align: left;
}

p.light {
	color: #FFFFFF;
	font-weight: 400;
	text-align: center;
	font-variant: small-caps;
	line-height: 30px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
}

p.light2{
	color:#F7F6EB;
	font-size: 16px;
}
h4 {
	color: #FFFFFF;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-align: center;
	font-style: normal;
	letter-spacing: 3pt;
}
h5 {
	color: #0D0D0D;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-weight: bold;
	line-height: 27px;
}
h6 {
	color: #000000;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
a:link{
	color:#804140;
}
a:visited{
	color:#AD2810;
}
a:hover{
	color:#8C8303;
	font-style: bolder;
}
a:active{
	color:#97224B;
	font-style:bold;
}
a.foot:link{
	color: #262401;
}
a.foot:visited{
	color: #091D3E;
}
a.foot:hover{
	color:#801E1E;
	font-weight: 600;
}
a.foot:active{
	color:#E9E6CF;
}

a.rb:link{
	color: hsla(1,55%,78%,1.00);
	text-decoration-line: underline;
}
a.rb:visited{
	color: darkturquoise;
}
a.rb:hover{
	font-weight: 500;
	text-decoration: none;
}
a.rb:active{
	color:cornflowerblue;
	font-weight: 500;
}
	  
.btn-searcher {
	background-color: #E6AAA9;
	border: thin solid #804140;
	padding: 5px;
	margin-left: 5px;
height: 38px;
width: 38px;
}
.btn-searcher:hover { 
	background-color: #FF3734;
}
.btn-searcher:focus{
	background-color: #804140
}

.alert-info{
	margin-bottom: 5px;
	background-color: #DCDDCD;
	margin-top:5px;
	margin-right: 5px;
	margin-left: 15px;
	padding: 4px;
}
h5 {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	font-weight: bold;
	text-align: left;
}
.quote {
	font-style: italic;
	font-size: 16px;
}
.img-thumbnail.img-fluid {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border: thin groove #FF6C6A;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	margin-bottom: 8px;
}
.pagination  {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	text-align: center;
}
.sub-background{
	background-color: hsla(0,13%,75%,0.70)
}
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width:280px) and (max-width: 414px){
	body{
		padding-bottom: 90px;
	}
	.imageclass1{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top:10px;
	margin-bottom: 10px;
	float:none;
	}
	h1{
		font-size:30px;
		line-height: normal;
	}
	h2{
		font-size: 25px;
		line-height:normal;
	}
	
	h3{
	font-size: 25px;
	line-height: 40px;
}
	h4{
		font-size: 20px;
		letter-spacing: 1px;
	}
	h5{
		font-size: 12pt;
		line-height: 18pt;
	}
	h6{
		font-size: 12pt;
		line-height: 15pt
	}
p.light{
	font-size: 15px;
	line-height: 15px
}
p{
	font-size:16px;
}
	
	.header{
		height: 90px
	}
	.footer{
		padding-top: 5px;
		height: 90px;
	}
	.navbar-brand {
	width: 110px;
	height: auto;

	}
	.imageclass1{
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
}
@media screen and (min-width: 576px){
	.footer{
		height: 110px;
		padding: 10px;
	}
	.navbar-brand{
		width: 125px;
		height: auto;
	}
	.header{
		height: 105px;
	}
	
	body{
		padding-bottom: 120px;
	}

@media (min-width: 768px){
	.footer{
		height: 60px;
		padding-top: 15px;
	}
	h6{
		font-size: 15px;
	}
	body{
		padding-bottom: 70px;
	}
}

@media screen and (min-width: 992px){
	h6{
		font-size: 18px;
	}
	.nav-item{
		font-size: 14px;
	}
	.form-control{
		width: 120px;
	}
	}

@media screen and (min-width:1200px){
	.navbar-brand{
		width: 150px;
		height: auto;
	}
	.main{
		margin-top: 30px;
	}
	.form-control{
		width: 160px;
		margin-left:8px;
	}
	.nav-item{
		font-size: 17px;
	}
}
}
.text.left {
}
.ight2 {
}

How can I place a responsive image with hotspots that keep in place? The old-fahsioned way doesn't work, as I soon discovered.

Here is a suggested solution I found on the internet:

https://codepen.io/w3collective/pen/PoZeJvy 

It seems logical, but it doesn't tell how to find the position of the hotspots on the image in percentages. I also prefer to keep the hotspots invisible. (clikcing on the province's name should be enough for directions)

 

Any one got a good solution? Or should I go for a static image?

 

Thanks in advance for your anwers!

 

    This topic has been closed for replies.
    Correct answer osgood_

    Thanks for your reply Oswood, I will give it a try tomorrow. By the way, the provinces names are already part of the image, I don't need to position them. I think I will put the hotspots on the locations of the actual towns and places.

     

    Greetings,

    Edina


    quote

    By the way, the provinces names are already part of the image, I don't need to position them. I think I will put the hotspots on the locations of the actual towns and places.

     

    Greetings,

    Edina


    By @edinav24550678

     

    Yes you could opt to just overlay transparent anchor tags over the names on the image. I was more thinking along the lines of the image text might become very small to read on tablet/smartphone........but try it and review the results.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 10, 2023

    I use SVG for responsive image maps.  See this Fiddle.

     

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      G
      GollumWebmaster
      Participant
      July 19, 2023

      Please tell Adobe that Dreamweaver needs to add proper support for .webp AND .svg formats. Very frustrating to be neglected this much while paying premium prices...

      E
      edinav24550678Author
      Known Participant
      July 19, 2023

      The Dreamweaver online Handbook also needs an update.

      O
      osgood_
      Legend
      July 10, 2023

      Locating the correct percentage position for the hotspot is pure guess work, you have to keep trying  different values until you hit the correct spot on the image, its not that difficult though. 

       

      What is more problematical is if you want the hotspot to be invisible as you would need to position the provinces names OVER the map using anchor tags, instead of being part of the map and thats not really going to work too well. Its best to include some kind of visible icon (much like the codepen example) which the user can click on. This will work much better and be more responsive than strings of text, which will be all different lengths and therefore wont respond so accurately as a small, same size, icon.

       

      The other possible option would be to produce an SVG file of the map and insert clickable links.

      E
      edinav24550678Author
      Known Participant
      July 10, 2023

      Thanks for the reply, Osgood. May I aks how I can produce an SVG-file? Is this an easier solution than the hotspots with ID's?

      Thanks,

      Edina

      O
      osgood_
      Legend
      July 10, 2023
      quote

      Thanks for the reply, Osgood. May I aks how I can produce an SVG-file? Is this an easier solution than the hotspots with ID's?

      Thanks,

      Edina


      By @edinav24550678

       

      No, its not going to be easier than using hotspots as you probably would have to redraw the map in Illustrator and export it as a 'real' SVG file then add the links within the code generated. I'm not an expert on SVG files but a lot of options are available now to manipulate the SVG code to get it to do what is required. Myself, I'd probably just stick to placing the hotspots over the image.

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