Member Avatar for chinee

does anyone know how to create alink with an image.

  • 3 Contributors
  • 6 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by RykeTech

Dani AI

Generated

A few practical notes that build on what and already noted.

Wrapping an image inside an anchor is the correct approach (as demonstrated). When links “don’t work” the usual culprits are HTML typos, wrong paths, or CSS/overlay issues. Common specifics: using target="blank" instead of target="_blank" (missing underscore), case-mismatched filenames on a Linux server, a leading slash that points to the site root instead of a relative folder, or an element with pointer-events: none/a high z-index sitting above the image. Debugging steps: open DevTools → Network to catch 404s, and Elements to verify the anchor has the expected href and is not covered by another element.

For a simple responsive gallery, use CSS Grid or Flexbox and make anchors block-level so the whole thumbnail is clickable. Example starter CSS:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.gallery a { display: block; }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

Performance and UX tips: use loading="lazy" on thumbnails, provide srcset/sizes for responsive images, and consider a lightweight lightbox for viewing full-size images without navigating away.

Accessibility and security: always include meaningful alt text (use alt="" only for purely decorative images). When opening links in a new tab use target="_blank" together with rel="noopener noreferrer" to avoid window.opener risks. For authoritative references, see MDN’s documentation on the [a] element and its attributes and MDN’s guide on responsive images: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images.

Recommended Answers

All 6 Replies

Member Avatar for chinee

i found out how. but i am having trouble creating an image gallery

Member Avatar for Arkinder

An example of an HTML/CSS image gallery can be found here.

Regards, Arkinder

Member Avatar for chinee

my links ar not working

Member Avatar for RykeTech

my links ar not working

To link an image you need something like the following:

<a href="http://www.website.com" target="blank"><img src="images/image1.jpg" alt="Descriptive text" /></a>

If they still aren't working, post your code and we'll point you in the right direction.

Member Avatar for chinee

it is working now thanks

Member Avatar for RykeTech

No prob!

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.