“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:

  1. onclick event handleren der er hæftet på h1-overskrfiten, og som giver hele overskriften egenskab som et link tilbage til forsiden.
  2. 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%;}
 
  1. h1-overskiften skal have en absolut højde og bredde.
  2. h1-overskiften skal have position:relative.
  3. Det tomme span-element skal fylde h1-overskiften ud i såvel bredde som højde.
  4. 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.
  5. Derved kommer denne baggrund til at skjule h1-teksten i en visuel browser med grafikvisning. Slås grafik-visning fra, vil teksten kunne ses.
  6. Det samme vil ske, hvis du bruger browserens "Vis udskrift"-funktion.

Denne side er senest opdateret: 1. September, 2006

 
Webdesign 101 - Jørgen Farum Jensen