Member Avatar for sathyakumar23

Can give more links in one image? is it possible?

  • 3 Contributors
  • 3 Replies
  • 174 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by webhawk

Dani AI

Generated

Three practical ways to give multiple links in one infographic — pick by shape complexity, responsiveness needs, and accessibility:

As noted, HTML image maps are simple and work without extra DOM. Use them for a small number of rectangular/circular/polygon hotspots, but be aware that coords are pixel values and do not automatically adapt when the image is resized. That means you’ll need a small script to recalculate coordinates on resize for responsive layouts.

<img src="infographic.jpg" usemap="#mymap" alt="Infographic">
<map name="mymap">
  <area shape="rect" coords="10,20,110,70" href="/link1" alt="Link 1">
</map>

As suggested, overlay elements give more control. Place clickable <a> elements absolutely inside a position:relative container and use percent-based left/top/width/height so hotspots scale with the container. This approach makes styling, focus states, and touch-size control easier. Ensure each hotspot is an actual link (not just a div), has an accessible label (aria-label or visible text), and meets a minimum touch target (about 44px).

<div class="infographic" style="position:relative;">
  <img src="infographic.jpg" alt="">
  <a href="/link1" class="hotspot" style="position:absolute;left:12%;top:25%;width:18%;height:10%;" aria-label="Link 1"></a>
</div>

For irregular shapes and perfect scaling, use inline SVG with linked shapes — it scales crisply, supports complex polygons, and is easier to make keyboard/screen-reader friendly (use <title>/<desc> and proper focus styles).

Decide like this: static desktop graphic with few rectangular areas -> image map; responsive/touch-first with styled hover/focus -> percent-positioned anchors; complex shapes or high-res scaling -> SVG. Test resizing, keyboard tab order, screen readers, and touch targets. Common pitfalls: mismatched coordinates after CSS transforms, z-index blocking hotspots, and invisible links without accessible text.

Recommended Answers

All 3 Replies

Member Avatar for Albert Pinto

Create absolute positioned divs... and position them wherever you want over the infographic.... simple...

In jquery write click event... I mean on click of that particular div (particular section of the infographic).... window.location="any_page.php"

For proper positioning of absolute divs, make sure the parent div, I mean the one which contains the infographic has its position attribute defined in css.... I mean define its position as relative, fixed or whatever... the child divs will get positioned accordingly to parent..

Simple!!

Edited by Albert Pinto
Member Avatar for sathyakumar23

we can use image maping?
HTML Image Map has been around all this while, and yet not many web pages r using it when it comes to single image with multiple links. It's really handy and fast for web designers or developers to create multiple "Hot Spots" linking within a single image, without slicing any image for linking.For instance, your client has given you a list of sponsors and he wants each of the logo to be linked to the sponsor's web page on his website. You may want to try out Image Map, it will make your job much easier.

Edited by sathyakumar23
commented: just because something exists, does not make it valuable. Think why is an image map not often used ? -3
Member Avatar for webhawk

Yes, image mapping has been around a long time. I've used it in the past with Dreamweaver. It's a fast and easy way to get the job done but I have also been using absolute positioned divs as well according to my needs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.