Möchte Bilder so anzeigen lassen, nur wie geht das?

Hallo,

wer hilft mir bei der Lösung eines für mich grossen Problems?

Ich möchte, das sich rechts kleine "Vorschaubilder" befinden und links daneben das aktuell ausgewählte Bild vergrössert angezeigt wird.

Die Auswahl des Bildes kann entweder durch "Anklicken" oder durch "Mouseover" erfolgen. Den Mouseover-Effekt würde ich persönlich vorziehen, da dieser benutzerfreundlicher ist.






Hier habe ich den Quellcode zur Abbildung:

<center>
<div>
<p>&nbsp;</p>
<table width="923" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="919" height="25" style="text-align: left;"><span style="font-family: Verdana; font-size: small"> <a name="1973-10-21"></a> </span></td>
</tr>
</tbody>
</table>
<table width="919" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="915" height="10" bgcolor="#202020" style="text-align: center;">
<div align="center">
<table cellspacing="1" border="0" style="width: 922px; height: 540px">
<tbody>
<tr>
<td bgcolor="#202020" align="center" style="text-align: center">
<div align="center">
<table width="100%" border="0">
<tbody>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="92%" valign="bottom" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="74%" valign="bottom" colspan="2"><strong><font size="4"> <span style="font-family: Verdana; color: rgb(255,255,255)"> Highways Of The Sun<br />
Tell Me</span></font></strong></td>
<td width="20%" align="center">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td valign="bottom" colspan="3"><hr />
</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" rowspan="4">&nbsp;</td>
<td width="67%" rowspan="4" align="center">
<p align="center">
<img width="585" height="583" src="http://img.webme.com/pic/p/pink-camel/whitecover7inch.png" alt="" align="left" /></td>
<td width="5%">
<p align="center">
</td>
<td width="20%">
<p align="center">
<img width="150" height="150" src="http://img.webme.com/pic/p/pink-camel/whitecover7inch.png" alt="" align="right" /></td>
<td width="3%" align="center" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td width="5%" valign="top">
<p align="center">
</td>
<td width="20%" valign="top">
<p align="center">
<img width="150" height="150" src="http://img.webme.com/pic/p/pink-camel/whitecover7inch.png" alt="" align="right" /></td>
</tr>
<tr>
<td width="5%" valign="top">
&nbsp;</td>
<td width="20%" valign="top">
<a href="http://img837.imageshack.us/img837/5138/prhotsa.png">
<img width="150" height="150" src="http://img.webme.com/pic/p/pink-camel/pr_hots_a_400.png" alt="" align="right" /></a></td>
</tr>
<tr>
<td width="5%" valign="top">
&nbsp;</td>
<td width="20%" valign="top">
<a href="http://img560.imageshack.us/img560/9898/prhotsb.png">
<img width="150" height="150" src="http://img.webme.com/pic/p/pink-camel/pr_hots_b_400.png" alt="" align="right" /></a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</center>

ENDE DES QUELLCODES!!



Bitte so unkompliziert als möglich und keinen Java-Script, da ja seit Kurzem diese von der Webme GmbH geblockt werden.

Vielen Dank für eure Hilfe und ein schönes Wochenende wünsche ich euch allen!

Michael

Hallo,

ohne JavaScript wirst du das wohl kaum hinbekommen.
Ich hätte hier einen relativ simplen Code, auf Funktionsfähigkeit getestet:

Der Code des großen Bildes:

Der Code der Vorschaubilder:

Das Standardbild wird beim Seitenaufruf angezeigt.
Das Vorschaubild ist das Bild, das mit der Maus überfahren werden soll.
Das große Bild wird angezeigt, wenn man über das Vorschaubild fährt.
Der Alternativtext wird angezeigt, falls das Bild nicht geladen werden kann.

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon

Danke, ganz nette Lösung, doch wenn ich zwei oder mehrere solcher "Boxen" untereinander auf eine Seite haben möchte, dann passiert folgendes:
Die erste "Box" arbeitet normal, doch in der zweiten "Box" tut sich nichts. Die dort vorhandenen Vorschaubilder werden in der ersten merkwürdiger Weise in der ersten "Box" angezeigt. Das ist völlig unabhängig davon, ob sich nun das Script einmal oder mehrmals auf der Seite befindet.

Siehe: http://www.pink-camel.de/Test6.htm

Wer hilft mir bitte?

