Hilfe bei onlick mit Bildwechselfunktion

matze1983

Erfahrenes Mitglied
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
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>";
?>
die zusätzlich includete Datei schaut so aus
PHP:
// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
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?
 
Hi,

nimm mal die Attribute width und height aus dem Image-Tag mit dem Name start.

Ausserdem wird ein center-Tag geöffnet und nicht geschlossen.
Code:
<div id='imageBox'><center><img src='/bilder/pics/nb/nb5.jpg' alt='' name='start'></center></div>
Ciao
Quaese
 

Neue Beiträge

Zurück