Member Avatar for k2k

Any html expert please refer me the code how to make a clickable image which after the click image will be enlarged. thank you.

  • 3 Contributors
  • 2 Replies
  • 75 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by vishwebdesign

Dani AI

Generated

asked for a way to click an image and see it enlarged. posted an old-style image-swap script and mentioned trying a lightbox. Both are workable, but a modern answer balances accessibility, performance, and maintainability.

The simplest, most robust option is a plain link to the full-size file: it works without JavaScript, keeps keyboard and screen-reader behavior natural, and allows mobile users to pinch/zoom. A minimal pattern looks like:

<a href="image-large.jpg" target="_blank" rel="noopener">
  <img src="image-thumb.jpg" alt="Descriptive caption" width="400" height="300" loading="lazy">
</a>

For an in-page overlay with a nicer UI, use a maintained lightbox/modal library rather than rolling a custom swap script. Choose one that supports keyboard control, focus trapping, and ARIA roles (PhotoSwipe and similar projects are actively maintained). When using an overlay, follow the accessible dialog pattern from WAI-ARIA and make sure Escape closes the view and focus returns to the invoking element (see the WAI-ARIA dialog example).

Performance and UX tips: serve responsive images with srcset/sizes, include width/height to avoid layout shift, use loading="lazy" for thumbs, and avoid inline event handlers or global variables. If clicks do nothing, check for CSS z-index/pointer-events interference or that event listeners run after DOM load. For reference on responsive images and HTML semantics, see the MDN guidance on responsive images and the WAI-ARIA dialog pattern.

Recommended Answers

All 2 Replies

Member Avatar for innovativeatul

Here is the javascript which will swap the image so check out and try it. It will surely help you

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "linktoimage"
intImage = 2
return(false);
case 2:
IMG1.src = "linktoimage"
intImage = 1
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="image which you want in intial stage"
onclick="swapImage();">
</BODY>
</HTML>

Member Avatar for vishwebdesign

you can try lightbox..

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.