<script type="text/javascript">
function zeigebild(bildadresse) { neueadresse = bildadresse; document.getElementById("grossesbild").src = neueadresse; }
</script>
<center>
<div>
<p>&nbsp;</p>
<p><script type="text/javascript">
function zeigebild(bildadresse) { neueadresse = bildadresse; document.getElementById("grossesbild").src = neueadresse; }
</script>
</p>
<table width="923" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="919" height="25" style="text-align: left;"><span style="font-family: Verdana; font-size: small"> <a name="1973-10-21"></a> </span></td>
</tr>
</tbody>
</table>
<table width="919" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="915" height="10" bgcolor="#202020" style="text-align: center;">
<div align="center">
<table cellspacing="1" border="0" style="width: 922px; height: 540px">
<tbody>
<tr>
<td bgcolor="#202020" align="center" style="text-align: center">
<div align="center">
<table width="100%" border="0">
<tbody>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="92%" valign="bottom" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="74%" valign="bottom" colspan="2"><strong><font size="4"> <span style="font-family: Verdana; color: rgb(255,255,255)"> Highways Of The Sun<br />
Tell Me</span></font></strong></td>
<td width="20%" align="center">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td valign="bottom" colspan="3"><hr />
</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" rowspan="4">&nbsp;</td>
<td width="67%" rowspan="4" align="center">
<p align="center">
<img id="grossesbild" src="http://img.webme.com/pic/p/pink-camel/pr_7-sleeve_585.png" alt="Alternativtext" width="600" height="600" align="left"></td>
<td width="5%" height="150">
<p align="center">
</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_7-sleeve_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_7-sleeve_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
<td width="3%" align="center" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
<p align="center">
</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_7-sleeve_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_7-sleeve_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
&nbsp;</td>
<td width="20%" valign="bottom" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_hots_a_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_hots_a_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
&nbsp;</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_hots_b_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_hots_b_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</center> <p>&nbsp;</p>
<p align="center"><script type="text/javascript">
function zeigebild(bildadresse) { neueadresse = bildadresse; document.getElementById("grossesbild").src = neueadresse; }
</script>
</p>
<div align="center">
<table width="923" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="919" height="25" style="text-align: left;"><span style="font-family: Verdana; font-size: small">
<a name="1973-10-22"></a> </span></td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table width="919" cellspacing="1" border="0" style="">
<tbody>
<tr>
<td width="915" height="10" bgcolor="#202020" style="text-align: center;">
<div align="center">
<table cellspacing="1" border="0" style="width: 922px; height: 540px">
<tbody>
<tr>
<td bgcolor="#202020" align="center" style="text-align: center">
<div align="center">
<table width="100%" border="0">
<tbody>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="92%" valign="bottom" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" height="5">&nbsp;</td>
<td width="74%" valign="bottom" colspan="2"><strong><font size="4">
<span style="font-family: Verdana; color: rgb(255,255,255)"> Breathless<br />
</span></font><font size="4" color="#FFFFFF"><span style="font-family: Verdana">
Wing And A Prayer</span></font></strong></td>
<td width="20%" align="center" valign="bottom">
<p align="right"><strong><font size="4" color="#FFFFFF">
<span style="font-family: Verdana">japan Promo</span></font></strong></td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td valign="bottom" colspan="3"><hr />
</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%" rowspan="4">&nbsp;</td>
<td width="67%" rowspan="4" align="center">
<p align="center">
<img id="grossesbild0" src="http://img.webme.com/pic/p/pink-camel/pr_br_jp_1_585.jpg" alt="Alternativtext" width="600" height="600" align="left"></td>
<td width="5%" height="150">
<p align="center">
</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_br_jp_1_150.jpg" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_br_jp_1_585.jpg');" alt="Alternativtext" width="130" height="130" align="right"></td>
<td width="3%" align="center" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
<p align="center">
</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_br_jp_2_150.jpg" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_br_jp_2_585.jpg');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
&nbsp;</td>
<td width="20%" valign="bottom" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_br_jp_a_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_br_jp_a_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="5%" valign="top" height="150">
&nbsp;</td>
<td width="20%" height="150">
<p align="center">
<img src="http://img.webme.com/pic/p/pink-camel/pr_br_jp_b_150.png" onmouseover="zeigebild('http://img.webme.com/pic/p/pink-camel/pr_br_jp_b_585.png');" alt="Alternativtext" width="130" height="130" align="right"></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="92%" valign="top" colspan="3">&nbsp;</td>
<td width="3%" align="center">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Hallo,
das ist leider auch kein Wunder, weil die unteren Vorschau Boxen die gleichen Klassen aufweisen.
Es muss nämlich bei jeder weiteren Vorschau Box folgendes geändert werden:

Der Code des großen Bildes:

Der Code der Vorschaubilder:

Bei der Dritten Box sollte dann alles mit einer 2 in eine 3 geändert werden.

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator

Danke für Deine Lösung, die Du mir in den privaten Nachrichten geschickt hast, jetzt ist in der Darstellung der Bilder alles prima.

Doch die Überschriften der Platten-Titel werden in Firefox und dem Ibternet-Explorer unterschiedlich angezeigt. Eigentlich sollen die wie im oberen Beispiel linksbündig stehen und nicht, wie im IE in der Spalte mittig (ist wirklich mittig, denn die Spaltenbreite ist nicht identisch mit dem Schallplatten-Cover.






Weiß noch jemand hier weiteren Rat?

Vielen Dank im Voraus, Michael