PDA

View Full Version : Image replacement techniques


WotNow
12-09-2010, 02:55 AM
Hi I have been googling around for the latest developments in image replacement techniques. Most of the discussions I am finding are from 2008 and earlier. Can anyone point me in the right direction to the latest developments in this? Thanks

jmichae3
12-09-2010, 07:50 AM
best one I saw was done by a book, danny goodman's javascript bible 2nd edition (not later editions). should be cheap enough to get. doesn't matter if they are kind of worn by now. I use mine a lot. another method is to give the image an id and switch out the src like this:

<img id="imageid" src="/images/img1.jpg" width="200" height="200" alt="click here" onclick="support_click()">
...
<script type="text/javascript">
function switchimg(n) {
var srcs = new Array("/images/img1.jpg","/images/img2.jpg","/images/img3.gif","/images/img4.png");
var widths = new Array(200,400,200,320);
var heights = new Array(200,300,150,240);
var onclicks = new Array("support_click()","sales_click()","custsvc_click()","webmaster_click()");
//make sure n is within range
while (n < 0) { n += count(a); }
if (n+1 > count(a)) {n %= count(a);}
//switch image
document.getElementById('imageid').setAttribute('s rc', srcs[n]);
document.getElementById('imageid').setAttribute('w idth', widths[n]);
document.getElementById('imageid').setAttribute('h eight', heights[n]);
document.getElementById('imageid').setAttribute('o nclick', onclicks[n]);
}
</script>


if you want, you can even set the onclick function dynamically.

WotNow
12-09-2010, 08:08 AM
Thanks for that .. not really very good with my javascript .. so not really understanding what is going on with this script. I am wanting to replace my h1, h2 and h3 tags with images without losing accessibility or seo ranks.

Corrosive
12-09-2010, 08:32 AM
Hi Amanda. Still only one method I know of; http://www.corrosiveonline.co.uk/tutorials_images_for_headers.php

gentleone
12-09-2010, 08:34 AM
I am wanting to replace my h1, h2 and h3 tags with images without losing accessibility or seo ranks.

