Siden er opdateret 21. 5. 2006
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, hvor du også kan lægge nogle forklarende tekster ved hvert billede.
Her kan du se, hvordan du laver dit diasshow med tekstforklaringer til billederne:
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 også en celle, der strækker sig over et antal kolonner, men kun én række. Denne celle bruges til den forklarende tekst, som skifter med billederne.
Lav så i sidens head et stylesheet med dette indhold:
#dias {
display: block;
position: relative;
top: 0px;
left: 0px;
}
td {
text-align: center;
vertical-align: middle
}
.venst {
text-align: left
}
.c75 {
width: 75px
}
cite {
position: absolute;
top: 345px;
left: 12px;
width: 270px;
font-style:normal;
color: black;
background: transparent;
visibility: hidden;
}
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" onmouseover="stor1a()" onmouseout="stor1b()">
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"><img src="billed2a.jpg"
height="56" width="71" border="0"
onmouseover="stor2a()" onmouseout="stor2b()"></a>
Her ser du igen et par funktioner - stor2a() og stor2b() - men det vender vi tilbage til om lidt.
Men bemærk, at for hvert af de små billeder skal der defineres og kaldes et nyt sæt funktioner - ellers kan du ikke styre udskiftning af billeder og tekst.
Før vi kommer til funktionerne, skal vi lige have lavet de forklarende tekster til alle billederne. Teksterne skrives som individuelletags af typen <cite> med egen ID:
<cite id="divBilled1">Denne tekst vises i tekstcellen</cite>
<cite id="divBilled2">Denne tekst vises i tekstcellen</cite>
Fortsæt på samme måde med at lave tekster til alle de billeder, som skal vises i den store celle. Husk at give de enkelte tekster forskellig ID i div'en.
Så er det tid at kigge på funktionerne. Vi var før inde på dem i og med, at der ved hver link blev anbragt et kald til en funktion, når musen kom ind over billedet og et kald til en anden funktion, når musen fjernedes fra samme billede.
function stor1a()
{
document.getElementById("divBilled1").style.visibility="visible"
}
function stor1b()
{
document.getElementById("divBilled1").style.visibility="hidden"
}
function stor2a()
{
document.stort_billede.src="billed2.jpg"
document.getElementById("divBilled2").style.visibility="visible"
}
function stor2b()
{
document.stort_billede.src="billed1.gif"
document.getElementById("divBilled2").style.visibility="hidden"
}
Herover har jeg vist 4 funktioner:
For hvert af de små billeder skal du lave et sæt funktioner som stor2a() og stor2b() i kodeboksen herover. Husk at give hvert nyt sæt funktioner nye navne.
Du kan i øvrigt med fordel lægge allle funktionsdefinitionerne ud i et eksternt javascript - kald det f.eks. dias.js og lav så i sidens <head> et kald til denne scriptfil:
<script type="text/javascript" src="dias.js"></script>
Denne eksterne scriptfil skal indeholde det, du ser i den store kodeboks herover - med de tilføjelser, der nødvendiggøres af antallet af små billeder i tabellen.