Member Avatar for kv79

Hi
I want to divide the image into several links ,so it was long time ago when i do that ,so i can't remember where to find that .
Where to find something about dividing the image into links ?

Thank you for your effort of reading .

  • 2 Contributors
  • 2 Replies
  • 83 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

Good find and correct ID from — the HTML feature you want is the image map. A few practical notes that are useful today: image maps are simple and fine for static graphics, but coords are pixel-based (not responsive) and need accessible labels. For scalable or interactive layouts prefer SVG hotspots or CSS-overlaid anchors.

Example (basic image map):

<img src="banner.jpg" usemap="#banner" alt="Site banner">
<map name="banner">
  <area shape="rect" coords="0,0,200,100" href="/section1" alt="Section 1">
  <area shape="rect" coords="200,0,400,100" href="/section2" alt="Section 2">
</map>

For responsive designs convert the graphic to SVG and place clickable shapes inside the SVG (they scale with viewBox). If you must keep HTML image maps, a small JS helper like the image-map-resizer project will recalculate coords on resize.

Accessibility and testing tips: always supply meaningful alt on <area>, ensure links are keyboard-focusable, and test with a screen reader and keyboard only. Verify hit targets are large enough on touch devices. For reference on the native elements and attributes see MDN’s map and area docs and the image-map-resizer utility on GitHub for responsive fixes.

Relevant reading:

Member Avatar for peter_budo

Yes you found the tutorial, for anybody else it is called image map and done with simple html

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.