Member Avatar for samarthashok

Hello

I have an jpeg image and on the right hand side of the image are some names which i want to make active,

Kindly let me know how to go about it ?

Actually, i am making a website for a restaurant, and he has given me an image with food and names written on it and i have to amke them point to a pdf showing the selected food item.

I dont know active script, kindly suggest me something and fast.
Thanking you all.

  • 3 Contributors
  • 2 Replies
  • 100 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by alishiraz89

Dani AI

Generated

A concise, practical checklist for making the names on your JPEG clickable (links to PDFs), plus quick examples and gotchas. : two common, reliable ways are an HTML image map (works without JavaScript) or absolutely positioned clickable hotspots (better for responsive layouts). As hinted, image maps are the simplest; 's Flash idea is not suitable today — Flash is end-of-life and unsupported by modern browsers (see Adobe).

Example: simple image map (no JS required)

<img src="menu.jpg" alt="Restaurant menu" usemap="#menu">
<map name="menu">
  <area shape="rect" coords="350,50,500,90" href="pdfs/lasagna.pdf" alt="Lasagna" target="_blank" rel="noopener">
  <area shape="rect" coords="350,95,500,135" href="pdfs/spaghetti.pdf" alt="Spaghetti" target="_blank" rel="noopener">
</map>

Notes: coords are pixel values relative to the image's natural size; this is easiest for a fixed-size image.

Example: responsive hotspots using CSS (percent values scale with image)

<div style="position:relative; max-width:800px;">
  <img src="menu.jpg" alt="Restaurant menu" style="width:100%; display:block;">
  <a href="pdfs/lasagna.pdf" aria-label="Lasagna" style="position:absolute; left:65%; top:10%; width:20%; height:6%;"></a>
  <a href="pdfs/spaghetti.pdf" aria-label="Spaghetti" style="position:absolute; left:65%; top:22%; width:20%; height:6%;"></a>
</div>

Practical tips

  • Get coordinates from an image editor (GIMP/Photoshop) or an online image-map tool.
  • For touch devices, make hotspots at least ~44–48 px high — enlarge invisible areas if needed.
  • If you must use image maps with responsive images, either keep the image fixed-size or apply a small script to scale coords on resize (or use the CSS-overlay approach).
  • Include alt on areas and aria-label on anchors for accessibility.
  • Test on desktop and mobile and open PDFs with target="_blank" + rel="noopener".

More reference on image maps: MDN — map element. For why Flash should be avoided: Adobe Flash Player end-of-life.

Recommended Answers

All 2 Replies

Member Avatar for alishiraz89

Use Flash to create a images with links if you dont want to use anything else

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.