Door Mouse over tegelijk foto en tekst laten veranderen

[HarryGlobetrotter]

Een aantal jaar geleden maakte ik mijn (vooral foto)website en nu is hij aan verfrissing toe. Ik heb jaren geleden een basiscursus Dreamweaver gevolgd en de rest is er gekomen door zelfstudie, maar nu raak ik er niet uit. Het idee is om onder de foto's nu ook de naam te laten verschijnen door "Mouse over". Nu veranderd alleen de foto. Ter verduidelijking kan je best even naar deze pagina kijken: https://www.harryvanbulck.be/fotografie/fauna en flora fotografie/Vogels/basis.htm
Als je de pagina opent zie je links de kleine foto's en rechts de grote. Bedoeling is met de muis over de foto te gaan zodat hij automatisch in het grootste tabelvlak verschijnt. Zo ver ben ik al, maar ik wil nu ook in een extra tabelvlak onder de foto de naam van de vogel laten verschijnen waar in de bijgevoegde JPG "naam van de vogel" staat.
Hieronder de code: Ik weet dat de blauwe tekst ervoor zorgt dat de juiste foto groot verschijnt bij mouse over bij de groene tekst, maar ik wil ook dat er nog een opdracht bij het blauwe bijkomt dat ondertussen ook nog de naam verschijnt in het vakje van de rode tekst. Uiteraard moet ik voor elk klein fototje dan hetzelfde doen.

<div id="content">
<div align="center">
<table width="910" cellspacing="3">
<tr>
<td colspan="3" bgcolor="#191919"><h5 align="center"><a href="../fauna en flora fotografie home.htm" target="_top">&lt; Terug naar overzicht Fauna en Flora</a></h5></td>
<td bgcolor="#191919"><h1 align="center">Vlinders</h1></td>
</tr>
<tr>
<td width="95" height="95" bgcolor="#191919"><div align="center"><img src="afbeeldingen klein/harryvb - 001.jpg" name="swap01" id="swap01" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 001.jpg',1)" /></div></td>
<td width="95" height="95" bgcolor="#191919"><div align="center"><img src="afbeeldingen klein/harryvb - 002.jpg" name="swap02" id="swap02" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 002.jpg',1)" /></div></td>

<!-- grote foto bij mouse over van een kleine foto -->
<td width="95" height="95" bgcolor="#191919">
<div align="center">
<img src="afbeeldingen klein/harryvb - 003.jpg" name="swap03" id="swap03" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 003.jpg',1)" />
</div>
</td>

<td width="600" height="600" rowspan="6"><div align="center">
<img src="afbeeldingen groot/harryvb - 001.jpg" name="basis" id="basis" />
</div></td>
</tr>

<!-- Hier nog herhalingen voor de 3 middelste rijen -->
<tr bgcolor="#191919">
<td width="95" height="95" bgcolor="#191919">
<div align="center">
<img src="afbeeldingen klein/harryvb - 004.jpg" name="swap04" id="swap04" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 004.jpg',1)" />
</div></td>
<td width="95" height="95" bgcolor="#191919"><div align="center">
<img src="afbeeldingen klein/harryvb - 005.jpg" name="swap05" id="swap05" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 005.jpg',1)" />
</div></td>
<td width="95" height="95" bgcolor="#191919"><div align="center">
<img src="afbeeldingen klein/harryvb - 006.jpg" name="swap06" id="swap06" onmouseover="MM_swapImage('basis','','afbeeldingen groot/harryvb - 006.jpg',1)" />
</div></td>
</tr>
<td colspan="3" bgcolor="#191919"><h4 align="center">&nbsp;</h4></td>

<!-- tekst bij foto -->
<td width="600" height="40" rowspan="6" bgcolor="#191919">
<h4 align="center">
<div align="center">Naam van de vogel</div>
</td>

</tr>
</table>

mod:

 ...

tags toegevoegd aan de html code

 

[bron]

HarryGlobetrotter, welkom op het forum.

De code hierboven heb ik in code tags gezet zodat deze voor de andere helpers beter leesbaar is.
Dit verhoogt je kans op een antwoord

Als ik de code bekijk is deze sterk verouderd. Een <table> voor het indelen van een pagina is tegenwoordig bekend als "spaghetti structuur" en wordt niet meer gebruikt om een pagina in te delen.
De tabel wordt alleen nog gebruikt als tabel, het woord zegt het al, alleen voor gegevens, bijvoorbeeld voetbal uitslagen of een prijslijst.

Behalve de spaghetti die bij een table ontstaat is de starre table ook ongeschikt voor weergave op alle apparaten die er tegenwoordig zijn zoals monitor, laptop, tablet en smartphone.
Als je een goede weergave wilt hebben op deze apparaten, google dan eens op: responsive design.
In het kort houdt dit in

- <header> <nav> <main> <aside> en <footer> voor de hoofdindeling, je hoeft dit niet perse te gebruiken.
- <div> wordt gebruikt voor de overige indeling.
- bij het indelen wordt in de breedte % gebruikt, bijvoorbeeld kleine foto's 60% breed en grote foto is 40% breed.
- gebruik in de breedte geen margin, gebruik van padding en border is geen probleem. Hiermee voorkom je achteraf vervelende bijverschijnselen.
- zet de indeling, teksten en foto's in een .html bestand en zet alle vormgeving in een .css bestand.
- alle scripts horen in een apart .js bestand, bijvoorbeeld in scripts.js
- html bestanden hebben een .html extensie (niet de oude .htm).
- diverse vormgeving zoals color=".." en bgcolor=".." en align=".." en andere vormgeving is niet meer toegestaan in een .html bestand.
- gebruik in bestandsnamen geen leestekens (dus ook geen spatie). Je voorkomt problemen als je alleen letters, cijfers, de . (punt) - (liggend streepje) en/of _ (onderliggend streepje) gebruikt.

aanvulling. als je meerdere <div> naast elkaar wilt hebben dan zijn er 2 methodes:
- Float. Geef de div een float: left => dit wordt/werd gebruikt na de verouderde table jaren.
- Flexbox. Geef de div een display: flex => dit is de huidige methode, in plaats van float.

Bekijk de plaatjes eens wat de fantastische flexbox (klik) allemaal kan.