Kan man legge snarveier til et bilde i en tag eller lignende?

[Anterialis]

Nå spør jeg en del på dette forumet, men vanskelig å søke på alt...

 

Om jeg har en folder som heter iconer, som inneholder forskjellige små bilder (nemlig ikoner) som jeg vil bruke før og/eller etter forskjellige ord i html-fila. Er det mulig å gjøre dette på en enklere måte enn å skrivefeks:

 

<p>Hovedmeny <img src=".../hovedmeny_ikon.png" /></p>

 

Går det ann å legge filer til tagger eller noe sånn at feks <img1> blir ett bilde og <img2> blir bilde nr 2? Ikke akkurat slik, men noe lignende, slik at man slepper å skrive hele filbanen ol. hver gang man skal ha bildet?

 

På forhånd takk =)

[Haraldson]

Du er nok nødt til å referere til bildet hver gang du vil vise det. Enten via CSS eller i HTML.

 

Vurder hvor relevant bildet er for innholdet, om det er der utelukkende for dekorasjon eller om det gir mening å sette det som innhold i HTML. Hvis førstnevnte, bør du heller vurdere å sette som bildene bakgrunn på allerede eksisterende elementer ved hjelp av CSS.

[JohndoeMAKT]

<img> brukes når du skal ha et foto/bilde/illustrasjon eller noe annet hvor bildet i seg selv er viktig eller enkelt sagt noe av hovedinnholdet på siden. Eksempler er bilder i et album og våre avatarer her på forumet. Når bildene er enten en del av det grafiske på siden uten å være relatert til content eller å uten å selv være av verdi f.eks når bildene er for å forbedre synlighet, er en del av navigasjon eller på andre måter bare være supplement til tekst er det å bruke CSS mer korrekt.

( Dette er forøvrig akkurat det Haraldson skrev )

 

Bruker du CSS kan det gjøres på denne måten :

 

<p>Brille Explorer har støtte for <span class="zip-file icon">zip<span>, <span class="torrent-file icon">torrent</span> og <span class="jpg-file icon">jpg</span> i sin hurtigvisning</p>

<p>Last ned et bilde av grensesnittet <a href="asfd.jpg" class="jpg-file icon">her</a>.</p>

 

.icon {

background-position : center left;

background-repeat: no-repeat;

padding-left : 20px;

}

 

.zip-image {

background-image : url( zip.jpg );

}

 

.jpg-image {

background-image : url( jpg.jpg );

}

 

.torrent-image {

background-image : url( torrent.jpg );

}

 

----

 

Personlig hadde jeg ( sett bort fra at jeg ikke hadde lagt inn unødvendig grafikk ) heller brukt javascript til dette da det holder koden mye renere og mer korrekt samtidig som du ikke trenger å for hvert ord alltid sørge for å legge inn tags. Javscriptet hadde da etter at content er loadet f.eks funnet alle a-elementer og for hver filending i href-attributten jeg hadde et ikon for lagt inn et klassenavn på a-elementet tilsvarende de jeg har listet over. Dette kan du selvsagt gjøre for ren tekst også, men det er noe mer arbeid.

Endret 26. mai 2008 av JohndoeMAKT