What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The reliable fix is to put the <img> inside an <a> element and place the destination in the anchor’s href. The image’s src controls which picture is fetched; it does not control navigation. For example:
<a href="https://example.com/destination">
<img src="images/photo.jpg" alt="Description of the destination or image">
</a>If the image is visible but does not respond, inspect the rendered anchor, its URL, and CSS hit testing. If the image is missing, debug the src request separately.
The correct HTML structure for a clickable image
An a element becomes a hyperlink when it has an href. The img element supplies the visual content. The closing </a> must come after the image so the image is part of the link:
<a href="/products/camera.html">
<img src="/images/camera.jpg" alt="View the camera product page">
</a>The HTML Standard states that an anchor without href does not create a hyperlink. A src on the image can successfully load a picture while navigation still fails because no valid anchor destination exists.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Do not wrap only the caption
This markup links the text, not the picture:
<img src="photo.jpg" alt="A mountain">
<a href="/gallery">Open the gallery</a>Move the image inside the anchor when the entire image should be clickable. Also check that the anchor is not nested inside another anchor; anchors cannot contain other anchors.
Use meaningful alternative text
Write alt text that communicates the image’s purpose in the link, such as “View the pricing page.” For a purely decorative image inside a text link, use alt="" and make the surrounding link text understandable. The MDN anchor reference and MDN image reference explain these semantics.
When the image displays but clicking does nothing
- Inspect the rendered DOM. In browser developer tools, verify that the actual
imgnode is a descendant of ananode. - Check for
href. Confirm the attribute is present, spelled correctly, and contains the intended destination.<a>withouthrefis not a link. - Resolve the URL. A relative URL such as
gallery.htmlis resolved from the current document’s folder. A root-relative URL such as/gallery.htmlstarts at the site root. For another site, use a complete URL such ashttps://example.com/gallery. - Identify the pointer target. In the Elements panel, move the pointer over the image and see which element is highlighted. A positioned overlay, modal layer, or transparent element may be above the anchor.
- Review CSS. Search your stylesheets for
pointer-events: none, unusualz-indexvalues, absolute positioning, or an overlay covering the image. Thepointer-eventsreference explains thatnoneremoves an element as the pointer target and lets events pass through to what is underneath. - Test JavaScript handlers. A click listener may call
event.preventDefault(), replace the URL, or stop propagation. Temporarily disable the listener in developer tools or add logging to confirm whether the browser’s normal navigation is being cancelled.
A minimal CSS-safe test
Temporarily remove custom positioning and overlays and try this isolated example:
<style>
.test-link { display: inline-block; }
.test-link img { display: block; width: 240px; height: auto; }
</style>
<a class="test-link" href="https://example.com/">
<img src="https://example.com/image.jpg" alt="Example page">
</a>If this works, reintroduce your layout rules one at a time until the interfering selector is identified.
When the image is broken or missing
A missing picture is an image-loading problem, not proof that the anchor is wrong. Open the image URL directly in a new tab and inspect the browser’s Network and Console panels.
- 404 or similar response: correct the filename, folder, capitalization, or deployment path. Many servers treat
Photo.jpgandphoto.jpgas different files. - Wrong relative location: calculate the path from the HTML document’s URL, not from the project folder on your computer. Use
../images/photo.jpgwhen the document is one directory below the images folder. - Content blocking: extensions, privacy tools, or network policy may block the request. Test in a clean browser profile.
- Link rot or unavailable host: confirm that the remote server still returns an image and that the URL has not moved.
- CORS error: this matters when scripts or a
crossoriginattribute require cross-origin permission. Do not addcrossoriginas a generic repair; configure the image server only when your use case requires cross-origin access. - Invalid image data: a server may return an HTML error page with a 200 status. Inspect the response headers and preview to ensure the body is actually a supported image.
The MDN img documentation covers network failures, content blocking, CORS behavior, and alternative text.
Relative, root-relative, and absolute destinations
| Href | Resolution | Typical use |
|---|---|---|
details.html |
Relative to the current document’s directory | Pages in the same folder |
../details.html |
Moves up one directory, then resolves | Nested page layouts |
/details.html |
Starts at the current site’s root | Stable paths within one domain |
https://example.com/details |
Explicit external URL | Another domain or protocol |
Use developer tools to inspect the anchor’s resolved href property. This shows the full URL the browser will request and often reveals an unexpected directory or missing slash. MDN’s Creating links guide demonstrates relative and full URLs.
Keyboard access and new-tab behavior
Click the anchor with the keyboard: press Tab until it receives focus, then press Enter. An anchor with a valid href should activate without a mouse. If it never receives focus, inspect whether it is actually an anchor, whether a script removed its href, and whether CSS has created an unusual focus order.
If you use target="_blank", tell users that the destination opens in a new tab or window. For security, use rel="noopener" when appropriate:
<a href="https://example.com" target="_blank" rel="noopener">
<img src="photo.jpg" alt="Open the example page in a new tab">
</a>Do not rely on an image alone to communicate an unexpected context change. The MDN anchor documentation covers keyboard activation, allowed content, and new-tab guidance.
Common markup and CSS mistakes
Missing or misspelled attributes
<!-- Wrong: no href, so this is not a hyperlink -->
<a><img src="photo.jpg" alt="Photo"></a>
<!-- Wrong: src does not set the destination -->
<img src="https://example.com/destination" alt="Destination">
<!-- Correct -->
<a href="https://example.com/destination">
<img src="photo.jpg" alt="Destination">
</a>Overlay intercepts the click
Cookie notices, menus, badges, and pseudo-elements can cover a link even when they look transparent. Inspect their boxes, then adjust layout or stacking order. Applying pointer-events: none to a decorative layer can allow clicks through, but never apply it to the anchor itself when the anchor must receive pointer input.
JavaScript changes normal navigation
Framework components sometimes render a visually link-like element as a div, or a handler prevents the default action. Prefer a real a href="..." for navigation and use JavaScript only for additional behavior. Check the Console for exceptions that stop the handler before navigation.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
A repeatable debugging checklist
- Is the image inside the intended
aelement? - Does that anchor have a nonempty, valid
href? - Does the resolved URL point to the intended page or file?
- Is another element covering the image?
- Do computed styles or
pointer-eventsprevent hit testing? - Does a click handler cancel navigation?
- Does the image’s own
srcreturn an image without 404, blocking, or CORS errors? - Can a keyboard user focus the link and activate it with Enter?
Or skip the browser setup
If your goal is to obtain a clean screenshot of a page rather than debug your own markup, ScreenshotNeo returns an image or PDF from one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing result.
For developers, the API supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets, custom viewports, retina scale, PDF paper and page controls, custom CSS and JavaScript, pre-capture clicks, hidden selectors, selector/delay/network-idle waits, request and resource blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
cURL
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));See the ScreenshotNeo documentation for parameters and response headers. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and cost considerations
Keep image files appropriately sized and specify intrinsic dimensions or CSS dimensions to reduce layout shifts. Prefer stable URLs and cache immutable assets. For links, correctness matters more than styling: a simple anchor has negligible overhead, while scripts and overlays add failure points. Test production URLs over HTTPS, because a secure page may block insecure image or destination resources as mixed content.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →For automated captures, choose a cache TTL deliberately, wait for a selector or network idle when content is dynamic, and use asynchronous jobs or bulk capture for larger batches. ScreenshotNeo bills only clean shots; failed loads and cache hits are not billed, with the result exposed in X-Page-Verdict and X-Billed headers.
Frequently Asked Questions
Can an image link to a PDF or download?
Yes. Put the PDF or file URL in the anchor’s href; the image remains the link’s visible content. Whether the browser displays or downloads it depends on the server’s response headers and browser settings.
Why does the hand cursor appear but navigation still fail?
A cursor style does not prove that normal anchor navigation will run. Check JavaScript click handlers for preventDefault(), confirm the resolved href, and watch the Network panel when activating the link.
Should I use a button instead of an image link?
Use an anchor for navigation to a URL. Use a button for an in-page action such as opening a dialog, submitting state, or toggling a panel.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
