Thumpnail per mouse Over in IMG Tag anzeigen

Maiki1706 · #1 (**permalink**) 28.12.2022, 12:16

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

cloned · #2 (**permalink**) 29.12.2022, 09:03

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

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