Diasshow

- slideshov

Siden er opdateret 12. 12. 2005

Har du en række billeder fra ferier eller familiefester, som du via Nettet ønsker at delagtiggøre med familie og venner rundt omkring i hele landet (eller for den sags skyld verden), kan du på denne måde lave et lille fremvisningsinterface.

Denne side viser en simpel udgave, der blot viser billeder. Men man kan også lave det, så der kommer en forklarende tekst til billederne.

Anbring markøren på det ønskede motiv for at få en let forstørret udgave.
Klik for at se billedet alene i stort format .


Først definerer du et skema (en tabel) med det ønskede antal kolonner og rækker. Derefter samler du nogle af cellerne i skemaet i én stor celle ved hjælp af colspan og rowspan - se siden om tabeller.

Lav så i sidens head et stylesheet med dette indhold:

td
{
text-align:center;
vertical-align:middle
}
.venst
{
text-align:left
}
.c75
{
width:75px
}

I den store celle indsætter du et billede, som passer i størrelsen til denne celle. Udvid koden til kaldet af billedet sådan:

<img src="billed1.jpg" name="stort_billede" alt="">

Nu skal du indsætte små billeder i de små celler. Det gør du med en kode, som ser sådan ud:

<a href="billed2c.jpg" onmouseover="(document.stort_billede.src='billed2b.jpg')">
<img src="billed2a.jpg" height="48" width="71" border="0" alt=""></a>

Det er koden i parentesen, som skifter billedet i den store celle. Her er faktisk tale om en stump javascript, som fortæller at på aktuelle dokument skal objektet stort_billede erstattes med billed2.jpg.

Hvis du ikke vil have mulighed for at kunne klikke et meget stort billede alene ind i browservinduet, skal du ændre koden sådan:

<a href="#" onmouseover....

- altså indsætte en "havelåge" i stedet for en linkadresse.

Du har også mulighed for at skifte tilbage til det oprindelige billede i den store celle, hvis du udvider koden fra før, så den ser sådan ud:

<a href="billed2c.jpg" onmouseover="(document.stort_billede.src='billed2b.jpg')"
onmouseout="(document.stort_billede.src='billed1.jpg')">
<img src="billed2a.jpg" height="48" width="71" border="0" alt=""></a>

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen oktober 1999
Hjemmesideskolen
Du er her: Forsiden - scripts - Diasshow
Brugere lige nu: 1
Home Mail