Diasshow m. tekster

- slideshov med tekster

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.

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



Brostræde og torvet i "Den Gamle By"
- Købstadsmuseet i Århus
Gadebillede i Dragørs gamle bydel
- kender du gadens navn?
Fæstningstårnet på Frederiksø
- den mindste af Ertholmene
Garveriet i "Den Gamle By"
- Købstadsmuseet i Århus
Hammershus borgruin ved Bornholms nordspids Stengade og Strandstræde i Helsingør Raadvad Dam i Raadvad ved Lyngby,
nær min kones fødested i Hjortekær
Gadens navn er Calle de los Arcos
- Pueblo Español, Barcelona
Gadens navn er Calle de Caballeros
- Pueblo Español, Barcelona
Lille Torv og Toldbodgade i
"Den Gamle By" - Købstadsmuseet i Århus
Farøbroen i aftenstemning Kanalen i Frederiksværk Fæstningstårnet på Christiansø
- den største af Ertholmene
Gammel fynsk vandmølle
- Frilandsmuseet i Sorgenfri
Gadebillede fra Ærøskøbing Østerlars Rundkirke på Bornholm Den Tapre Landsoldat ved
voldanlægget i Fredericia
Gadebillede fra Faaborg Frederiksborg Slot i Hillerød

Her kan du se, hvordan du laver dit diasshow med tekstforklaringer til billederne:


Tabellen

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.


Stylesheetet

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;
}

Den store celles billede

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()">

De små cellers billeder

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.


Billedteksterne

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.


Funktionerne

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.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen juli 1999
Hjemmesideskolen
Du er her: Forsiden - scripts - Diasshow m. tekster
Brugere lige nu: Antal aktive brugere
Home Mail