“Image Replacement” demo
Denne webside er et layout eksempel med et sidehoved, der er konstrueret med Gilder/Levin Image Replacement teknikken
Websidens html-kode er nogenlunde den samme, som jeg har brugt i mit CSS-layout-eksempel 7.
Det, der er interessant ved dette eksempel er imidlertid det grafiske sidehoved, mere specifikt sidehovedets h1-overskrift. Først html-koden:
<div id="banner">
<h1 onclick="location.href='/'">
<span></span>Webdesign 101</h1>
</div>
Bemærk her:
- onclick event handleren der er hæftet på h1-overskrfiten, og som giver hele overskriften egenskab som et link tilbage til forsiden.
- Det tomme span-element, der er indsat lige før overskriftens tekst.
Stylesheet'et for denne h1-overskrift der således ud:
#banner h1 { font-size:40px; width:750px; height:150px; margin:0; font-family:"trebuchet ms",verdana,tahoma, sans-serif; position:relative;} #banner h1 span { background-image:url(irheader.jpg); background-repeat:no-repeat; position:absolute; width:100%; height:100%;}
- h1-overskiften skal have en absolut højde og bredde.
- h1-overskiften skal have position:relative.
- Det tomme span-element skal fylde h1-overskiften ud i såvel bredde som højde.
- Dette span-element forsynes med et baggrundsbillede, hvis højde og bredde svarer til sidehovedets højde og bredde, som bestemt ved målene på h1-overskriften.
- Derved kommer denne baggrund til at skjule h1-teksten i en visuel browser med grafikvisning. Slås grafik-visning fra, vil teksten kunne ses.
- Det samme vil ske, hvis du bruger browserens "Vis udskrift"-funktion.
Denne side er senest opdateret: 1. September, 2006