Thumbnails bei Klick anzeigen

carsamba55 · 30 Juli 2009

Hallo,
beschäftige mich seit wenigen Tagen etwas mit HTML, stehe aber seit gestern vor folgendem Problem:

Ich möchte in einem Tabellenabschnitt Bilder anzeigen. Diese sollen als eine Art Vorschau, oberhalb als Thumbnails waagrecht stehen (soweit hinbekommen).

Aber wie schaffe ich es, dass bei Klick auf eines dieser Thumbnails das entsprechende Bild unterhalb gross angezeigt wird? Ich möchte nicht, dass sich das Bild in einem neuen Fenster öffnet, sondern unterhalb angezeigt werden soll.

Habe den entsprechenden Codeausschnitt beigefügt, hoffe Ihr könnt mir weiterhelfen, Danke allen für die Aufmerksamkeit...

HTML:

<tr>
                          <td>                                                            
                <table width="95%"  align="center" cellpadding="10" cellspacing="0">                                                     
                  <tr>                              
                                      <td>                                                                                                           
                      <p align="center">                                                                                  
                        <a HREF="ZIELLINK???" style="text-decoration:none">                                                     
                        <img SRC="http://www.smiteahippie.com/wp-content/uploads/2009/07/simpsons_nelson_haha2.jpg" width="80" height="80" BORDER="0">                                                                                                                   
                        <a HREF="ZIELLINK???" style="text-decoration:none">                                                         
                        <img SRC="http://member.schule.at/die4ten/4d/haha%5B1%5D.jpg" width="80" height="80" BORDER="0">                                                                                          
                        <a HREF="ZIELLINK???" style="text-decoration:none">                                                             
                        <img SRC="http://pfidder.eu/assets/images/Fun-Haha-188.jpg" width="80" height="80" BORDER="0">                                                                              
                      </p>                                                                                                           
                                                                                                                
                      <p align="center">                                                                                         
                        <!--HIER SOLL EIN FENSTER HIN WELCHES DAS AKTUELLE BILD ANZEIGT-->                                                                                                              
                      </p>
                                                                                                                                         
                                  </td>                                                  
                  </tr>                                                          
                </table>                        
                          </td>                                                  
            </tr>

xXxPeterPanxXx · 30 Juli 2009

Mhh,
du hast anscheinend Html noch nicht ganz verstanden. Man benutzt Tabellen nur für Tabellarische Daten und den <p> Tag nur für Fließtext. Korriegiere am besten erst einmal diese Fehler.

Zu den Thumbnails kann ich nicht viel sagen:roll:, aber ich glaube deine wünsche kann man nur mit JavaScript verwirklichen.

carsamba55 · 30 Juli 2009

Ja das habe ich auch oft gelesen, aber:
1. Es funktioniert (wenn es auch nicht sauber sein sollte)
2. Es wird massenhaft so gemacht (OK, hört sich etwas doof an, ist aber so)

Ist die einfache Variante, und ehrlich gesagt reicht es für mein kleines Vorhaben (eine kleine Verkaufsvorlage)... Danke dir trotzdem...

Bernhard · 30 Juli 2009

Hallo Carsamba,

Peter hat natürlich Recht mit dem, was er zu Tabellen sagt...
Auch sowas wie <p align="center"> macht man nicht mehr...

Da ist es besser, Du lernst es gleich richtig...

Wo Peter nicht ganz Recht hat: es geht auch ohne JavaScript.
Da heißen Deine Stichwörter dann iframe und target...

Das hat aber auch Nachteile...

Grüße
Bernhard

_Thor_ · 30 Juli 2009

carsamba55 schrieb:
Ja das habe ich auch oft gelesen, aber:
1. Es funktioniert (wenn es auch nicht sauber sein sollte)

Dann fährst du bestimmt auch mit dem Fahrrad auf der Autobahn, das funktioniert auch, könnte aber ungesund werden und ist definitiv falsch.

