Guten Abend zusammen,

ich versuche gerade eine einfache Galerie zu erstellen. Es soll ein großes Bild mit darunter liegenden kleinen Thumbnails zu sehen sein. Wenn man auf eines der Thumbnails liegt, sollte das große Bild quasi wechseln.

Da es sich hierbei um eBay handelt und ich kein externes Stylesheet einbinden kann, wird die Sache für mich umso komplizierter. Ich komme ohne Hilfe nicht weiter. Hier mein bisheriges Gewurschtel:

<p style="margin-top: -13px;
letter-spacing: 1px;
background: #22313F;
color: #F5D76E;
font-family: 'times new roman', cursive;
font-size: 1.8em;
font-style: cursive;
padding-bottom: 10px;
text-align: center;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;">RALPH LAUREN HERREN PULLOVER<img src="http://www.fotos-hochladen.net/uploads/ralphlaurenlogop6hkcjlqx2.png" width="15" style="transform: translate(10px, 5px);"> </p>

<p style="text-align: center;
font-size: 1.1em;">Unverbindliche Preisempfehlung: <s>€119,00</s> | Jetzt: <span style="color:green; font-weight: bold;">€ 59,00</span></p>

<div style="border: 1px solid #22313F; margin: 0 auto; max-width: 90%; clear: both;"></div>

<p style="background: #F5D76E;
font-size: 0.9em;
padding: 5px 10px;
text-align: center;
max-width: 115px;
border-bottom-left-radius:2px;
border-bottom-right-radius: 2px;
margin: 0 auto;">Kostenlose Lieferung*</p>

<div style="max-width: 50%; margin-top: 50px; float:left;">
<div style="margin-bottom: 50px;">
<img src="http://img5.fotos-hochladen.net/uploads/rlblueesj2dokm05.jpg" width="600">
<div style="margin: 20px 0px 0px 150px;">

<a href="#blue" onmouseover="style='opacity: 0.5;'" onmouseout="style='opacity: 1';"><img src="http://img5.fotos-hochladen.net/uploads/rlblueesj2dokm05.jpg" width="100"></a>
<a href="#" onmouseover="style='opacity: 0.5;'" onmouseout="style='opacity: 1;'"><img src="http://img5.fotos-hochladen.net/uploads/rlgraybjsht2kxy0.jpg" width="100"></a>
<a href="#" onmouseover="style='opacity: 0.5;'" onmouseout="style='opacity: 1;'"><img src="http://img5.fotos-hochladen.net/uploads/rlredxykqf0hs9c.jpg" width="100"></a>

</div>
</div>
</div>
<div style="max-width: 40%; float: left; margin-top: 50px;">
<p>Die Herren Pullover von Ralph Lauren sind edel und sportlich zugleich.</p>
</div>

<div style="border: 0.5px solid #22313F; margin: 0 auto; max-width: 80%; clear: both;"></div>

<div style="display: flex;">

<div style="padding: 20px;
margin: 20px;
border-right: 1px solid #eee;
max-width: 300px;">
<h2 style="text-align: center;">Versand</h2>
<p style="text-align: center;">*Wir versenden innerhalb von 24 Stunden und kostenfrei innerhalb Deutschlands. Die Versandkosten in die Schweiz und nach Österreich betragen € 12,00.</p>
</div>

<div style="padding: 20px;
margin: 20px;
border-right: 1px solid #eee;
max-width: 300px;">
<h2 style="text-align: center;">Zahlungsarten</h2>
<p style="text-align: center;">Wir akzeptieren PayPal, Kreditkarte und Banküberweisung.</p>
<div style="text-align: center;"><img src="http://img5.fotos-hochladen.net/uploads/paypaljw4gkyte03.png" width="60">
<img src="http://www.fotos-hochladen.net/uploads/visah65ksqz48t.png" width="40" style="transform:translateY(-9px);">
<img src="http://img5.fotos-hochladen.net/uploads/mastercardlsx216jepy.png" width="40" style="transform:translateY(-9px);">
</div>
</div>

<div style="padding: 20px;
margin: 20px;
max-width: 300px;">
<h2 style="text-align: center;">Rückgabebedingungen</h2>
<p>Bitte beachten Sie, dass für die Rücknahme des Artikels folgende Bedingungen kumuliert erfüllt sein müssen:
<ul style="margin-left: -20px;
list-style: circle;">
<li>Rückversand in Originalverpackung</li>
<li>Die Etiketten müssen sich noch an der Ware befinden</li>
<li>Die Ware darf weder gewaschen noch getragen worden sein</li>
</ul></p>
</div>
</div>

Ich hoffe mir kann jemand helfen .

Beste Grüße