nicht angemeldet
Bild bei MouseOver vergrößern ...
... und bei MouseOut wieder verkleinern.
So werden Standbilder zum Klick für Videos in youtube abgeboten.
Habe das mal mit JS nachgebaut. Klappt auch soweit, wenn man mit der Maus wartet, bis das alte Bild wieder klein ist.
Es sollte aber auch funktionieren, wenn man schon das nächste Bild anklickt. Während das vorherige kleiner wird, wächst schon das nächste.
Ich denke, da wäre eine Einführung in Objektorientierte Programmierung nützlich. Jedes Objekt hat dann auch seine momentanen Daten, die unabhängig von anderen Objekten abgearbeitet werden.
Kennt jemand für das Bilder- Beispiel eine kleine, verständliche Anwendung zum Nachvollziehen?
LG Bug
-
Hallo,
haben die bilder eine feste größe?
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
haben die bilder eine feste größe?
Ja, in Pixel. Ist das wichtig für den Lösungsansatz? Und ja, sie sind farbig, vielleicht auch ein wichtiger Hinweis.
Bug
-
Hallo,
bei onmouseover und onmouseout kannst du dem Bild werte zuweisen, die die neue breite und höhe darstellen
function NeueWerte(NameDesBildes, b, h) {
document.getElementById(NameDesBildes).style.width = b;
document.getElementById(NameDesBildes).style.height = h;
}MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this-
also .style. gibt einen Fehler.
Aber warum klappt dies nicht:
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' onMouseOver="this.height=150"></a></li>Per CSS ist die Breite auf 133px, die Höhe auf 100px festgelegt.
Wenn ich die CSS- Deklaration rausnehme und dieses mache:
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' width=133 height=100 onMouseOver="this.height=150"></a></li>klappt es.
Kann ich per JS die CSS- Höhe ändern?
Bug
-
Hi,
Aber warum klappt dies nicht:
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' onMouseOver="this.height=150"></a></li>Weil ein A-Element kein height-Attribut hat.
Wenn ich die CSS- Deklaration rausnehme und dieses mache:
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' width=133 height=100 onMouseOver="this.height=150"></a></li>klappt es.
Hoechstens durch Zufall.
A ist ein inline-Element, darf also gar keine width- und height-Angaben aus CSS umsetzen - so lange du es nicht dazu bewegst, nicht mehr inline dargestellt zu werden.
Kann ich per JS die CSS- Höhe ändern?
Natuerlich, ueber das style-Attribut.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Aber warum klappt dies nicht:
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' onMouseOver="this.height=150"></a></li>Weil ein A-Element kein height-Attribut hat.
??? <img ...
Ich gebe für heute auf, auch dies geht nicht:
ul.navi a img {width:61px; height:50px}
<ul class=navi>
<li id=welcome> <a href='index.htm'><img src='img/welcome_sw.jpg' onMouseOver="alert( 'height=[' +this.style.height +']' );" onMouseOut="this.width=133;this.height=100"></a></li>Das Bild wird auf die verlangte Größe von 61 x 50 verkleinert, aber die alert-Ausgabe ist
height=[]Bug
-
-
Hallo,
also .style. gibt einen Fehler.
und wie wärs denn, wenn du den fehler mal hinschreibst?
mit der Aussage kann ich nichts anfangen.
Schau in die Fehlerkonsole!MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this
-
-
-
-