Wenn Maus über Bild -> Bild wird größer

[Megashop]

Hallo

Ich baue ein kleines Bild auf die Webseite und möchte, dass wenn man mit der Maus auf dem Bild ist, dass es sich automatisch vergrössert (Originalgrösse), also dass es ohne Klick zum Vorschein kommt, wenn man mit der Maus drüber fährt. Also ich möchte nicht, dass das Bild dann auf einer neuen Seite oder so geöffnet wird, sondern es soll auf der gleichen Seite einfach zum vorschein in Original grosse kommen. Ihr wisst was ich meine?

Wie macht man das? Kennt sich wer damit aus?

Danke schonmal!

Bis dann

[darph]

<img src="blah.jpg" style="width: 10px; height: 10px;" onMouseOver="this.style.width = '100%'; this.style.height = '100%';" />

Gleiches dann wieder mit onMouseOut, dann nur wieder kleiner.

Ich bin mir jetzt grad nicht sicher, ob sich die 100% auf die Größe des Bildes oder auf die Größe des Elternelementes bezieht. Falls letzteres mußt du halt anstelle von '100%' eben die korrekte Größe des Bildes in Pixeln angeben.

Du weißt aber, daß auch wenn du das Bild in einer kleineren Größe einbindest, es dennoch vollständig geladen wird, bei sehr großen Bilden kann es also durchaus zu ziemlich langen Ladezeiten kommen, wenn du nicht mit Thumbnails arbeitest.

[Megashop]

Nabend

Vielen Dank, darph. Damit hat es "teilweise" geklappt. D.h. mit den 100% funktioniert es tatsächlich nicht, aber mit Pixel-Angabe dann schon.

Jedoch wird das Bild bei onmouseover richtig verzerrt und das Design verschiebt es ebenfalls (nur den Header bzw. die top.html).

Ich hab ein Bild auf die Grösse 250x100px verkleinert und in den Header eingebaut, nun möchte ich, dass bei mouseover dass Bild in Originalgrösse angezeigt wird, dazu müsste es das zweite Bild laden (welches ich eben in der Originalgrösse abgespeichert habe).

Wie funktioniert das?

Nochmals herzlichen Dank für deine Mühe!

[PatkIllA]

bei onmouseover auch den src ändern

onmouseover="this.src='bigimage.jpg'"

[mithrandir]

hm.. Wie wär's mit einem eigenen Layer, der beim mouseover eingeblendet wird, und der über den anderen Objekten liegt - damit würde sich das restliche Design nicht verschieben. Nur so ne Idee...

[Megashop]

Mhh ok, zwar hat es jetzt das andere Bild geladen, jedoch aber nicht vergrössert.

Könnt ihr mir mal den gesamten Code geben?

Vielen Dank!

[Sephiroth]

Mhh ok, zwar hat es jetzt das andere Bild geladen, jedoch aber nicht vergrössert.

Könnt ihr mir mal den gesamten Code geben?

Vielen Dank!
<img src="klein.jpg" onmouseover="this.src='gross.jpg';" onmouseout="this.src='klein.jpg';" />
du hast vermutlich bei deinem IMG tag eine feste größe angegeben, weswegen das große bilde nicht in der vollen größe gezeigt wird - ergo: weglassen.

[Megashop]

Soweit so gut. Nur besteht noch das Problem mit dem verschieben des Designs.

Was kann man da noch machen?

Danke!

[/dev/NULL]

Kann man sicher.. aber wie stellst Du dir das vor? Ich mein Du hast ein Design vorher, was toll (?) ausschaut, wenn da kleine Bilder sind und dann machst Dir einfach mal ein Design nachher, was toll ausschaut, wenn da ein großes Bild drinnen ist. Dann überlegst Du Dir was Du alles ändern mußt, wenn Du das erreichen willst.

Nach langem Testen und einer Probe stellst Du fest: Es geht, aber nur in einem Browser und Du entscheidest Dich im Endeffekt für ein Popup, weil es schneller geht,m kein Design kaputtmacht und auf allen Browsern geht.. wenn das Popup nur auf klick geöffnet wird funktioniert es auch mit den meisten Popupblockern.

Oder Du liest Dich in CSS ein, machst Layers, wobei Du da auch mit älteren Browsern Probleme haben wirst.

[PatTheMav]

Hmm zu der Lösung des Problems führen viele Wege, einige sind elegant, andere funktionieren auch im Internet Explorer ;)

Eine interessante Variante, welche nur auf CSS basiert (und einer geschickten Umsetzung der "Sliding-Doors" CSS-Technik) kann man hier begutachten :

http://www.simplebits.com/bits/photo_zoom.html

Um nun zu verhindern, daß das gezoomte Bild den Text verschiebt müsste man das Beispiel folgendermassen verändern :

Statt dem Bild bzw. dem Link setzt man dort eine Box rein, die die exakten Ausmaße des Thumbnails hat und per "float: right;" sich dort in die Ecke setzt und den Text umlaufen lässt (Inline-Content umfliesst per Float positionierte Box-Elemente). In die damit gefloatete Box wird der Link wie im Beispiel gesetzt, bekommt allerdings das Attribut "position: absolute;" und ist damit ausserhalb des Textflusses.

Der Rest kann bleiben wie er ist, durch den Hover auf dem Link wird das Hintergrundbild des Links auf das gezoomte Bild verändert, gleichzeitig muss man nur die Dimensionen des A-Tags verändern :

*schnipp*
<div style="float: right; margin: 2px; position: relative; width: 150px; height: 120px;">
<a href="#" style="position: absolute; top: 0px; left: 0px;">Zoom</a>
</div>
*schnapp*

Dadurch hättest du den Text dazu gebracht, das Thumbnail zu umfliessen, beim Zoom wird allerdings wirklich nur das Bild gezoomed und der Content bleibt davon unbeeindruckt.

Da hierfür aber ein Hintergrundbild mit Thumbnail und Zoom erforderlich ist, sind die Bilder nicht zum Abspeichern zu gebrauchen, möglich wäre hier den Link auf das grosse Bild zu setzen, damit man bei Klick auf das gezoomte Bild dann das in nem neuen Fenster öffnen kann. Gleichzeitig sparst dadurch auch Ladezeiten, weil sobald die Thumbnails geladen sind, auch das Zoombild geladen ist.

Weitere Möglichkeit wäre natürlich, das Bild als block-element per absoluter Positionierung zu platzieren und dann bei Klick die Visibility zu aktivieren :
document.getElementById('bla').style.visibility="visible";

bzw. im Opera (aktueller Opera-Bug, funktioniert so leider dann auch nur in
Opera und Firefox, Konqueror, Safari und IE schmeissen dann Scriptfehler oder
führen den Code garnicht mehr aus, daher Browserweiche davorschmeissen) :

if (navigator.userAgent.toLowerCase().indexOf("opera")+1) {
document.getElementById('bla').style.visibility="visible !important";
}

Ich halte allerdings erstere Variante für schöner als passionierter CSS-Coder, wobei ich weder CSS noch Javascript in die HTML-Datei setzen würde, dank DOM kann man alle Events und Style-Eigenschaften extern setzen, was Ladezeiten verkürzt und schöneres HTML erzeugt.