You could look into Cufon (http://cufon.shoqolate.com/generate/) or even Typekit (http://typekit.com). You won't have accessibility issues with them..

But of course you can also use a CSS sprites image for all your self-made headings and use a high negative text-indent value to throw of your normal heading text off the screen. Search engines and screen readers can still read your headings this way.

gentleone
12-09-2010, 08:46 AM
Here's what I did with headings (and other images) for a site I'm working on at the moment,

CSS sprites image (just one big transparent png image):

*image link removed*

And then I use the CSS background-position property to position them on the right spot in the HTML.

The site:
*url removed*

jmichae3
12-09-2010, 08:55 AM
count(a) should be a.length
got my php mixed up with my javascript...

jmichae3
12-09-2010, 08:58 AM
<img id="sellid" src="/pix/sell/roses/pict0009.jpg" alt="rose, babys breath, pink cloth"><br>
<input type="button" value="Previous" onclick="switchprev()">
<input type="button" value="Next" onclick="switchnext()">
</form>
<script type="text/javascript">
var n=0;
function switchimg() {
var srcs = new Array();
var alts = new Array();
srcs[0]="/pix/sell/roses/pict0009.jpg"; alts[0]="roses, babys breath, pink cloth";
srcs[1]="/pix/sell/roses/PICT0012.jpg"; alts[1]="rose, white lace";
srcs[2]="/pix/sell/roses/PICT0013.jpg"; alts[2]="rose, white satin";
srcs[3]="/pix/sell/roses/PICT0014.jpg"; alts[3]="rose, white satin, different satin layout";
srcs[4]="/pix/sell/roses/PICT0017.jpg"; alts[4]="rose, cyan satin";
srcs[5]="/pix/sell/roses/PICT0019.jpg"; alts[5]="rose, white print cloth";
srcs[6]="/pix/sell/roses/PICT0020.jpg"; alts[6]="rose, white print cloth, front view";
srcs[7]="/pix/sell/roses/PICT0022.jpg"; alts[7]="3 roses, white print cloth, front view";
srcs[8]="/pix/sell/roses/PICT0024.jpg"; alts[8]="3 roses, white print cloth, side view";
srcs[9]="/pix/sell/roses/PICT0025.jpg"; alts[9]="3 roses, white satin";
srcs[10]="/pix/sell/roses/PICT0026.jpg"; alts[10]="rose, babys breath, white cloth";
//make sure n is within range
while (n < 0) { n += srcs.length; }
if (n+1 > srcs.length) {n %= srcs.length;}
//switch image
document.getElementById('sellid').setAttribute('al t', alts[n]);
document.getElementById('sellid').setAttribute('sr c', srcs[n]);
}
function switchnext() { n++; switchimg(); }
function switchprev() { n--; switchimg(); }

gentleone
12-09-2010, 09:09 AM
<img id="sellid" src="/pix/sell/roses/pict0009.jpg" alt="rose, babys breath, pink cloth"><br>
<input type="button" value="Previous" onclick="switchprev()">
<input type="button" value="Next" onclick="switchnext()">
</form>
<script type="text/javascript">
var n=0;
function switchimg() {
var srcs = new Array();
var alts = new Array();
srcs[0]="/pix/sell/roses/pict0009.jpg"; alts[0]="roses, babys breath, pink cloth";
srcs[1]="/pix/sell/roses/PICT0012.jpg"; alts[1]="rose, white lace";
srcs[2]="/pix/sell/roses/PICT0013.jpg"; alts[2]="rose, white satin";
srcs[3]="/pix/sell/roses/PICT0014.jpg"; alts[3]="rose, white satin, different satin layout";
srcs[4]="/pix/sell/roses/PICT0017.jpg"; alts[4]="rose, cyan satin";
srcs[5]="/pix/sell/roses/PICT0019.jpg"; alts[5]="rose, white print cloth";
srcs[6]="/pix/sell/roses/PICT0020.jpg"; alts[6]="rose, white print cloth, front view";
srcs[7]="/pix/sell/roses/PICT0022.jpg"; alts[7]="3 roses, white print cloth, front view";
srcs[8]="/pix/sell/roses/PICT0024.jpg"; alts[8]="3 roses, white print cloth, side view";
srcs[9]="/pix/sell/roses/PICT0025.jpg"; alts[9]="3 roses, white satin";
srcs[10]="/pix/sell/roses/PICT0026.jpg"; alts[10]="rose, babys breath, white cloth";
//make sure n is within range
while (n < 0) { n += srcs.length; }
if (n+1 > srcs.length) {n %= srcs.length;}
//switch image
document.getElementById('sellid').setAttribute('al t', alts[n]);
document.getElementById('sellid').setAttribute('sr c', srcs[n]);
}
function switchnext() { n++; switchimg(); }
function switchprev() { n--; switchimg(); }



I believe you're missing her point here, jmichae3. She wants to use nice fonts (images) for her headings instead of the usual web-safe fonts.

What you post is some kind of javascript slide show.

jmichae3
12-09-2010, 09:38 AM
there is a collection of fonts that are usable by the web, and visibone.com has a laminated list of them, what they look like, what platforms they work on, and percentage probably availability on that platform (by size of icon).

if you have an interesting font you want to use, and it's on your computer or you are purchasing it, but nobody else has it, I suggest you do an image. png's have a transparency and alpha capability (but no alpha on IE), and they would probably be just the thing for fonts. drop shadows are difficult though.

jmichae3
12-09-2010, 09:39 AM
say - maybe you can render it as an SVG using an embed element...

WotNow
12-10-2010, 06:52 AM
Hi thanks for all your responses, wow! I have been using negative text indent for ages to achieve image replacement but it does fail the CSS ON / Images OFF issue.

The cufon and typekit look really interesting and I will look into them, thanks.

Gentle One thanks! I gather that sprites work best on menu items rather than h tags?

gentleone
12-10-2010, 10:58 AM
it does fail the CSS ON / Images OFF issue.
Indeed... at that point it will fail, but I if I look at my AWstats from severall sites I made, the percentage from users that has disabled images in their browser are very low... so I can live with that :)

Gentle One thanks! I gather that sprites work best on menu items rather than h tags?
I don't agree with that... especially if you work on a site where you use intensively the CSS background-image property, eg. lets say hundred times, a sprite image can reduces those 100 HTTP request to 1 HTTP request which result into a faster page load.

On the other hand Cufon or Typekit are the future, so it would be a good move to have a look into these options.

WotNow
12-10-2010, 11:15 AM
Thanks for the clarification!