Bild durch Mouseover an anderer Stelle vegrößert anzeigen

[Johnson]

Hallo zusammen,

ich arbeite zurzeit für ein Schulprojekt an meiner ersten Internetseite und habe deshalb wenig Ahnung von Programmierung.

Ich möchte gerne, das die 5 Bilder der Seite http://annasart.myartsonline.com/Aktuelles.html durch herüberfahren der Maus darunter in Großdarstellung angezeigt werden. Wenn ich über das nächste Bild gehe soll dies an der gleichen Stelle angezeigt werden wie das erste in Großdarstellung.

<div id="content">
<h2>Aktuelles</h2>
<p>Hier bekommen Sie einen Einblick über die Entstehung des aktuellen Ölgemäldes "Broken Mirror" .</p>
<table width="768" border="0" align="center">
  <tr>
    <td><img name="1" src="Galerien/Aktuelles/Schritt-1.jpg" alt="1" width="157" height="193" class="imgb" /></td>
    <td><img name="2" src="Galerien/Aktuelles/Schritt-2.jpg" alt="2" width="159" height="193" class="imgb" /></td>
    <td><img name="3" src="Galerien/Aktuelles/Schritt-3.jpg" alt="3" width="146" height="193" class="imgb" /></td>
    <td><img name="4" src="Galerien/Aktuelles/Schritt-4.jpg" alt="4" width="145" height="193" class="imgb" /></td>
    <td><img name="5" src="Galerien/Aktuelles/Schritt-5.jpg" alt="5" width="145" height="193" class="imgb" /></td>
  </tr>
  <tr>
    <td>Schritt 1</td>
    <td>Schritt 2</td>
    <td>Schritt 3</td>
    <td>Schritt 4</td>
    <td>Schritt 5</td>
  </tr>
</table>

<table width="768" border="0" align="center">
  <tr>
    <td><img src="Galerien/Aktuelles/Unbenannt-1.jpg" width="587" height="739" /></td>
  </tr>
</table>
</div>

Für schnelle Hilfe wäre ich sehr dankbar.

Gruß Jonas

[Christian Wansart]

Hallo Jonas,

du könntest es mit JavaScript lösen. Dazu gibt es ein entsprechendes „mouseover“-Event mit welchem du eine JavaScript-Funktion aufrufen kannst, die dann wiederum das Bild anzeigt. So in etwa:

var bilder = document.querySelectorAll('#content > table:first-child > tr > td > img');

// Event hinzufügen:
for(var i in bilder)
	bilder[i].addEventListener('mouseover', mouseOver);
}

function mouseOver() {
	// Hier musst du dann noch die URL auslesen, von dem Thumbnail über
	// den du gerade drüber fährst und anschließend in deinem zweiten Bild
	// anzeigen lassen.
}

Die Frage ist natürlich, wie viel JavaScript- oder Programmierkenntnisse du allgemein hast, um diese Aufgabe zu lösen.

Freundliche Grüße
Christian

[Jonathan Harker]

Hallo zusammen,

Ich möchte gerne, das die 5 Bilder der Seite http://annasart.myartsonline.com/Aktuelles.html durch herüberfahren der Maus darunter in Großdarstellung angezeigt werden. Wenn ich über das nächste Bild gehe soll dies an der gleichen Stelle angezeigt werden wie das erste in Großdarstellung.

also eine Bildergalerie: einige Tutorials auf englisch

oder ein Bilderkarussell

JavaScript brauchst du dafür nicht.

<table width="768" border="0" align="center">
  <tr>
    <td><img name="1" src="Galerien/Aktuelles/Schritt-1.jpg" alt="1" width="157" height="193" class="imgb" /></td>

Eine Tabelle solltest du aber auf keinen Fall verwenden - eher eine Liste.

Gruß Jonas

Gruß Jonathan

[Der Martin]

Hallo,

Ich möchte gerne, das die 5 Bilder der Seite http://annasart.myartsonline.com/Aktuelles.html durch herüberfahren der Maus darunter in Großdarstellung angezeigt werden. Wenn ich über das nächste Bild gehe soll dies an der gleichen Stelle angezeigt werden wie das erste in Großdarstellung.

JavaScript brauchst du dafür nicht.