2. Es wird massenhaft so gemacht (OK, hört sich etwas doof an, ist aber so)

Es gehen auch viele bei Rot über die Ampel, oder klauen in Geschäften, machst du das auch alles nach?

Ist die einfache Variante, und ehrlich gesagt reicht es für mein kleines Vorhaben (eine kleine Verkaufsvorlage)... Danke dir trotzdem...

Es ist definitiv nicht die einfachste Variante und ob das reicht, solltest du deine Besucher fragen und diejenigen, die mit einem Vorlesebrowser deine Seite besuchen. Die bekommen dann nämlich tabellarische Daten präsentiert und werden verwirrt sein, wenn es keine solche Daten sind.

Was du da hast, ist eine Auflistung von Links, die man verständlicher Weise besser als Liste auszeichnet (<ul>).

Bernhard schrieb:
Wo Peter nicht ganz Recht hat: es geht auch ohne JavaScript.
Da heißen Deine Stichwörter dann iframe und target...

Das hat aber auch Nachteile...

Richtig, besser wäre der Einsatz einer serverseitigen Scriptsprache wie PHP.

Bernhard · 30 Juli 2009

_Thor_ schrieb:
Bernhard schrieb:

Wo Peter nicht ganz Recht hat: es geht auch ohne JavaScript.
Da heißen Deine Stichwörter dann iframe und target...

Das hat aber auch Nachteile...

Zum Vergrößern anklicken....

Richtig, besser wäre der Einsatz einer serverseitigen Scriptsprache wie PHP.

Hallo Thor,

kommt immer drauf an: eine serverseitige Lösung hat den Nachteil, dass die Seite neu
geladen wird, ich also entweder wieder oben am Seitenanfang ankomme, oder an einem
benannten Anker...

Grüße
Bernhard

carsamba55 · 30 Juli 2009

Hallo Bernhard,

Kurz zu Tabellen:
Ich gebe euch zweien völlig Recht, ich habe bei Recherchen über Google dasselbige oftmahls gelesen. Ich bin aber dabei, nur eine kleine Verkaufsvorlage für Ebay zu machen, und auf diesem Wege schien mir die Lösung mit Tabellen einfacher.

Danke für deinen Tip, scheint ein Volltreffer zu sein. Du hast Probleme angedeutet, ich recherchiere gerade nach Problemen mit iFrames, außer die Nicht-Kompatibilität mit Netscape 4.x und Nachteilen bei Suchmaschinen scheint es keine ausschlaggebenden Probleme zu geben (bezogen auf mein kleines Vorhaben), stimmst dem zu, oder habe ich ein Problem übersehen?

_Thor_ · 30 Juli 2009

Bernhard schrieb:
kommt immer drauf an: eine serverseitige Lösung hat den Nachteil, dass die Seite neu
geladen wird, ich also entweder wieder oben am Seitenanfang ankomme, oder an einem
benannten Anker...

Das sehe ich nicht als Nachteil, sondern als normales Verhalten der Browser. Wenn ich einen Link anklicke, wird eine neue Seite geladen, das ist ganz normal.

Alternativ könnte man ein CSS-Hover machen, so braucht man kein iframe, kein Javascript und die Seite wird auch nicht neu geladen.

Aber da es ja für ebay sein soll, fällt PHP wohl weg, oder erlauben die PHP auf deren Seiten?

carsamba55 · 30 Juli 2009

OK ich bin überzeugt worden, die Geschichte mit den Tabellen zu lassen, und werde es mit CSS machen... Sehe auch, dass es fertige Bildergalerien für CSS gibt... Naja so wirds mir in den Semesterferien nichzt langweilig... Ich melde mich wieder, danke nochmals....

_Thor_ · 30 Juli 2009

carsamba55 schrieb:
OK ich bin überzeugt worden, die Geschichte mit den Tabellen zu lassen, und werde es mit CSS machen... Sehe auch, dass es fertige Bildergalerien für CSS gibt... Naja so wirds mir in den Semesterferien nichzt langweilig... Ich melde mich wieder, danke nochmals....

