nicht angemeldet
seitenhintergrundfarbe mit onMouseOver ändern
hallo hallo.
ich bin ein absoluter neuling in der welt von javascript.
ich habe den sonntag damit verbracht meine erste internetseite zu basteln.
ich würde gerne etwas einbauen und weiß nicht wie ich da anfangen soll.
also ich hab im head bereich ein logo und ich möchte auf dieses logo einen mouseover-effekt legen, so dass sich die hintergrundfarbe ändert sobald ich mit der maus über das logo fahre.
das müsste doch nicht so schwierig sein. ich weiß nur leider nicht wie ich sowas beginne.
kann ich das in einer externe .js datei machen.
ich würde mich freuen wenn mir hier jemand helfen könnte.
danke schon mal und noch einen schönen sonntag abend.
-
-
hallo peter.
soweit binich auch schon gekommen. ich denk ja nicht nicht drüber nach und schreib einfach sofort hier rein.
also ich hab jetzt was geschafft. hab den mouseover direkt in den div geschrieben jetzt klappt es.<div id="logo"
onMouseOver="body.style.backgroundColor='black';"
onMouseOut="body.style.backgroundColor='#70007b';">
<img src="logo.png" alt="logo" id="coolio" /></div>
aber nicht ganz so wie ich es mir vorgestellt hab.
ich würde es gerne nicht direkt ins html schrieben, und mein zweites problem ist das sich nicht der gesamte hintergrund ändert sondern nur circa die hälfte. und das versteh ich jetzt garnicht mehr.danke für jede hilfe.
-
Hallo janek,
ich denk ja nicht nicht drüber nach und schreib einfach sofort hier rein.
Schoen ;-)
ich würde es gerne nicht direkt ins html schrieben
Wie du dein JavaScript in eine externe Datei auslagerst, kannst du <http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=hier nachlesen>.
Statt des Codes in Event selbst rufst du dann eine Funktion auf*.
onMouseOver="colorize()"Im JS-File packst du dann die Funktion, welche den Hintergrund aendert
function colorize() { // hintergrundfarbe aendern }nicht der gesamte hintergrund ändert sondern nur circa die hälfte.
Ohne deine Code zu kennen denke ich, dass es daran liegt, dass anderen Elementen bereits eine Hintergrundfarbe zugewiesen wurde.
Nebenbei gefragt: Brauchst du unbedingt JavaScript, oder kannst du es auch mittels :hover loesen?
MfG
Peter-
danke peter für deine hilfe.
es sollte in java gelöst werden und ich hab jetzt einen weg gefunden.
function HG() {
var hintergrund = document.getElementsByTagName('img');
for (key in hintergrund) {hintergrund[key].onmouseover = schwarz};
}function schwarz() {
var bg = document.getElementsByTagName('html')[0];
var bg2 = document.getElementsByTagName('body')[0];bg.style.background = 'black'; bg2.style.background = 'black';}
so hab ichs gelöst und es klappt.
jetzt komm ich bei der onmouseout nicht weiter. die ursprungsfarbe soll wieder erscheinen.
mfg
-
Mahlzeit janek,
es sollte in java gelöst werden und ich hab jetzt einen weg gefunden.
Nein, hast Du leider nicht.
jetzt komm ich bei der onmouseout nicht weiter. die ursprungsfarbe soll wieder erscheinen.
Und das ist der zweite Grund, warum Du Dein Problem nicht gelöst hast - Du hast es lediglich verlagert. Du musst Dir also entweder merken, welche Farbe der Seitenhintergrund vorher hatte (z.B. in einer globalen Variable) ... das wäre aber *KEINE* gute Idee.
Oder Du setzt beim Mouseover über dem Logo einfach <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=eine entsprechende Klasse> beim <body>, die Du beim Mousout über dem Logo wieder entfernst. Dann kannst Du über entsprechende CSS-Regeln beliebige Seitenhintergrundfarben festlegen:
body { background-color: #70007b; } body.hover { background-color: black; }MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
hallo ekki
entschuldige, war tippfaul, und meinte natürlich javascript. wollte hier niemanden auf die füsse treten.
also ich denke ich habe nun eine recht solide lösung gefunden:
function HG() {
document.getElementById('logo').onmouseover = schwarz;
document.getElementById('logo').onmouseout = lila;}
function schwarz() {
var bg = document.getElementsByTagName('html')[0];
var bg2 = document.getElementsByTagName('body')[0];bg.style.background = 'black'; bg2.style.background = 'black';}
function lila() {
var bg = document.getElementsByTagName('html')[0];
var bg2 = document.getElementsByTagName('body')[0];bg.style.background = '#700b70'; bg2.style.background = '#700b70';}
funktioniert super.
trotzdem danke für eure hilfe.
-
Mahlzeit janek,
also ich denke ich habe nun eine recht solide lösung gefunden:
Tut mir leid, auch dabei irrst Du Dich:
function HG() {
document.getElementById('logo').onmouseover = schwarz;
document.getElementById('logo').onmouseout = lila;
}Und wenn sich irgendwann mal das Design bzw. die Farben Deiner Seiten ändern? Dann änderst Du auch die Namen der Funktionen? An diversen Stellen?
Auf jeden Fall müsstest Du dann ja vermutlich in den Funktionen selbst den Code ändern. Und das jedesmal, wenn sich etwas an den Farben ändert.
Das ist nicht nur unpraktisch, sondern auch fehlerträchtig ... deswegen mein Vorschlag mit der Klasse, da Du so das Aussehen weiterhin zentral in CSS bestimmen kannst.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
-
-
-
-