Member Avatar for Leratom

I need help, HTML--i have two links, linkA & linkB--when clicking linkA -should display image1 and whn clicking linkB image2 should be displayed.
The trick is they must be displayed in one image tag.
any one who can help with that?
I would appreciate your help.

  • 2 Contributors
  • 2 Replies
  • 96 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short summary: wanted two links to swap a single image. gave a straight-forward, working example and noted preloading to avoid the click delay. The approach works; the following focuses on making it more robust, accessible and future-proof without repeating the exact code already posted.

Prefer progressive enhancement and unobtrusive JS: make each link an actual anchor that points to the image (so the page still works with no JS). Give the main <img> a meaningful alt and explicit width/height to avoid layout shift. Keep behavior JavaScript-driven by reading the anchor href (or a data-* attribute) and update alt if the image meaning changes. Avoid inline onclick handlers so the markup stays semantic and easier to maintain.

Example pattern (works with or without JS):

<img id="mainImg" src="image3.jpg" alt="Default description" width="600" height="400">

<a href="image1.jpg" class="swap" data-alt="Image 1 description">Image 1</a>
<a href="image2.jpg" class="swap" data-alt="Image 2 description">Image 2</a>

<script>
document.addEventListener('click', function(e){
  var a = e.target.closest && e.target.closest('a.swap');
  if (!a) return;
  e.preventDefault();
  var img = document.getElementById('mainImg');
  img.src = a.href;
  img.alt = a.dataset.alt || img.alt;
});
</script>

Extra tips: use a small aria-live="polite" region if screen readers must be notified of the change; handle img.onerror to show a fallback image or message; avoid preloading every image on mobile — instead use a resource hint like <link rel="preload" as="image" href="image1.jpg"> sparingly or rel="prefetch" for lower priority. For responsive needs, prefer srcset/picture. Credit to for the preload idea — the variations above improve accessibility, maintainability and graceful degradation.

Recommended Answers

All 2 Replies

Member Avatar for almostbob 
<img id='bigimage' src='image3.jpg' width=x height=y>
<a onclick="document.getElementById('bigimage').src='image1.jpg';">Image1</a>
<a onclick="document.getElementById('bigimage').src='image2.jpg';">Image2</a>
Edited by almostbob because: n/a
Member Avatar for almostbob

Left stuff out of that code above
clicking as it is will take whatever time to download the images before the image changes, when the link is first clicked

<html><head></head><body><!--bla bla bla -->
<img id='bigimage' src='image3.jpg' width=x height=y>
<a onclick="document.getElementById('bigimage').src='image1.jpg';">Image1</a>
<a onclick="document.getElementById('bigimage').src='image2.jpg';">Image2</a>
<!-- bla bla bla -->
</body>
<script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "image1.jpg";
image2 = new Image();
image2.src = "image2.jpg";
//-->
//]]>
</script>
</html>

loads the images into the tif, after the page is fully displayed (preloading in the head is a bad idea delays page loading) so that when the link is clicked the image displays immediately
any number of images can be loaded into the tif
I think this is better

Edited by almostbob because: n/a
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.