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>
.myclass {
position: absolute;
width: 6%;
height: 9.5%;
z-index: 1;
background-color: red;
border-radius: 15px;
color: white;
font-weight: bold;
}<img src="https://images.pexels.com/photos/730803/pexels-photo-730803.jpeg?auto=compress&cs=tinysrgb" style="width: 100%;height: 100%"/>
<p class="highlight"></p>
<a href="#2" title="Point 1 Pointer is here" style="left: 5vw;top: 23.6%;" class="myclass" id="1"></a>
<a href="#1" title="Point 2 Pointer is here" style="left: 73vw;top: 70%;" class="myclass" id="2"></a>Hope this helps you