Hallöchen,
ich hab da ein Script welches ich ein wenig ändern würde, jedoch fehlt mir an einigen Ecken das Verständnis und ich weis nicht wie ich es realisieren soll.
Ich habe eine kleine Gallerie(wenn man es so nennen kann), in der die Thumb-bilder klein dargestellt sind und beim klicken, werden sie in einer 'imageBox' dargestellt.
Erstmal der Code
die zusätzlich includete Datei schaut so aus
Nun das Problem: Zur Zeit ist es so, dass die anderen Bilder sich dem Rahmen des Startbildes anpassen müssen und so verzerrt aussehen. Wie kann ich es realisieren, dass jedes Bild in seiner original Größe dargestellt wird?
ich hab da ein Script welches ich ein wenig ändern würde, jedoch fehlt mir an einigen Ecken das Verständnis und ich weis nicht wie ich es realisieren soll.
Ich habe eine kleine Gallerie(wenn man es so nennen kann), in der die Thumb-bilder klein dargestellt sind und beim klicken, werden sie in einer 'imageBox' dargestellt.
Erstmal der Code
PHP:
echo"<table>
<tr><td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb5.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb5_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb6.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb6_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb7.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb7_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb8.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb8_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb9.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb9_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb10.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb10_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb11.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb11_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb12.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb12_th.jpg' height='20' width='20' alt=''></a></div></td>
<td><div align='center'><a href=\"#\" onclick=\"swapImage('start','/bilder/pics/nb/nb13.jpg');return false;\"><img src='/bilder/pics/nb/thumb/nb13_th.jpg' height='20' width='20' alt=''></a></div></td></tr>
<tr><td colspan='16'><div id='imageBox'>
<center><img src='/bilder/pics/nb/nb5.jpg' alt='' name='start' width='400' height='300'></div></td>
</tr></table>";
?>
PHP:
// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}