Tutorial HTML, CSS u. PHP - Forum

[Ritch]

Hallo Zusammen, ich möchte ein paar Bilder nebeneinander haben und wenn man mit der Mouse drüber geht soll sich das Einzelne vergrößern. Mit dem vergrößern habe ich auch schon hinbekommen aber leider schiebt das vergrößerte Bild das daneben liegende weg. Ich möchte, das das vergrößerte Bild über das andere dargestellt wird.

Bisher habe ich es so:

Code: Alles auswählen

<table  cellspacing="5" style="text-align: center;margin: 0 auto;">
    <tr>
        <td><img onmouseover="(src='bild.jpg')" onmouseout="(src='bild.jpg')" src="bild.jpg"/></td>
        <td><img onmouseover="(src='bild.jpg')" onmouseout="(src='bild.jpg')" src="bild.jpg"/></td>
    </tr>
</table>

[Sarkkan]

Das hat nichts mit JavaScript zu tun, sondern mit CSS
Du solltest ein anderes Bild die neue Source geben und es absolut positionieren und einen z-index vergeben

Übrigens, ein Tipp:
Es ist weitaus professioneller wenn man nicht die on-Events in den HTML-Tags verwendet, sondern die Events überwachen/"abhören" lässt.
Verwendest du irgendwelche Frameworks? Ansonsten kann ich dir dazu gleich noch eine kleine Funktion schreiben, da der IE < 9 mal wieder ne extra wurst braucht^^

[Basiii]

Mit CSS ginge das so:

HTML:

Code: Alles auswählen

  <div class="imageHold">
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
  </div>


CSS:

Code: Alles auswählen

div.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHold div {
  float: left;
  width: 230px;
  height: 150px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 50px;
}

div.imageHold img {
  width: 230px;  /* wir skalieren das große bild auf die kleine größe */
  height: 150px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 400px;       /* die weite beim vergrößern */
  height: 260px;      /* die höhe beim vergrößern */
}


Funktioniert auch im IE, wir brauchen nur noch ein Bild.

[Ritch]

Klasse Basiii funktioniert Super!

Ich Danke und Grüße!

[Basiii]

Und bei Fragen nicht verzagen, ich hab eh nichts zu tun