[Kaffe]

Originally posted by Micke_@Aug 3 2006, 11:46

Vad är det och hur funkar det?

Jag har haft två lösningar på lager. Den ena är så grundläggande så den blev tråkig. Jag "injicerade" ett span-element i alla element som skulle ersättas med en bild, och använder helt enkelt Sheas slutgiltiga förslag.

Är ingen direkt javascript guru, men numera använder jag den här funktionen (JSON-notation, kräver mer eller mindre en EventHandler för att implementeras). Via den slänger vi på en CSS-klass (förutsatt att bilder har laddats in): replaced på alla element. I en CSS-regel specifikt för denna gör man sedan sin image replacement:

Javascript:

var imageReplacement = {
	testImage : new Image,
	tmp : new Date,
	suffix : 0,
	init : function() {
 *this.suffix = this.tmp.getTime();
 *this.testImage.src = 'graphics/blank.png?'+this.suffix;
 *addEvent(this.testImage,'load',this.onload,false);
	}, 
	onload : function () {
 *imageReplacement.replaceThese();
	},
	replaceThese : function() {
 *this.replaceThis(document.getElementById('header').getElementsByTagName('h1'));
 *this.replaceThis(document.getElementById('content').getElementsByTagName('h2'));
	},
	replaceThis : function(objID) {
 *for (var i=0;i<objID.length;i++) { objID[i].className="replaced"; }
	}
};

CSS:

div#header h1.replaced{background: url(../graphics/logo.png) no-repeat;display:block;height:100px;text-indent: -5000px;width:500px;}

För att använda det här scriptet behövs en bild att testa mot. Det är det testimg är där för. Om testbilden, i detta fall blank.png laddas så utförs image replacement.

För en titt på vart jag snappade upp min kod-notation: http://www.dustindiaz.com/json-for-the-masses/ och orginal-varianten av det här scriptet: http://www.quirksmode.org/dom/fir.html. Som synes så använder Koch (Quirksmode) Javascript för att implementera alla bilder. Något jag tyckte kändes fundamentalt fel. En orsak är att jag fortfarande inte sett 100% resultat på att User Agents såsom screen readers eller sökmotorer inte skulle tolka DOM-scripting. Jag har endast sett flyktiga indikationer på att vissa screen readers faktiskt tolkar javascript till en viss del.

Den lösning jag använder, och det krav jag ställer på alla image replacement lösningar är att de fungerar under följande omständigheter:

• CSS-formaterad eller Rå text visas vid Bilder Av
• Text visas vid CSS Av
• Javascript av (eller i a f degraderar tillräckligt bra, vilket de gör, allting som är relaterat till IR hamnar i selectorn med en klass).
• Kan "stängas av" för Print (samma här, man kan stänga av alla Image Replacements helt via ett print-sheet).

Enda nackdelen är att det skapar lite extra flimmer, eftersom man i regel applicerar en event på body, så scriptet ifråga väntar tills body laddat in, innan scriptet utförs. Därav flimmrar rubriker och dylikt till. Vissa kunder kan tänkas ha svårare än andra för detta.