• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zoom-Funktion funktioniert nicht richtig

T

THE_fan

Neues Mitglied
Howdi,

mal wieder nen Problem.

Habe versucht mit CSS nen Zoom zu realiseren.
Sprich, wenn man mit der Maus über ein Bild fährt, wird es vergrößert dargestellt. Eigentlich ja nicht so schwer.
Allerdings gibt es da ein Problem und ich weiß nicht, woran das liegen kann.

Zu sehen hier Freiwillige Feuerwehr Oberwalluf - TLF 16/25

Wenn ich also unter "Beladung" mit der Maus über die einzelnen Bilder fahre, verschwindet immer das letzte.

Code: 
                <div id="fhzgbild_small">
                  <a href="#"><img src="http://www.html.de/images/thumbs/tlf_400.jpg" alt="TLF 16/25" id="imgfhzg" class="zoom1"></a>
                </div>
                <div id="fhzgbild_small">
                  <a href="#"><img src="http://www.html.de/images/thumbs/tlf_400.jpg" alt="TLF 16/25" id="imgfhzg" class="zoom2"></a>
                </div>
                <div id="fhzgbild_small">
                  <a href="#"><img src="http://www.html.de/images/thumbs/tlf_400.jpg" alt="TLF 16/25" id="imgfhzg" class="zoom3"></a>

                </div>
                <div id="fhzgbild_small">
                  <a href="#"><img src="http://www.html.de/images/thumbs/tlf_400.jpg" alt="TLF 16/25" id="imgfhzg" class="zoom4"></a>
                </div>
                <div id="fhzgbild_small">
                  <a href="#"><img src="http://www.html.de/images/thumbs/tlf_400.jpg" alt="TLF 16/25" id="imgfhzg" class="zoom5"></a>
                </div>

Und CSS habe ich folgendermaßen

Code: 
#fhzgbild_small{
  width:            140px;
  float:            left; 
}

#fhzgbild_small a:hover .zoom1{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom2{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom3{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom4{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom5{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom6{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom7{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}
#fhzgbild_small a:hover .zoom8{
  width:            400px; 
  z-index:          2;
  position:         absolute;
  cursor:           default;
}

Anders wusste ich es eben nicht zu lösen - scheint mir etwas umständlich aber es funktioniert ja erstmal auch weitesgehend.

Kann mir jemand sagen, wieso das jeweils letzte Bild verschwindet?
Danke!

/e
Ich weiß, dass nicht immer ganz korrekt ist, wie id und wie class eingesetzt wird. Das kam mir aber erst im Nachhinein und werde es noch ändern.

/e2
Wieso werden im HTML-Code hier von der Seite in dem IMG-Tag vor meinen Pfad
Code: 
http://www.html.de/
eingefügt?
 
Werbung:
Rein vom Ausprobieren, ohne Code gelesen zu haben, sieht das für mich so aus, als würdest Du das jeweils überfahrene Bild absolut positionieren und vergrößern, dadurch steht es nicht mehr im Textfluss und die anderen, nachfolgenden Bilder rutschen dann nach links. Dadurch sieht es so aus, als würde das letzte verschwinden, was es aber nicht tut.
 
Okay, das habe ich gehofft, dass es an der Positionierung liegt.

Gibt es eine Möglichkeit das anders zu lösen?

Danke!
 
Werbung:
Na klar. Lass das kleine Bild stehen. Meine Vermutung (wie gesagt, war zu faul zum Code lesen :-)) war ja, dass Du das Bild im hover lediglich vergrößerst. Lass stattdessen ein anderes Image erscheinen. Leg also vorher schon den HTML-Code für die große Version des Bildes an und gib ihm im Stylesheet display:none. Beim Überfahren setzt Du es dann auf display:block, damit wird es sichtbar. Die absolute Positionierung ist dabei schon in Ordnung. Aber das kleine Bild muss halt stehen bleiben, weil sonst die anderen rechts daneben nachrücken.
 
Werbung:
Das ist Sinn der Sache.
Die Bilder unten sind nur als Platzhalter für Bilder da, die es derzeit noch nicht gibt.

Derzeit sind fünf Bilder nebeneinander und jedes, über das man mit der Maus fährt, wird größer. Genau so ist es gewollt.

Was ich mich aber noch frage, ob ich das oben eingefügte CSS irgendwie vereinfachen, verschachteln, wie auch immer kann?! Oder muss hier dann für jedes Bild eine Zahl hochzählen und das entsprechende CSS dann angewand werden? Ich meine, der Browser (FF) kapiert, dass immer nur das Bild groß werden soll, welches gehovert wird, aber ob das alle Browser kapieren, weiß ich nicht.
 
Jetzt isses auf einmal richtig XD Vorher hat man die kleinen und die großen Versionen gesehen.
 
Werbung:
Ich habe auch immer wieder mal neue Dateien hochgeladen, scheinbar hast du dann grad ne falsche gesehen ;)

Um nochmal hierauf zurückzukommen:
THE_fan schrieb:
Was ich mich aber noch frage, ob ich das oben eingefügte CSS irgendwie vereinfachen, verschachteln, wie auch immer kann?! Oder muss hier dann für jedes Bild eine Zahl hochzählen und das entsprechende CSS dann angewand werden? Ich meine, der Browser (FF) kapiert, dass immer nur das Bild groß werden soll, welches gehovert wird, aber ob das alle Browser kapieren, weiß ich nicht.
Zum Vergrößern anklicken....

Jemand eine Idee?

Danke schonmal!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben