-1

I'm trying to create an image map, formatted so when an area on the map is clicked the browser opens the chosen link in a new tab.

I know to use the target_blank attribute to do this, and this works when I have a specific image as the "button". But I can't figure out how to get it to work on the image map.

The enclosed code works fine as an image map, but I want to include the functionality of having the link open in a new tab.

Here's the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
       <map name="pdx">
         <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
target="_blank" shape="rect" coords="300,200,400,800"> 
      </map>
   </div>
   <p>
       <img src="/1st-stark1852WebCover.jpg" width="1800" alt="pdx_1852"   usemap="#pdx"/>
   </p>
</body>
</html>
Edward Curran
  • 9
  • 1
  • 3

1 Answers1

0

I cannot use your image as it's not made available.

map is not to be added in a div as mentioned in the comment, the area tag is needed and then it works well.

here with the stackoverflow icon with link on a random rect shape.

  <div>
       <map name="pdx">
         <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
target="_blank" shape="rect" coords="100,100,200,200"> 
      </map>
   </div>
   <p>
       <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" width="400" alt="pdx_1852"   usemap="#pdx"/>
   </p>

And as I do not know where you run it, have in mind that some playground like websites where you write such code will prevent links from working. like SO here as well …

      <div>
           <map name="pdx">
             <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
    target="_blank" shape="rect" coords="100,100,200,200"> 
          </map>
       </div>
       <p>
           <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" width="400" alt="pdx_1852"   usemap="#pdx"/>
       </p>
vv01f
  • 362
  • 1
  • 4
  • 21
  • I'll be damned, it worked, but only if "shape" came right after "area" - when I had area href first then shape, etc. it wasn't working. thanks! – Edward Curran May 14 '17 at 17:37
  • just to proofe you wrong on that assumption, go on the jsfiddle link and you will see that is not the case. attribute order does not matter at all in xml. – vv01f May 14 '17 at 17:38
  • weird. well, it works now so I'm stoked. I did notice that I do get some static from cached copies of the links so I have to clear browsing history to make it work sometimes. Also I'm using neocities and perhaps there are some built in functions I'm unaware of. In any case, thanks for the help and samples! – Edward Curran May 14 '17 at 19:05