[HTML] onmouseOver bild vergrößern

H3lium · 24. Juni 2004

hallo zusammen. ich hab folgende frage. wie kann ich eine bild datei beim überfahren mit der maus vergrößern lassen?
ich hab ein menü, das mit bildern aufgebaut ist, und wenn man jetzt mit der maus auf ein menü punkt fährt sollte es sich ein bisschen vergrößern.

hoffe mir kann jemand helfen.

lg h3lium

Mr. Snoot · 24. Juni 2004

Du kannst einfach einen Mouse-Over Effekt erstellen, bei dem beim Überfahren mit der Maus ein anderes Bild - in deinem Fall das gleiche nur etwas vergrößert (mit irgendeinem Bildbearbeitungsprogramm vergößert) - angezeigt wird.

Z.B. so:
das im <head></head>-Bereich:

Code:

<script language="JavaScript">
<!--

button1= new Image();
button1.src = "bild_groß.gif";
button2= new Image();
button2.src = "bild_klein.gif";

//-->
</script>

und das im <body></body>-Bereich

Code:

<a href="http://www" onmouseover="switch1.src='bild_groß.gif';" onmouseout="switch1.src='bild_klein.gif';"><img src="bild_klein.gif" width="" height="" border="0" name="switch1"></a>

silentx · 25. Juni 2004

Also die lösung ist ein wenig aufwendig wenn es ein grosses
menu wird. Eine Lösung mit schlaufen könnte etwas sein, werde
es am weekänd versuchen zu realisieren

Nur vergrössern:

HTML:

<a href="http://www.link.ch" onmouseover="javascript:window.getElementsByName('bild').width=100);" onmouseout="javascript:window.getElementsByName('bild').width=50);"><img src="bild1.jpg" name="bild"></a>

Habe es allerdings nicht getestet. Wie gesagt, werde dies allenfalls am weekend
noch nachholen.

Mr. Snoot · 25. Juni 2004

Oh..

Kannst natürlich bei jedem Mausover-Effekt einfach das gleiche Bild nehmen und größere Abmessungen einstellen.

silentx · 25. Juni 2004

Nein das geht natürlich nicht, das ist mir auch klar.
Nur wenn er es ein wenig grösser will geht dies schon.

Aber deine Lösung sollte auch in einer Schlaufe gelöst
werden, denn wenn ich 20 menüpunkte habe ist deine
schon ein wenig doof oder?

Mr. Snoot · 25. Juni 2004

Naja, kommt drauf an wie man alles verpackt. Wenn das Menü auf jeder Seite neu geladen werden muss isses schon etwas doof, aber wenn man's per include etc. einbindet isses im Grunde auch nicht komplizierter. Aber egal - er kann ja nehmen was er will

Crunchtime · 25. Juni 2004

hi!

also über php könnte man das wie du bereits sagtest, sehr gut includen, ABER, es steht KEIN wort von php in seinem thread....und wenn er sogar im topic HTML schreibt und schon da kaum nen plan hat, dann wird er wohl kaum mit php zu recht kommen :S

H3lium · 25. Juni 2004

danke erstmal! ich habs mal auf meinem server, vielleicht is dann bisschen besser zu verstehen.

www.pix2003.de/test2/

so sieht das ding aus. unter dem bild oben ist dann das menü wie man sieht, und das sollte dann beim drüber fahren größer werden.

mit 2 grafiken ist es möglich, ich weiß. aber ich denke mal es muss auch einen einfacheren und schnelleren weg geben. den ich würde es für andere dinge gern auch nochmal verwenden.

PS: ich weiß mit php nur wie man etwas included also <?php include... ?>
bis her weiß ich mit php nichts

wäre aber bereit dazu zu lernen solange es verständlich ist

Mr. Snoot · 25. Juni 2004

Wie gesagt, du kannst auch ein und das selbe bild nehmen, nur dass du beim Mouse-Over-Effekt dann anderen Abmessungen einstellst.

H3lium · 25. Juni 2004

kannst du mir ein bsp geben? wo bau ich die abmessungen ein?
ich bekomms nicht hin

Mr. Snoot · 25. Juni 2004

Z.B. an silentx' Beispiel (damit er endlich Ruhe gibt mit seiner Schlaufe

)

<a href="http://www.link.ch" onmouseover="javascript:window.getElementsByName('bild').width=100);" onmouseout="javascript:window.getElementsByName('bild').width=90);"><img src="bild1.jpg" name="bild"></a>

Aber das ist ja daselbe in Grün. Entweder nimmst du ein Bild mit verschiedenen Abmessungen, die du im Quelltext angibst, oder du bindest zwei verschieden große Bilder ein. Gehupft wie gesprungen

Bitpicker · 25. Juni 2004

g e l ö s c h t

H3lium · 25. Juni 2004

mh bitpicker

das hab ich auch schon überlegt, falls jemand nämlich scripts deaktiviert hat geht dann warscheinlich gar nix mehr .... :-(
das ist auch nicht ganz ziel der sache....

gibts alternativen? vielleicht mit flash?

Bitpicker · 25. Juni 2004

g e l ö s c h t

H3lium · 25. Juni 2004

ich denk ja an unsere modem meschen. deswegen will ich ein image vergrößern und nicht extra immer 2 nehmen... aber so wie es ausieht, sollte ich eslieber sein lassen ...

muss mal schaun was mit flash machbar ist...

redfng · 16. Mai 2009

<html>
<head>
<script type="text/javascript" language="javascript">
function large(el,num)
{
if(num==1){
el.style.width="800px";
}
if(num==0){
el.style.width="100px";
}
}
</script>
</head>
<body>
<img src="bild1.jpg" onload="large(this,0);" onmouseover="large(this,1);" onmouseout="large(this,0);"/>
</body>
</html>

Suche

[HTML] onmouseOver bild vergrößern

H3lium

Cadet 4th Year

Mr. Snoot

Gast

silentx

Cadet 2nd Year

Mr. Snoot

Gast

silentx

Cadet 2nd Year

Mr. Snoot

Gast

Crunchtime

Lt. Commander

H3lium

Cadet 4th Year

Mr. Snoot

Gast

H3lium

Cadet 4th Year

Mr. Snoot

Gast

Bitpicker

Banned

H3lium

Cadet 4th Year

Bitpicker

Banned

H3lium

Cadet 4th Year

redfng

Ensign

Ähnliche Themen