nicht angemeldet
Jetzt nicht lachen und nicht schimpfen : MousOver ...
Hi peoples :-),
Wie gesagt, vielleicht bin ich ja irgendwie blöd oder/und blind...
Ich habe folgendes gesehen. Da ich meine Buttons etwas dynamischer darstellen möchte, habe ich rumgeforscht, und kam halt auf die zwei Möglichkeiten bei Selfhtml :
Einmal mit CSS
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm#quelltext
und Java Script
http://selfaktuell.teamone.de/artikel/css/mouseover/index.htm#a1
Meine Frage ist nun die folgende : das Script, in JavaScript geschrieben arbeitet mit Bildern, indem es halt bei Mousover ein anderes Bild lädt. Das ist ok. Aber für mich nicht genug. Ich möchte, dass auch beim Raufdrücken ein weiteres Bild geladen wird... sprich dass 3 Zustände, also 3 Grafiken vorhanden sind.
Mit CSS geht es (siehe Link), aber eben nicht mit Bildern.
Nun frage ich mich, ob es entweder per JavaScript möglich ist, irgend eine "MousDown" Funktion einzufügen, damit ein weiteres Bild verwendet werden kann, oder ob man CSS beibringen kann, mit Bildern zu arbeiten...
Freue mich auf jede Hilfe.
Danke
Franzl
-
Hallo,
Ich habe folgendes gesehen. Da ich meine Buttons etwas dynamischer darstellen möchte, habe ich rumgeforscht, und kam halt auf die zwei Möglichkeiten bei Selfhtml :
Mit CSS geht es (siehe Link), aber eben nicht mit Bildern.
Hast du schon versucht mit Hilfe von CSS den Hintergrund dynamisch anzupassen? In den Eigenschaften kannst du das Hintergrundbild für den MouseOver Fall ja ganz normal angeben.
Dein Button kann dann ein <div> mit dem Linktext drin sein.Viele Grüße,
Stefan
-
Hallo,
Du kannst, wenn Du willst in deinem <img>-Tag sagen onMouseOver="machdieses" onMouseOut="machjenes" onMouseDown="machwasvoelliganderes" onMouseUp="machmalwasneues" und wahrscheinlich gehen noch 10 andere Sachen. Wichtig ist, dass Du die Bilder vorlaedst, damit die Aktionen schnell vonstatten gehen. Ueber Sinn und Unsinn solcher Aktionen musst Du Dir halt selbst im klaren sein.
Dieter
-
Hallo Franzl,
Wie gesagt, vielleicht bin ich ja irgendwie blöd oder/und blind...
na na na :)
Ich habe folgendes gesehen. Da ich meine Buttons etwas dynamischer darstellen möchte, habe ich rumgeforscht, und kam halt auf die zwei Möglichkeiten bei Selfhtml :
Guter Ansatz
Einmal mit CSS
noch besserer Ansatz
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm#quelltext
und Java Script
Naja...
http://selfaktuell.teamone.de/artikel/css/mouseover/index.htm#a1
Meine Frage ist nun die folgende : das Script, in JavaScript geschrieben arbeitet mit Bildern, indem es halt bei Mousover ein anderes Bild lädt. Das ist ok. Aber für mich nicht genug. Ich möchte, dass auch beim Raufdrücken ein weiteres Bild geladen wird... sprich dass 3 Zustände, also 3 Grafiken vorhanden sind.
Das wäre dann der Eventhandler onClick http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm
Mit CSS geht es (siehe Link), aber eben nicht mit Bildern.
Wer sagt denn sowas? schau mal hier http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4
Nun frage ich mich, ob es entweder per JavaScript möglich ist, irgend eine "MousDown" Funktion einzufügen, damit ein weiteres Bild verwendet werden kann, oder ob man CSS beibringen kann, mit Bildern zu arbeiten...
beides geht. In SELFHTML stöbern und Du wirst glücklich :)
Grüße aus Nürnberg,
HarryS -
hi ihr,
hab wie gesagt das selbe problem... das mit den onmouseover und onmouseout und onclick hab ich mir ja auch zusammengestückelt aber die befehle onmouseout und onclick "behindern" sich irgendwie gegenseitig... ich weis nich was da falsch is
BRAUCHE DRINGEND HILFE!!!
vielleicht kann sich ja mal jemand den EINEN lik anguckn, siehe unten.<div id="TBtrig10">
<a href="start.htm" target="frame"
onmouseover="toggleImages('', new Array('home', 'v03img/home_over.jpg', 'students', 'v03img/students.jpg', 'school', 'v03img/school.jpg', 'photos', 'v03img/photos.jpg', 'misc', 'v03img/misc.jpg', 'back', 'v03img/back.jpg')); return true;"
onmouseout="toggleImages('', new Array('home', 'v03img/home_down.jpg', 'students', 'v03img/students.jpg', 'school', 'v03img/school.jpg', 'photos', 'v03img/photos.jpg', 'misc', 'v03img/misc.jpg', 'back', 'v03img/back.jpg'), '', new Array('home', 'v03img/home.jpg', 'students', 'v03img/students.jpg', 'school', 'v03img/school.jpg', 'photos', 'v03img/photos.jpg', 'misc', 'v03img/misc.jpg', 'back', 'v03img/back.jpg')); return true;"
onFocus="toggleImages('', new Array('home', 'v03img/home.jpg', 'students', 'v03img/students.jpg', 'school', 'v03img/school.jpg', 'photos', 'v03img/photos.jpg', 'misc', 'v03img/misc.jpg', 'back', 'v03img/back.jpg'), '', new Array('home', 'v03img/home_down.jpg', 'students', 'v03img/students.jpg', 'school', 'v03img/school.jpg', 'photos', 'v03img/photos.jpg', 'misc', 'v03img/misc.jpg', 'back', 'v03img/back.jpg')); return true;">
<img name="home" src="v03img/home_down.jpg" width="90" height="37" border="0" alt="home" /></a>
</div>