Bei onMouseOver ein Bild vergrößern

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,
ich bin auf der Suche nach einem Script mit dem ich ein Bild vergrößern kann wenn ich mit der Maus darüberfahre:
Habe auch schon einiges gefunden aber entweder hats nicht richtig funktioniert oder war nicht das was ich gesucht habe:

Ich suche etwas wie derzeit bei Ebay:
Am Rand bei den Artikeln gibt es jetzt ab und zu ein „Vergrößern“, wenn man mit der Maus darüber geht öffnet sich so ne Art Fenster mit dem vergrößerten Bild.

Ist das Javascript?

Bitte um eure Hilfe!
Vielen Dank
Gruß Basti

2

Wenn jemand Javascript deaktiviert hat, dann funktioniert es nicht.
Du kannst es so machen: (CSS)
Man setzt einen Container mit einer Standartgrösse, und das Bild als Hintergrund.
Wenn man mit der Maus drüber geht, wird der Container grösser. Doch das mit der Bildgrösse wird komisch… -.-

MfG, matibaski

3

Habe schon versucht bei Ebay im Quelltext schlau zu werden, bin ich aber nicht. :slight_smile:

Muss auch gestehen das ich jetzt nicht grad der CSS oder JavaSkript Profi bin :frowning:

Habe einige Seiten gesehen die viel mit dem OnMouseOver Efekt arbeiten aber meine Idee war noch nicht dabei.

4

suxh mal bei google nach ‚lightbox‘, falls du sowas meinst

5

Alo im moment habe ich es so:

So würde es mir passen, nur kann ich immer nur z.B. Breite oder Höhe ändern und nicht Breite UND Höhe gleichzeitig.
Wie müsste ich das schreiben?

6

Benutze doch eine Funktion, welches dieses übernimmt.

*ungetestet

<script type="text/javascript">
function changeIMG(what, width, height) {
  document.getElementById(what).width = width;
  document.getElementById(what).height = height;
}
</script>

<img id='bild1' src="bild1.jpg" onMouseOver="changeIMG('bild1','800','640');" onMouseOut="changeIMG('bild1','480','320');" height='480' width='320'>
7

kannst dich gern über ne PN an mich richten

ich habe das kleine script auf meinem rechner liegen und kann es dir gern rüber schicken

8

Ist der Script so groß ?

Wenn nicht, poste ihn doch bitte ins Forum. Dadurch werden andere User auch schlau :wink:

Z!

9

Hier gehts zur Demo → Link

und hier zum Download → Link

Sollte eigentlich recht einfach zu verstehen sein, wenn man sich den quelltext anschaut

Ansonsten einfach fragen…

10

@ matcho:
Vielen Dank! Das hat genauso funktioniert wie es sollte.
Eine frage noch, ich benutze das ganze auf einer Seite die sich immer wieder Aktualisiert.
Allerdings verschwindet dann immer wieder dieses Fenster mit dem Bild.

Ich aktualisiere mit dem

aber da gibts doch auch was mit JavaSkript oder?

Bzw. wie könnte ich es besser machen?
Evtl eine Art PopUp, ohne Symboleiste usw?

Gruß

11

soweit ich weiss ist „Java Script“ bei eBay verboten zumindest bei „normalen“ Nutzern.
onmouseover ist Java Script,
ich will aber denoch Bilder durch onmouseover vergrößern, soll ja über css auch funktionieren, hat da jmd. einen beispielquellcode für, oder vielleicht noch eine andere alternative bilder etwas professioneller in eBay darzustellen?! :wink: