Member Avatar for vivek vermani
vivek vermani 0 Newbie Poster

I have code like this that changes the image when the user clicks on the image.

document.getElementById('searchButton').src='search_gryd.gif';

But its not working with safari browser.

Can anyone suggest reason or resolution for this.

Thanx

  • 1 Contributor
  • 0 Replies
  • 105 Views

Dani AI

Generated

Quick diagnostics and reliable fixes for 's Safari image-swap issue.

Most failures come down to timing, element type, caching, or an incorrect path. Verify the image element actually exists when the script runs (move the script after the image in the HTML or run it on DOMContentLoaded). If the target is a CSS background or an <input type="image">, the change method differs from an <img> element. Use the inspector/console in Safari to confirm the element id and to try the change interactively — that isolates DOM vs. code timing problems.

Practical, cross-browser approaches to try:

  • Run your swap only after DOM ready (example below uses a generic id).

    window.addEventListener('DOMContentLoaded', function () {
var img = document.getElementById('myImage');
if (img) img.setAttribute('src', 'search_gryd.gif?v=2');
});

  • If caching seems to mask changes, append a short query string (eg. ?v=2) so Safari requests the new file. Preload the replacement to avoid flicker:

    var preload = new Image();
preload.src = 'search_gryd.gif';

Checks to perform if issues persist:

  • Confirm server returns the correct MIME type (image/gif) and a 200 response.
  • Ensure the path and filename case match the server (case-sensitive on many hosts).
  • If the element is not an <img>, update style.backgroundImage instead.
  • Watch Safari’s Web Inspector console for JS errors.

References: MDN docs for the image src property and for setAttribute/DOMContentLoaded are helpful starting points: HTMLImageElement.src, Element.setAttribute, DOMContentLoaded.

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.