image-replacement

How to replace inline text with images using CSS.

Hi, I'd like to replace the text ("Word 1 Word2 Word3 Word4") in the following HTML with images, using CSS. I'd like the images to appear in-line horizontally too, as the text would. <div id="aSentence"> <p> <span id="word1">Word1&nbsp </span> <span id="word2">Word2&nbsp </span> <span id="word3">Word3&nbsp ...

Uncontrollable jumping - sIFR lagging

sIFR-replaced text shows normally, hiding regular text without issue. However, every time a page loads on the site I'm developing, the replaced text takes forever (forever in internet-time, that is) to load, and jumps vertically on the page with a long lag before finally settling into place. ...

Best Image Replacement Technique

What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure... <div id="menu"> <ul> <li><a href="#">Test</a></li> <li><a href="#">Tester</a></li> <li><a href="#">Testing Testi...

Image change on link click without hardcoding locations?

What I'm trying to do is let a visitor change an image by clicking through a set of thumbnails. However, the problem I'm running into is that I really want to get away from hardcoding the image locations into the script. I want the script to be portable enough to run on any old page and set of images as long as the IDs used match. Is the...

Updating Image (runat server) Src using jQuery/ASP.NET

Hi there, I'm trying to update the source of an image using jQuery. The problem is that the img is running server side as its initial source is being set on load. Here is the ASPX/HTML: <h2><asp:Label ID="lblTitle" runat="server" /></h2> <img id="largeImg" runat="server" width="320" alt="Large Image" /> <p class="thumbs"> <a id="img...

Is this a "valid" css image replacement technique?

I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz) HTML <img id="my_image" alt="my text" src="images/small_transparent.gif" /> CSS #my_image{ background-image:url('images/my_image.png'); width:100px; height:100px;} Pro's: image alt text is be...

IE6 PNG Replace: How to make a nested <a> clickable?

For the purposes of this question, consider this: <div class="has_transparent_png"> <a href="foo.html"> <span> <img src="logo.jpg" /> </span> </a> </div> The Problem: In IE6, the <a> is not clickable. Here's the PNG replace I'm using: .has_transparent_png { background-image: url(images/transpar...