htmlkode - bilder click to enlarge

[Balrog11]

hva slags kode kan jeg bruke for å legge inn små bilder på nettsiden min, og at de blir store når man klikker på de? (click to enlarge- opplegg)

[ilpostino]

hvis jeg har skjønt deg riktig lager du bildene som link og når du trykker på bildene så åpnes bildene (aka større utgaver av de samme bildene)

[Balrog11]

aha.. takk

[Chris93]

En mulighet er at du lager en lenke med bilde taggen som tekst. I bilde taggen legger du til bredde og høyde. Dette vil altså åpne bilde i et nytt vindu.

 

Jeg er sikker sikker på hvordan man gjør det i samme vindu, men jeg tror ikek det er med html. Kan sikkert bruke css til deler av dtte også.

 

<a href="bildelink" > <img src="bildelink" width="x antall pixler" heigth=""x antall pixler" /> </a>

[MikkelRev]

Dersom det er mange små bilder som vises på engang eller de er av stor størrelse, bør du absolutt ha to versjoner av bildet, en bilde_fullsize.jpg og en bilde_thumbnail.jpg. For husk at selv om bildene vises som små bilder ved å bruke height eller width, tar de likevel full størrelse og tar like lang tid å laste. Basic syntax blir da feks:

 

<a href="bilde_fullsize.jpg"> <img src="bilde_thumbnail.jpg" width="100px"> </a>

[Lag-en-hjemmeside]

Om du vil ha en mer stilig effekt enn at bildet åpnes i ny fane/vindu, kan du teste Lightbox. Når man klikker på et bilde åpnes det oppå resten av innholdet i samme fane/vindu, og bakgrunnen blir mørkere. Man kan også bla gjennom flere bilder.

[Balrog11]

takk for fine svar:) har lagt til noen bilder nå og dette er koden:

 

så vil jeg gjerne ha beskrivende tekst til bildet, og lurte på om jeg kan få inn det under bildet når jeg gjør bildet stort på noen måte?

 

<a href="stfglito_stor.jpg"> <img src="stfglito_lite.jpg" width="100px"> </a>

<a href="del av frise_stor.jpg"> <img src="del av frise_lite.jpg" width="100px"> </a>

<a href="Død kvinne i rød kiste med himmel og blomster-4_stor.jpg"> <img src="Død kvinne i rød kiste med himmel og blomster-4_lite.jpg" width="100px"> </a>

<a href="konkylie_stor.jpg"> <img src="konkylie_lite.jpg" width="100px"> </a>

<a href="Kvinne med barn i hodet-6_stor.jpg"> <img src="Kvinne med barn i hodet-6_lite.jpg" width="100px"> </a>

<a href="Kvinne med hårsløyfer og barn mrd blått hjerte-5_stor.jpg"> <img src="Kvinne med hårsløyfer og barn mrd blått hjerte-5_lite.jpg" width="100px"> </a>

<a href="Kvinne og barn med hjerner som forbindes-9_stor.jpg"> <img src="Kvinne og barn med hjerner som forbindes-9_lite.jpg" width="100px"> </a>

<a href="Naken blå kvinne med skyer-3_stor.jpg"> <img src="Naken blå kvinne med skyer-3_lite.jpg" width="100px"> </a>

<a href="Pike med hjerne oghjerte som forbindes-7_stor.jpg"> <img src="Pike med hjerne oghjerte som forbindes-7_lite.jpg" width="100px"> </a>

<a href="sort_hv_stor.jpg"> <img src="sort_hv_lite.jpg" width="100px"> </a>

Endret 5. oktober 2010 av Balrog11

[ilpostino]

hvis du mener tekst som vises mens du holder musepekeren over det må du bruke alt-atributet.

 

eksempel:

<a href="stfglito_stor.jpg"> <img src="stfglito_lite.jpg" width="100px" alt="Dette er en test"> </a>

[Balrog11]

takk

Endret 6. oktober 2010 av Balrog11

[Chris93]

Hvis du vil ha en beskrivelse under bildet må du linke til et html dokument med bildet og en text under.

 

Du kan selvfølgelig pynte på det med table osv.