Member Avatar for RazorRamon

I am very new to Javascript... More of a php kinda guy. However I have a question regarding the old explorer browsers. I'm using transparent pngs on my site that rollover when the mouse hovers over them. Obviously the pngs are not looking so hot in the old explorer but looks awesome in chrome, safari, etc.

Option 1

Add Java script or Css to somehow allow old explorer to see the pngs correctly.

Option 2

if option 1 becomes to complicated ask the borrower to upgrade their browser by detecting

Does anybody have a good snippet of code for both options?

  • 3 Contributors
  • 2 Replies
  • 117 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Two practical, low-effort routes that answer ’s options and build on points from and : either apply a targeted fix only for old IE, or detect-and-prompt the user to upgrade. Below are small, tested examples plus trade-offs so the approach can be used years later without guessing.

Option 1 — targeted fix (polyfill / conditional load)
Use a small IE-only polyfill so modern browsers are untouched. A commonly used script is dd_belatedPNG which you load only for legacy IE with a conditional comment:

<!--[if lt IE 7]>
<script src=""></script>
<script>
// apply to images and elements using PNG backgrounds
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]>

If you prefer a pure-CSS hack for a single background image, load an IE-only stylesheet and apply the AlphaImageLoader filter (note: sizing and positioning can be tricky and it’s best for isolated cases):

<!--[if lt IE 7]>
<style>
.logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='crop');
zoom:1; / triggers hasLayout in IE6 /
}
</style>
<![endif]>

Trade-offs: polyfills let you keep your PNGs but add JS and edge-case layout workarounds. AlphaImageLoader can break sprites and scaling.

Option 2 — detect and prompt to upgrade
If IE6/7 usage is tiny, show a lightweight banner asking users to upgrade or offer a basic fallback. Use the browser-update.org snippet to handle many browsers with a maintained banner:

<script src="https://browser-update.org/update.min.js"></script>

Or show an IE-only banner with a conditional comment:

<!--[if lt IE 8]>
<div class="upgrade-banner">This site works best in a modern browser — please upgrade.</div>
<![endif]>

Recommendation
If supporting ancient IE is a business requirement, use the polyfill approach selectively (dd_belatedPNG). If those users are rare, prefer an upgrade banner and keep PNGs for modern browsers. Links: and browser-update.org.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

I am very new to Javascript...

That would definitely explain why you wrongly posted JavaScript question in Java Server Pages (JSP)

Post moved!

Member Avatar for Airshow

Razor,

No amount of javascript or CSS can force a browser to display png images if it is not equipped to do so.

The simplest solution is to use gif images instead. Gifs support animation and transparency but not partial transparency.

If you want to give users of modern browsers the extra benefits of png whilst still providing limited support to older browsers, then you could try a "graceful degradation" approach. In this, failure to load a png would result in a second attempt to load a gif, and would require scripting in javascript, Success of this approach depends on whether the Image.onerror event fires on png failure in older browsers. I expect it does but have not tried it.

Airshow

Edited by Airshow 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.