Suche im Forum:
Suchen


Autor Nachricht
Beitrag07.09.2012 um 16:46 (UTC)    
Titel: 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


Zuletzt bearbeitet von pink-camel am 07.09.2012, 17:48, insgesamt einmal bearbeitet
Beitrag07.09.2012 um 18:24 (UTC)    
Titel:

Hallo,

ohne JavaScript wirst du das wohl kaum hinbekommen.
Ich hätte hier einen relativ simplen Code, auf Funktionsfähigkeit getestet:
Zitat:
<script type="text/javascript">
function zeigebild(bildadresse) { neueadresse = bildadresse; document.getElementById("grossesbild").src = neueadresse; }
</script>


Der Code des großen Bildes:
Zitat:
<img id="grossesbild" src="URL zum Standardbild" alt="Alternativtext">


Der Code der Vorschaubilder:
Zitat:
<img src="URL zum Vorschaubild" onmouseover="zeigebild('URL zum großen Bild');" alt="Alternativtext">


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


Zuletzt bearbeitet von transint am 07.09.2012, 19:28, insgesamt einmal bearbeitet
Beitrag08.09.2012 um 09:43 (UTC)    
Titel:

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>
Beitrag08.09.2012 um 09:49 (UTC)    
Titel:

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:
Zitat:
<script type="text/javascript">
function zeigebild2(bildadresse) { neueadresse2 = bildadresse2; document.getElementById("grossesbild2").src = neueadresse2; }
</script>


Der Code des großen Bildes:
Zitat:
<img id="grossesbild2" src="URL zum Standardbild" alt="Alternativtext">


Der Code der Vorschaubilder:
Zitat:
<img src="URL zum Vorschaubild" onmouseover="zeigebild2('URL zum großen Bild');" alt="Alternativtext">
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


Zuletzt bearbeitet von der-bielefeld-club am 08.09.2012, 10:50, insgesamt einmal bearbeitet
Beitrag11.09.2012 um 16:00 (UTC)    
Titel: Unterschiedliche Darstellung im Titel

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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de