da habe ich noch meine Zweifel - aber ich lasse mich gern überzeugen.

Natürlich war mein erster Gedanke auch eine reine CSS-Lösung - eine Änderung, die durch :hover ausgelöst wird. Aber wie denkst du, kann :hover auf ein Element wirken, das an einer ganz anderen Stelle im DOM-Baum steht?

Andere Frage: Was ist mit Besuchern/Geräten, die kein :hover bzw. mouseover unterstützen?

Eine Tabelle solltest du aber auf keinen Fall verwenden - eher eine Liste.

Ja, zum Beispiel. Das ändert aber nichts an der grundsätzlichen Problematik.

So long,
 Martin

[JürgenB]

Hallo Martin,

Natürlich war mein erster Gedanke auch eine reine CSS-Lösung - eine Änderung, die durch :hover ausgelöst wird. Aber wie denkst du, kann :hover auf ein Element wirken, das an einer ganz anderen Stelle im DOM-Baum steht?

andere Stelle im Dokument muss ja nicht andere Stelle im DOM bedeuten.

@Johnson: denke auch an Besucher ohne Maus, :hover sollte nicht ohne :focus auftreten.

Gruß
Jürgen

[Der Martin]

Hi Jürgen,

Natürlich war mein erster Gedanke auch eine reine CSS-Lösung - eine Änderung, die durch :hover ausgelöst wird. Aber wie denkst du, kann :hover auf ein Element wirken, das an einer ganz anderen Stelle im DOM-Baum steht?

andere Stelle im Dokument muss ja nicht andere Stelle im DOM bedeuten.

stimmt wohl, aber das würde dann vermutlich in wüste Positionierungs-Orgien ausarten: Das Bild in voller Größe müsste absolut in einem Vorfahrenelement positioniert sein, das es mit dem Vorschaubild gemeinsam hat. Möglich, aber nicht schön, finde ich.

@Johnson: denke auch an Besucher ohne Maus, :hover sollte nicht ohne :focus auftreten.

Das hatte ich ja schon angedeutet, wenn auch ohne :focus konkret zu erwähnen.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Ich möchte gerne, das die 5 Bilder der Seite http://annasart.myartsonline.com/Aktuelles.html durch herüberfahren der Maus darunter in Großdarstellung angezeigt werden. Wenn ich über das nächste Bild gehe soll dies an der gleichen Stelle angezeigt werden wie das erste in Großdarstellung.

JavaScript brauchst du dafür nicht.

da habe ich noch meine Zweifel - aber ich lasse mich gern überzeugen.

Die kleinen Bilder sind Inhalte von li-Elementen, die großen after-Pseudoelemente der li, absolut zur ul positioniert .

li::after {
  display: none; 
}
li:first-child::after, /* das erste ist sichtbar */
li:hover::after,
li:focus::after {
  display: block;
}

wäre eine denkbare Lösung.

Bis demnächst
Matthias

[Linuchs]

oder ein Bilderkarussell

Klingt verlockend, bin dem Link gefolgt. Aber da dreht sich gar nichts. Liegt es an meinem Firefox 48.0 ?

Linuchs

[marctrix]

Hej Johnson,

Ich möchte gerne, das die 5 Bilder der Seite http://annasart.myartsonline.com/Aktuelles.html durch herüberfahren der Maus darunter in Großdarstellung angezeigt werden. Wenn ich über das nächste Bild gehe soll dies an der gleichen Stelle angezeigt werden wie das erste in Großdarstellung.

Meinst du so etwas wie pure css image popups. Dafür benötigst du einfach nur zwei Bilder.

Ein Tipp: wähle die "Vorschau-Bilder" groß genug, um sie auf Smartphones in voller Breite anzeigen zu können. Dann lässt du diesen Effekt auf kleinen Bildschirmen einfach weg. Ein tap darauf könnte ja das Original-Bild öffnen, einfach einen normalen Link drauf legen.

Alles pures HTML und CSS, kein JS...

Marc

[Matthias Scharwies]

Servus!

Ich habe den Wiki-Artikel Bildergalerie mal aktualisiert und Beispiele online gestellt:

BTW: Früher war Stu Nicholls mein Hero, da hatt' ich aber auch noch kein Handy:

Herzliche Grüße

Matthias Scharwies