zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Thumpnail per mouse Over in IMG Tag anzeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.12.2022, 13:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2022
Ort: Dortmund
Beiträge: 1
Maiki1706 befindet sich auf einem aufstrebenden Ast
Standard Thumpnail per mouse Over in IMG Tag anzeigen

Hallo

Seit neusten Versuche ich mich in CSS etwas auf die beine zu stellen.

ich habe folgendes Szenario:
Unbenannt-1.jpg

HTML-Code:
<TABLE width=640><TR><TD>

<TABLE border=0 cellspacing=0 cellpadding=0 width=100%><TR>
<TD width=10%><a href='#zurück'><IMG SRC="/imagesfree/left.png" border=0 alt='zurück' Title='zurück'></A></TD>
<TD width=80%><CENTER><A HREF='hauptbild'><IMG ALT='hauptbild' title='hauptbild' SRC='/images/action1.jpg' border=1></A></TD>
<TD width=10%><a href='#vor'><IMG SRC="/imagesfree/right.png" border=0 alt='vor' Title='vor'></A></TD>
</TR></TABLE>

</TD></TR><TR><TD>
<HR>

<H3>Bilder auswahl</h3>
<CENTER>


<TABLE width=80% border=0 cellspacing=0 cellpadding=0>
<TR>
<TD align=center><A HREF='#bild2'><IMG SRC="/images/action2.jpg"  border=1 alt="pic2" title="pic2" ></A></TD>
<TD align=center><A HREF='#bild3'><IMG SRC="/images/action3.jpg"  border=1 alt="pic3"   title="pic3" ></A></TD>
</TR><TR>
<TD align=center><A HREF='#bild4'><IMG SRC="/images/action4.jpg"  border=1 alt="pic4" title="pic4"></A></TD>
<TD align=center><A HREF='#bild5'><IMG SRC="/images/action5.jpg"  border=1 alt="pic5" title="pic5"></A></TD>
</TR></TABLE>

</TD></TR></TABLE>
Nun möchte ich, wenn jemand mit der Mouse über die unteren 4 Thumbnails fährt das dieses Foto dann im Hauptfenster oben größer eingeblendet wird und beim verlassen wieder das Originalfoto angezeigt wird. Des weiteren soll es responsive sein.

Wäre über eure Tips und Lösungsansätze sehr dankbar.

Gruss

Maiki
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.12.2022, 10:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Des weiteren soll es responsive sein
Dann solltest du, bevor du dir CSS aneignest, dich mit den Grundsätzen von HTML befassen. Stellst du tabellarische Daten dar? Wenn die Antwort nein lautet (und das sollte sie bei einer Bildergalerie) schmeiße alles, was du an table-elementen in der Seite hast, raus. Auch ist <center> -tag deprecated, aussehen der Seite wird heutzutage mit CSS definiert. Auch align="center" wird heute nicht mehr verwendet, das muss auch gelöscht werden:

Dann bleibt folgendes übrig:
Code:
<a href='#zurück'><IMG SRC="/imagesfree/left.png" border=0 alt='zurück' Title='zurück'></A><A HREF='hauptbild'><IMG ALT='hauptbild' title='hauptbild' SRC='/images/action1.jpg' border=1></A>
<a href='#vor'><IMG SRC="/imagesfree/right.png" border=0 alt='vor' Title='vor'></A><HR>

<H3>Bilder auswahl</h3>
<A HREF='#bild2'><IMG SRC="/images/action2.jpg"  border=1 alt="pic2" title="pic2" ></A>
<A HREF='#bild3'><IMG SRC="/images/action3.jpg"  border=1 alt="pic3"   title="pic3" ></A>

<A HREF='#bild4'><IMG SRC="/images/action4.jpg"  border=1 alt="pic4" title="pic4"></A>
<A HREF='#bild5'><IMG SRC="/images/action5.jpg"  border=1 alt="pic5" title="pic5"></A>
Damit hast du dein Grundgerüst für ein valides HTML.
Du kannst deinen hover-effekt nicht mit CSS umsetzen, dafür braucht es in deinem Fall Javascript. Du definierst einen event-handler für hover und tauscht dann das Bild im Main-Bereich aus.

Falls du dich jetzt beschwerst dass deine Seite nicht mehr ganz so aussieht wie mit deinen Tables: Willkommen bei den Grundlagen zu CSS, das ist der perfekte Ausgangspunkt um es zu lernen.
Nimm divs um die Elemente zu gruppieren und style diese dann mit CSS damit es so aussieht wie gewünscht.

Das "es soll responsive sein" kannst du beim ersten lernen ja auslassen. Da es dafür dann wohl wieder auf ähnliches hinaus laufen wird: 90% des Codes löschen und das CSS neu schreiben damit es für responsive passt.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
per jquery flash entfernen und html anzeigen lassen destroy90210 Javascript & Ajax 2 02.01.2010 18:15
Variable per GET übergeben und weitere Infos anzeigen Praktikant Serveradministration und serverseitige Scripte 14 13.06.2008 18:59
img alt per css definieren kampfgnom CSS 4 20.03.2007 19:15
Tag zum anzeigen von Tags ohne Sonderzeichen? oSonnYo (X)HTML 3 17.11.2006 20:46
img alt tag über css steuern?? biki CSS 1 12.09.2003 20:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:52 Uhr.