Last Updated
Viewed 15 Times
           

I've got the following problem I can't wrap my head around: For an image I created a pseudo image map via CSS to have styled tooltips which works as follows:

#map {
             margin:0;
             padding:0;
             width:800px;
             height:838px;
background:url(http://prntscr.com/q4nl0i) 
top left no-repeat #fff;
             font-family:"Segoe UI", arial, helvetica, sans-serif;
             font-size:10pt;
         }

         #map li {
             margin:0;
             padding:0;
             list-style:none;
         }

         #map li a {
             position:absolute;
             display:block;
                background:url(https://prnt.sc/q4no1g);
                text-decoration:none;
             color:#fff;
         }

         #map li a span { display:none; }

         #map li a:hover span {
             position:relative;
             display:block;
             width:200px;
             left:10px;
             top:-20px;
             border:1px solid #ea7d30;
             background:#323232;
             padding:5px;
              filter:alpha(opacity=80);
             opacity:0.8;
           }

         #map li a:hover span b {
             color: #ea7d30;
           }

         #map a.gsa {
             top:84px;
             left:19px;
             width:128px;
             height:67px;
         }
<html>
<head>


</head>

<body class="main">
<ul id="map">
     <li><a class="gsa" href="#"><span><b>GSA</b><br>
         F&uuml;gen Sie die GSA-Nummer aus der MRL per Drag &amp; Drop ein.
         </span></a></li>


</ul>
</body>

Now I would like to insert a link into this tooltip (for the term "GSA-Nummer"). Nested links are not allowed, that is clear. Does anyone have an idea how I could accomplish this (preferably CSS/HTML only)?

In this fiddle : http://jsfiddle.net/peey/bbseQ/1/ , i have tried to hyperlink a triangle made by css (using this snippet), which is basically left border of an element.

In the fiddle, as you can see, the actual area which is hyper-linked includes the red area shown in the second shape.

I am looking for a method with which i can hyperlink only the visible area or the right border. I think it might be possible using jQuery or plain JavaScript or even some other JavaScript library, but I'm not sure how.

Also, is there any way that HTML image maps could be used with elements, because if they can be, the i can use them to define the area to be hyperlinked.

Thank you.

Here is the html code :

<body>
I just want to link green, visible area    
<a href="#"><div class="arrow-right"></div></a>
But the actual hyperlinked area includes red:
<a href="#"><div class="arrow-right"></div></a>

<style>
.arrow-right{
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;    
    border-left: 60px solid green;
}

a:last-child .arrow-right{
    background:red;
}
*{margin:10px;}
</style>
</body>

I'm building an e-mail for a client with a html map. However I can't seem to get the blue line around links (after they are clicked) to disappear.

I need help.

<p> <br>
      <img alt="Hogan" src="http://lsa5.0.assets.s3.amazonaws.com/wp-content/uploads/2014/12/club_DEM_HK-LifeStyleAsia.jpg"
        style="border-style: none"
        usemap="#map1417501545030"><map
        border:="0"
        border-color="transparent"
        id="map1417501545030"
        name="map1417501545030"
        usemap="#map1417501545030]">
        border:="0" <area alt="" border="0" coords="300,115,347,132" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&amp;c=20&amp;mc=click&amp;pli=11769974&amp;PluID=0&amp;ord=%%CACHEBUSTER%%"
          shape="alt=&quot;&quot;"
          target="_self"
          title="">
        <area alt="" border="0" coords="9,925,631,1527" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&amp;c=20&amp;mc=click&amp;pli=11769971&amp;PluID=0&amp;ord=%%CACHEBUSTER%%"
          shape="rect"
          target="_self"
          title="">
        <area alt="" border="0" coords="329,681,632,911" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&amp;c=20&amp;mc=click&amp;pli=11769977&amp;PluID=0&amp;ord=%%CACHEBUSTER%%"
          shape="rect"
          target="_self"
          title="">

So the goal here is to have an image map setup using HTML that allows for linking from one part of the image to another part inside the same image. What I am facing here is all the information is in the same infographic which is like three pages of scrolling to move through. Can I set a link at the top of an image and have it jump down to another part of the same image?

I have a work around with the single infographic is broken into several graphics stacked and than additional maps set up for the individual images but its ugly. I have a cut down example of what I am working with below. Is there a way to have the links image2 or image3 shown below target inside the same image and not have to target individual images like what currently shown?

<div><img src="https://tfstest.service-now.com/sys_attachment.do?sys_id=4beacd3bdb489304c84b782bbf96197f" alt="" usemap="#Map" /> <map id="Map" name="Map"> 
<area title="" alt="" coords="28,133,525,155" shape="rect" href="#image2" />
<area title="" alt="" coords="29,160,237,178" shape="rect" href="#image3" />
<area title="" alt="" coords="28,180,330,201" shape="rect" href="#image4" />
</map></div>
 <div><a id="image2"></a><img style="align: baseline;" src="attachment.do?sys_id=c7" /></div>
    <div><a id="image3"></a><img style="align: baseline;" src="attachment.do?sys_id=93" /></div>
    <div><a id="image4"></a> <img style="align: baseline;" src="attachment.do?sys_id=97" /></div>

Similar Question 5 (2 solutions) : Hyperlink map on image with css

Similar Question 6 (1 solutions) : Interactive CSS Image Map

Similar Question 7 (1 solutions) : Image map captions in css?

Similar Question 9 (1 solutions) : How to add image map in css?

cc