Bild durch darüberfahren mit der Maus vergößern

[hanna]

Habe schon auf einigen Seiten gesehen, dass das geht!!
Wenn ein Bild dargestellt wird und man dann mit der Maus darüberfährt, es sich automatisch vergrößert!!
Kann mir da jemand helfen??
Dankeschön im Vorraus

[Sven Rautenberg]

Moin!

Wenn ein Bild dargestellt wird und man dann mit der Maus darüberfährt, es sich automatisch vergrößert!!
Kann mir da jemand helfen??

Das ist nichts anderes als das typische Mouseover-Bildertausch-Skript, das es tausendfach im Web gibt - auch bei SelfHTML in den Javascript-Anwendungsbeispielen.

- Sven Rautenberg

[Chräcker Heller]

Hallo,

sowas? ;-))) (NS7, mozilla und IE tauglich....)

http://www.inger.de/minne_a_tour/bilder/auf_laub/araberlupe.html

Chräcker

[hanna]

nein so wie das da!! -> http://www.disco-wunderbar.at/ELEMENTE/PICS/fotos_feb/INDEX.HTM

[NAG]

nein so wie das da!! -> http://www.disco-wunderbar.at/ELEMENTE/PICS/fotos_feb/INDEX.HTM

ganz subjektiv gesagt ist das ein ziemlich lächerlicher und häßlicher effekt!

mfg NAG

[hanna]

Es darf ja jeder seine Meinung sagen, da hab ich auch nichts dagegen!!
Aber i will des halt so auf meiner Seite haben und deshalb frag i ja!
Naja vielleicht kann mir doch noch jemand weiterhelfen!!!
danke hanna

[Chräcker Heller]

Hallo,

keine Ahnung, wie die das gemacht haben, aber ich würde es so machen bzw anfangen. (Und dabei darauf achten, das es nicht nur im IE geht ;-))

Fragestellung: wie bekomme ich ein Bild von der mitte des Browserfensters von klein nach groß hin angezeigt, eben in dieser Animation. Ich brauche einzelnen Phasen. Es geht ja nicht nahtlos, das wären zuviele Schritte. Also ein Bild, das zuerst in der Größe 5 mal 10 Pixel dargestellt wird, dann 10 mal 20, 30 mal 60, etc bis zu 200 mal 400. (Als Bsp.... sagen wir 6 Zwischenschritte...)

Dazu nehme ich einen Divbereich das 5 mal 10 Pixel groß ist und in dem ein image drin ist (die Original grosse Imagedatei), das aber per height und width-Wert auf 5 mal 10 Pixel gestaucht wurde. Jetzt ermittel ich die Fensterbreite und Höhe des Besucherfensters, teile das durch 2 (damit bekomme ich die Mitte) und bekomme so die Position (Ergebnis minus 2 (abgerundet)  bzw 5) bei der ich das Div der ersten Phase positionieren muß. Jetzt habe ich ein 5 mal 10 Pixel großes Bild in der mitte des Bildschirmes. Jetzt muß ich per JS lediglich dynamisch diese Positionierung ändern und die Höhen und Breitenangaben des Divs und des Images ändern, und zwar für jede Phase einmal. Erst in 10 mal 20 (und das Div etwas nach links und oben rücken) dann 30 mal 60 (und das Div noch weiter nach oben und links rücken) etc bis endlich in der mitte des Bildschirmes das 200 mal 400 breite Bild zu sehen ist.

Dann koppel ich das ganze mit einem mouseover an den Effektauslöser, das Thumbnail vom Bild. Fahre ich drüber, dann lasse ich das Div/image immer größer werden indem ich eben die jeweiligen Angaben dynamisch ändere, (und die top-left Position des Divs so anpasse, das das Bild immer in der Mitte des Fensters ist), verläst die Maus das Thumb, gehts den umgekehrten Weg.

Das wäre mein sicher noch zu verfeinernde Ansatz zu "Selfer machen"....

Chräcker

[SeKo]

Hi Hanna :-)

Schau dir doch mal den Quellcode an.
Dieser ist zu finden , wenn du (bei IE) auf Ansicht und Quelltext gehst...
Dort findest du den Code von Javascript. Dieser erledigt diesen Effekt.
Das alles, von :

<script language="javascript">

bis

</script>

kannst du ja so auf deiner Seite übernehmen und dann die Bilder mit dem :

<td><a href="javascript:void(0)" onMouseOver="zeige(0)" onMouseOut="raus(0)"><img src="Bilder/1.jpg" NOSAVE border=0 height=75 width=100></a></td>

auf deiner Seite positionieren.

Versuche einfach mal die Seite zu kopieren und statt der gegebenen Bilder (z.Bsp. hier Bilder/1.jpg) deine einzusetzen.

Mit anderen Worten: Spiel etwas rum.

Viel Spaß dabei
SeKo

[hanna]

Dankeschön!
Aber eine blöde Frage noch (bin momentan total neben den Schuhen)
Was heißt (bei IE)?? bitte kannst du mir das noch sagen??!!
mfg hanna

[hanna]

Dankeschön!!
Hat sich erledigt!! Hab es gefunden!!
Danke nochmals für deine Hilfe!!
lg hanna

[SeKo]

Hoi :-)

Was ist IE...
Hat sich erledigt!! Hab es gefunden!!

IE ist InternetExplorer ...

Danke nochmals für deine Hilfe!!

büdde büdde :-)

Viel Spaß

[hanna]

Hab jetzt schon alles drauf auf meiner Page!!
Vielen Dank!!