Wieder ein Strich mehr an der Wand für eine erfolgreiche Bekehrung weg vom Tabellenlayout, hin zu semantisch korrektem HTML und CSS ;)

Schön dass wir helfen konnten.

Bernhard · 30 Juli 2009

carsamba55 schrieb:
Hallo Bernhard,

Kurz zu Tabellen:
Ich gebe euch zweien völlig Recht, ich habe bei Recherchen über Google dasselbige oftmahls gelesen. Ich bin aber dabei, nur eine kleine Verkaufsvorlage für Ebay zu machen, und auf diesem Wege schien mir die Lösung mit Tabellen einfacher.

Hallo Carsamba,

für Ebay hab ich noch nie was gemacht, meine aber mal gelesen zu haben,
dass Ebay Probleme mit CSS hat, wenn das so ist, dann kämest Du um
Tabellen und ihre Nachteile nicht herum...

carsamba55 schrieb:
Danke für deinen Tip, scheint ein Volltreffer zu sein. Du hast Probleme angedeutet, ich recherchiere gerade nach Problemen mit iFrames, außer die Nicht-Kompatibilität mit Netscape 4.x und Nachteilen bei Suchmaschinen scheint es keine ausschlaggebenden Probleme zu geben (bezogen auf mein kleines Vorhaben), stimmst dem zu, oder habe ich ein Problem übersehen?

Prüfe erstmal, ob Ebay iframes zulässt...

Es gibt noch mehr Nachteile (die aber für Ebay wohl eine geringere Rolle spielen):

lädst Du statt eines Bildes Text im iframe, kann ein Besucher per Suchmaschine
auf dieser HTML-Seite landen, auf der er dann keine Navigation vorfindet, also
nicht zur Startseite gelangt
Bilder, die schmäler sind, als der iframe, werden vom einen Browser zentriert,
vom anderen linksbündig angezeigt (falls da jemand Abhilfe weiß, her damit!)
ich meine gelesen zu haben, dass es schwierig ist / nicht möglich ist, einen
iframe von einem anderen Element überdecken zu lassen (z.B. Tooltipps oder
DropDown-Menüs)
wie Screenreader einen iframe lesen, möchte ich -glaub ich- gar nicht wissen...

Fazit: ich verwende sie für Bildergalerien, wenn keine Bildbeschreibung o.ä. vorgesehen
ist - und um Inhalte von anderen Seiten einzubinden, die anders nicht eingebunden
werden können (z.B. wetter-online).

_Thor_ schrieb:
Das sehe ich nicht als Nachteil, sondern als normales Verhalten der Browser. Wenn ich einen Link anklicke, wird eine neue Seite geladen, das ist ganz normal.

Hallo Thor,

klar ist das das normale Verhalten, aber gerade bei Bildern gibt es m.E. Gründe,
davon abzuweichen: stell Dir vor, Dein Viewport ist zu klein, um Thumbnails und
das große Bild vollständig anzuzeigen, Du hast Dir eine Position gesucht, wo Du
das wesentliche des großen Bildes siehst, und gleichzeitig noch den Thumbnail
klicken kannst, die Seite lädt neu (natürlich komfortabel mit benanntem Anker,
damit Du nicht erst zu den Bildern scrollen musst) und Du musst wieder scrollen,
um an die Thumbs zu kommen... - oder Dein Viewport ist riesig und die selbe
Seite klebt nach dem Neuladen an der oberen Kante Deines Browserfensters...

_Thor_ schrieb:
Alternativ könnte man ein CSS-Hover machen, so braucht man kein iframe, kein Javascript und die Seite wird auch nicht neu geladen.

Könnte man, hat aber auch Nachteile...

_Thor_ schrieb:
Aber da es ja für ebay sein soll, fällt PHP wohl weg, oder erlauben die PHP auf deren Seiten?

