Frage zum MouseOver mit CSS

Ocean32 · 15.12.2009

Hi,
also mit Java Script ist es mit ja möglich einen MouseOver mit 3 Grafiken zu schreiben, Beispiel:

Grafik1 (Standardzustand: blau)
Grafik2 ( " )
Grafik3 ( " )

So. Das ist die Ausgangslage. Mit Java Script war es mit bisher möglich einen folgenden MouseOver zu erzeugen:
(Grafik2 im Mausfokus)

Grafik1 (Zustand: halb blau, halb rot)
Grafik2 (Zustand: rot)
Grafik3 (Zustand: halb rot, halb blau)

Ich kann also, indem ich nur über EINE Grafik fahre, die anderen beiden mit verändern. (Hoffe ich habe mich verständlich ausgedrückt)
Zu CSS habe ich bisher aber nur Beispiele mit einer Grafik gefunden, deswegen meine Frage: Geht sowas auch mit CSS, und wenn ja wie ?
Thx

sdsf · 15.12.2009

AW: Frage zum MouseOver mit CSS

ja.

du rufst einfach per mouseover eine Funktion auf.
Diese Funktion ändert dann die zugewiesene Class des Bildes, Divs, ...

Die anderen Grafiken sollten halt eine eigene ID haben, über die du per Javascript darauf zugreifen kannst.

Steve1405 · 15.12.2009

AW: Frage zum MouseOver mit CSS

Er will es aber nicht mit Javascript machen, sondern in reinem CSS. Und das ist afaik nicht möglich.

gruß

Ocean32 · 15.12.2009

AW: Frage zum MouseOver mit CSS

jup, nur css.
und ich möchte ja alle drei Bilder AUF EINMAL ändern. ohne verzögerrung. dann muss ich wohl mal java Script nehmen.
Aber wer hat denn kein JSaktiviert, ich kanns ja dazuschreiben, auf ner Support-Seite.

Steve1405 · 15.12.2009

AW: Frage zum MouseOver mit CSS

Jop, würde ich machen. Oder einfach eine kurze Meldung ausgeben am oberen Bildschirmrand. Kannst du ja einfach realisieren, indem du einen Div-Layer einfügst und den per Javascript und onload versteckst. Ist kein Javascript aktiviert, wird dieser Div-Layer dann nicht versteckt, dh angezeigt

gruß

Ocean32 · 17.12.2009

Überflüssiges im Code ?

Hi, hier ein Mouse Over mit Java Script.

Ich habe irgendwie ein Gefühl als wäre da was überflüssig. (Meine jetzt nicht die vielen Mouseovers, sondern ein nicht nötiges Code-Fragment

) Wer Lust hat kann sich den Code ja mal ansehen.

Thx.
(Ist echt ein super Forum

)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
language="JavaScript">
button1= new Image();
button1.src = "http://www.gecko32studios.de/grafics/navi_home.png"
button2= new Image();
button2.src = "http://www.gecko32studios.de/grafics/navi_produkte.png"
button3= new Image();
button3.src = "http://www.gecko32studios.de/grafics/navi_forum.png"
button4= new Image();
button4.src = "http://www.gecko32studios.de/grafics/navi.png"
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<a href="http://www.gecko32studios.de/"

onmouseover="austausch1.src='http://www.gecko32studios.de/grafics/navi_home_hot.png';"
onmouseover="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte_left.png';"
onmouseout="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte.png';"
onmouseout="austausch1.src='http://www.gecko32studios.de/grafics/navi_home.png';">

<img src="http://www.gecko32studios.de/grafics/navi_home.png"
border="0" name="austausch1">
</a>

<a href="http://www.gecko32studios.de/"

onmouseover="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte_hot.png';"
onmouseover="austausch3.src='http://www.gecko32studios.de/grafics/navi_forum_left.png';"
onmouseover="austausch1.src='http://www.gecko32studios.de/grafics/navi_home_right.png';"
onmouseout="austausch1.src='http://www.gecko32studios.de/grafics/navi_home.png';"
onmouseout="austausch3.src='http://www.gecko32studios.de/grafics/navi_forum.png';"
onmouseout="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte.png';">

<img src="http://www.gecko32studios.de/grafics/navi_produkte.png"
border="0" name="austausch2"></a>

<a href="http://www.gecko32studios.de/"

onmouseover="austausch3.src='http://www.gecko32studios.de/grafics/navi_forum_hot.png';"
onmouseover="austausch4.src='http://www.gecko32studios.de/grafics/navi_left.png';"
onmouseout="austausch4.src='http://www.gecko32studios.de/grafics/navi.png';"
onmouseover="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte_right.png';"
onmouseout="austausch2.src='http://www.gecko32studios.de/grafics/navi_produkte.png';"
onmouseout="austausch3.src='http://www.gecko32studios.de/grafics/navi_forum.png';">

<img src="http://www.gecko32studios.de/grafics/navi_forum.png"
border="0" name="austausch3"></a>

<img src="http://www.gecko32studios.de/grafics/navi.png"
border="0" name="austausch4">

</body>
</html>

MyBad · 17.12.2009

AW: Überflüssiges im Code ?

was ich so auf den ersten schnellen Blick sehe:
- Du kannst einem a-Tag nicht mehrere gleiche Attribute verpassen. Du hast da mehrfach "onmouseover" und "onmouseout" drin. Du darfst diese Attribut innerhalb eines Tags aber nur einmal verwenden!

Ocean32 · 17.12.2009

AW: Überflüssiges im Code ?

ok...
ist mir gar nicht aufgefallen. Aber wie kriege ich dann einen MouseOver hin der drei Grafiken betrifft ?

MyBad · 17.12.2009

AW: Überflüssiges im Code ?

Du willst also, das wenn du mit der Maus auf dem Button bist, immer zwischen 2 Bildern gewechselt wird, richtig?

Das kannst du auch per JS machen. Schau dir mal die Funktion setInterval() von JavaScript an. Das müsste das Richtige sein. Ansonsten kannst du auch eine animierte Gif erstellen, in der die Bilder wechseln. Bei MouseOver wird dann halt die animierte GIF angezeigt. Dann kannst du auch komplett auf js verzichten und das ganze mit CSS lösen. 3. Möglichkeit die mir da einfällt wäre eine Flashnavigation.

Ocean32 · 17.12.2009

neeeeee,
ich möchte bloß, dass, wenn ich über ein Bild fahre, dass sich dann 3 Bilder auf meiner Homepage ändern. Ich habe das mit JS nämlich schon hinbekommen, bloß jetzt krieg ichs nicht mehr auf die Reihe.

ok, habs jetzt wieder hin gekriegt, könnte zwar kompliziert werden, aber es geht. Und seltsamerweise auch mit EINEM Tag. Seltsam. Ich muss irgendwas vergessen haben.

Trotzdem Thx.

MyBad · 17.12.2009

AW: Überflüssiges im Code ?

Du willst, das sich 3 Bilder an unterschiedlichen Positionen ändern? Wenn ja, musst du dafür im JS eine Funktion schreiben. In etwa so:

HTML:

function bilder_tauschen(){
 $(pos1).src = "/images/dein_bild_1.gif";
 $(pos2).src = "/images/dein_bild_2.gif";
 $(pos3).src = "/images/dein_bild_3.gif";
}

Mit mit pos1 - pos3 (<img id="pos1" src="http://www.psd-tutorials.de/modules/Forum/45_php-und-andere-scriptsprachen/45_php-und-andere-scriptsprachen/images/bla.gif ... />)" meine ich die ids der Bilder, die ausgetauscht werden sollen. Nutze am besten ein js-Framework wie Prototype oder jQuery für dein Vorhaben... dann musst du weniger schreiben und hast einfacheren Zugriff auf die einzelnen Elemente. Dann ganz du auch einfach Spielereien wie einfaden etc. nutzen.

Ansonsten musst du mit "getElementById()" auf die Elemente zugreifen.

Alles ohne Garantie... JS ist nicht gerade mein Spezialgebiet.

Ocean32 · 17.12.2009

AW: Überflüssiges im Code ?

Meins auch nicht....

Aber ich hatte noch ne Sicherrungskopie mit dem Script rumfliegen und habe n bisschen was übertragen, mein Fehler war dass ich für jedes Element einen "mouseover" genommen habe, dabei muss man es ja zusammenfassen.

Naja wie auch immer, thx.

K-Dawg · 17.12.2009

AW: Frage zum MouseOver mit CSS

Du kannst mit reinem CSS ein Rollover machen ohne JavaScript und Ohne eine Verzögerung vom laden des Bildes.

Das geht auch mit Divs, jedoch wegen Kompatibilität mit dem Internet Exploder, sollte auf Ankers gesetzt werden (<a>).

Als erstes brauchst du eine Bilddatei mit den Zuständen die du haben möchtest. Beispiel. Normalzustand, Hover, Visited. Diese müssen alle die gleiche Breite und höhe haben (können auch unterschiedliche Höhe haben, aber zur Anfang doch etwas einfacher.)

Habe jetzt kein beispiel Grafik, aber diese ASCII sollte das Illustrieren:

----------
| Visited |
----------
| Hover |
----------
| Normal |
----------

nehmen wir an, jede Zustand hat eine Breite von 80 Pixel und eine Höhe von 40 Pixel.

Dein CSS für dein Anker sollte ungefähr so sein (für absolute Korrektheit, siehe SELFHTML CSS 4 You - The Finest in Stylesheets oder sonstige Hilfeseiten):

PHP:

a:link {
   width: 80px;
   height: 40px;
   background: url(pfad/zum/bild.endung) xangabe yangabe (-80px) norepeat;
}
a:visited {
   width: 80px;
   height: 40px;
   background: url(pfad/zum/bild.endung) xangabe yangabe (0) norepeat;
}
a:hover {
   width: 80px;
   height: 40px;
   background: url(pfad/zum/bild.endung) xangabe yangabe (-40px) norepeat;
}
a:active {
   width: 80px;
   height: 40px;
   background: url(pfad/zum/bild.endung) xangabe yangabe (-80px) norepeat;
}

Damit geht ein Hover mit CSS ohne Ladeverzögerung.

Ich gebe kein Gewähr auf Korrektheit vom CSS. Dies dient lediglich als Illustration. Das sollte ein anreiz sein CSS zu lernen und nicht von Dreamweaver vorkauen zu lassen ,-)

Greetz

cebito · 17.12.2009

AW: Frage zum MouseOver mit CSS

@Ocean32 - Die Themen hab ich mal zusammengeführt, das geht doch hier um ein- und dieselbe Frage, nur anders gestellt, vermeide es bitte in Zukunft dafür zwei Threads aufzumachen. So hätte sich z.B. K-Dawg seine Energie zu antworten sparen können, weil er aus deiner js-Frage herausgelesen hätte, das du drei unterschiedliche Bilder gleichzeitig ändern willst und nicht drei Zustände für ein- und dasselbe Bild möchtest.
Jeder der hier (und auch woanders) hilft investiert Zeit und sein Wissen, respektiere das bitte indem du die Helfer nicht unnötig strapazierst.