das kann ich mir nicht vorstellen!

Grüße
Bernhard

carsamba55 · 31 Juli 2009

Hallo Bernhard,

für Ebay hab ich noch nie was gemacht, meine aber mal gelesen zu haben,
dass Ebay Probleme mit CSS hat, wenn das so ist, dann kämest Du um
Tabellen und ihre Nachteile nicht herum...

Danke für den Hinweis, habe mal danach gegoogelt und diese Seite gefunden:

HTML und CSS bei ebay

Werde diese Hinweise auf jeden Fall beachten.

Prüfe erstmal, ob Ebay iframes zulässt...

Iframes lasse ich weg, arbeite mich erst ein wenig in CSS ein, und werde, wenn es denn klappen sollte, eine kleine Bildergalerie mit CSS einfügen (habe einige schöne fertige CSS Galerien gefunden).

Hallo,
wollte diesen Thread kurzerhand nochmal nutzen um eine Frage bezüglich CSS loszuwerden. Es geht um die Positionierung von Containern. Ich habe zum Thema "css div zentrieren" gegoogelt, und diverse Lösungsmöglichkeiten erhalten, jetzt wollte ich mal fragen ob ich das so korrekt gemacht habe:

HTML:

<style type="text/css">
body {
  background-image: url(bg1.gif);
    background-color: #FFFFFF;
    padding: 0px;
  margin: 0px;
    text-align: center;
}
#container {
  position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: auto;
    border-color: #FFFFFF;
    border-width: 10px;
    border-style:solid;
    background-color: #123456;
}
#logo {
  position: relative;
  width: 1000px;
  height: 200px;
  background-color: #ffcc00;
}
</style>
<div id="container" align="center">
  <div id="logo"></div>
</div>

Also ich habe einen äußersten Container (hier Container), der viele weitere Container beinhalten soll (hier logo, und dazu weitere Container). Es sollen alle Container (und später auch deren Inhalt wie Text, Bilder, etc.) zentriert werden. wollte kurzerhand nur fragen ob das semantisch so korrekt ist? Habs im FF und IE getestet und es wird zentriert angezeigt... DANKE

_Thor_ · 2 August 2009

Naja, wenn du den Rest nicht auch nur als <div> auszeichnest, kann man das so machen. Wobei man auch bei dem Logo überlegen kann, es als <h1> auszuzeichnen, wenn es als Seitenüberschrift dient und nicht nur eine Grafik ohne Text ist.

carsamba55 · 2 August 2009

Hi,
ne, logo ist ne grafik...

Hm wollte den Rest auch als div auszeichnen, wäre das schlimm?
sollen die einzelnen abschnitte kommen wie artikelbeschreibung, artikelbilder, zahlung und versand, etc...

_Thor_ · 2 August 2009

carsamba55 schrieb:
Hm wollte den Rest auch als div auszeichnen, wäre das schlimm?

Ja, denn es wäre nicht richtig. Such mal nach "semantisches HTML" hier in der Suche, dann wirst du verstehen, warum es falsch ist.

carsamba55 · 2 August 2009

OH super hat einiges gefunden... DANKE, werde mich da mal einlesen...

Thumbnails bei Klick anzeigen

carsamba55

Neues Mitglied

xXxPeterPanxXx

Neues Mitglied

carsamba55

Neues Mitglied

Bernhard

Neues Mitglied

_Thor_

Aktives Mitglied

Bernhard

Neues Mitglied

carsamba55

Neues Mitglied

_Thor_

Aktives Mitglied

carsamba55

Neues Mitglied

_Thor_

Aktives Mitglied

Bernhard

Neues Mitglied

carsamba55

Neues Mitglied

_Thor_

Aktives Mitglied

carsamba55

Neues Mitglied

_Thor_

Aktives Mitglied

carsamba55

Neues Mitglied

Neueste Beiträge