17.07.2010

4257

Onmouseover mit css

Hi

ich will versuchen in diesem code:

<a    onmouseover=document.images.home.src=\"img/home_.jpg\";  
        onmouseout=document.images.home.src=\"img/home.jpg\";  
        onclick=document.Body.data=\"body.php?page=home\";  
	target=\"Body\";>  
        <img class=\"menu_home\" name=\"home\" src=\"img/home.jpg\">  
        </a>

am schluss das "src=\"img/home.jpg\"; " in eine css datei zu schreiben und dann in html auszugeben also dass der link zum bild in der css datei steht
der sinn liegt darin dass ich dann ein anderes style nur mit einer anderen css datei auswählen kann
geht das überhaupt oder gibt es da noch eine andere möglichkeit?

danke schon im vorraus

mfg Schelli13

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 147112

Url: https://administrator.de/forum/onmouseover-mit-css-147112.html

Ausgedruckt am: 07.04.2025 um 11:04 Uhr

13 Kommentare

Neuester Kommentar

Hallo Schelli13,

soweit ich weiß, kann man mit css nur mit Hintergrundgrafiken arbeiten (und deren Speicherort angeben). Ein Hintergrundbild gehört ja eher zum Design einer Seite, eine Grafik, die mit der Maus interagiert, würde ich zum Inhalt der Seite rechnen. Siehe auch: http://de.selfhtml.org/css/eigenschaften/index.htm, da steht nur was von Hintergrundbildern.

Gruß
Friemler

Aha ok und gäbe es da vielleicht noch eine andere Möglichkeit wie man das machen kann?

Warum denn ne andere Möglichkeit !?

Was spricht denn dagegen dem <a>-Tag ein Hintergrundbild zu geben - welches über CSS definiert wird !?

~Arano

eigentlich ja nichts nur weis ich nicht wie ich das machen soll
denn wenn ich das so schreibe geht das nicht:

<a onmouseover=document.images.home.class=\"menu_home_1\";  
onmouseout=document.images.home.class=\"menu_home_2\";  
.....

wie müsste ich das schreiben dass es funktioniert?

Du willst es doch per CSS lösen, oder !?
Warum greifst du denn dann auf Javascript zurück ?

Das macht doch überhaupt keinen Sinn ! Etwa so als wolltest du ein rotes Bild malen, und nimmst dazu einen grünen Stift.
Also nimm als erstes dein Javscriptgedöns und tritt es in die Tonne !

Und dann wäre es mal angebracht dein vorhandenes HTML und CSS zu zeigen, denn schließlich willst du ja unsere Hilfe.
Quelltextausschnitte der betreffenden Bereiche sind völlig ausreichend.

~Arano

also ich weis nicht wie du auf javascript kommst das ist eine css class...es verweist zumindest aus eine css datei...

<link type=\"text/css\" href=\"style.css\" rel=\"stylesheet\">

also der css code:

img.menu_home
{
	border:0px none;
	margin:0px;
	position:absolute;
	top:30px;
	left:35px;
	width: 167px;
	height: 47px;
}
img.menu_home_1
{
	background-image: url('img/home_.jpg'); 
}
img.menu_home_2
{
	background-image: url('img/home.jpg'); 
}

und hier der html code wo ich die bilder aus der css datei herausnehmen will
im moment nich mit einfachen bildern:

<a  onmouseover=document.images.home.src=\"img/home_.jpg\";  
onmouseout=document.images.home.src=\"img/home.jpg\";  
onclick=document.Body.data=\"body.php?page=home\";  
target=\"Body\";>  
<img class=\"menu_home\" name=\"home\" src="\img/home.jpg\">  

also ich weis nicht wie du auf javascript kommst das ist eine css class...es verweist zumindest aus eine css datei...

Ja ähm... pass auf !
Alles was bei "onmousover", "onmouseout" und "onclick" steht ist Javascript

Am sinnlosestem finde ich ehrlich gesagt das "onclick"-Event, es ist schon ein a-Tag/Link dem man mit der href-Eigenschaft doch wunderbar ein Verweisziel geben kann...

Das habe ich auch noch nicht ausprobiert...
Du hast dem img-Tag ein Hintergrundbild zugewiesen ABER auch ein eigenes Bild... ...welches wird wohl sichtbar sein... ...das __Hintergrund__bild oder das eigentliche Bild ?
Es wurde ja vorhin auch schon angesprochen.
Mach dir mal ein paar Gedanken dazu, welche Grafiken zum Design gehören und welche zum Inhalt.
Zum Inhalt gehören alle Grafiken die z.B. in einem Text stehen oder zu einem Text gehören, diese bindest du über das img-Tag in die Seite ein.
Alle anderen gehören vermutlich zum Design und werden per CSS als Hintergrundgrafiken eingebunden !
Warum das ganze ?
Es gibt ganz einfach mehr als nur den Internet Explorer und den Firefox (und den anderen). Das einfachste Beispiel dürfte wohl ein einfacher Ausdruck von der Seite sein ! Welche Grafiken gehören zum Text und welche zum Design ? Welche sollen mit ausgedruckt werden und welche nicht ? Ganz einfach, alle Hintergrundgrafiken werden nicht gedruckt weil sie zum Design gehören ! Das würde bei die zur Zeit aber leider in die Hose gehen bzw. sämtliche Grafiken die du bei der Navigation eingesetzte hast um den "tollen" Rollover-Effekt zu haben werden __unnötigerweise__ mit ausgedruckt weil sie eben als reguläre Grafiken per img-Tag in die Seite eingebunden wurden.
Was machen Textbrowser oder Screenreader ect. ?
Gut, die gehören evtl. nicht zu deiner Zielgruppe aber darum geht es auch gar nicht. Die Trennung von Design und Inhalt gehört einfach zu den Grundlagen und wie du siehst, kann so eine kleine Entscheidung, ganz gravierende Auswirkungen haben.

Okay, wieder zurück zum Thema, die neue Idee war doch dem a-Tag ein Hintergrundbild zuzuweisen, oder nicht !?
Hier sind die Hilfen:

<a href="" title="" class="link_home"></a>  

a.link_home { display:block; width:120px; height:25px; }

CSS-Pseudoklassen http://www.css4you.de/pseudoklproperty.html

Damit sollte man eigentlich den gewünschten Effekt erstellen können ich habe die Lösung im Kiopf, daher ist es für mich ein leichtes mit diesen "Brocken" aus fie Lösung zu kommen sollte doch noch was Fehlen oder Schwierigkeiten haben, einfach nachfragen

~Arano

okey danke ich werd versuchen das hinzubekommen...

also soweit funktioniert es aber ich weis nicht wie ich es hinbekomme dass es genauso
funktioniert wie mit onmouseover und onmouseout also dass das bild jenachdem wechselt

Zitat von @75032:

also soweit funktioniert es aber ich weis nicht wie ich es hinbekomme dass es genauso
funktioniert wie mit onmouseover und onmouseout also dass das bild jenachdem wechselt

Wie hast Du es denn umgesetzt?

Es kann doch nicht so schwer sein, sowas umzusetzen:

a:link, a:visited {
    background: url('img/home.jpg') no-repeat  
}
a:focus, a:hover, a:active {
    background: url('img/home_.jpg') no-repeat;  
}

nein nein es ist nicht schwer aber wie mach ich das weil ich habe ja mehrere bilder denn im großen und ganzen soll das ein menü darstellen
und deswegen weis ich nicht wie das geht da ich wenn ich das so schreib wie du es hier dargestellt hast gilt das für das ganze menü und alles schaut gleich aus

Hi,

dazu hatte ich dir bei den Hilfen schon einen Class-Name mitgegeben und zusätzlich noch auf die Pseudoklassen verwiesen.
Über die man auch zu der Lösung kommen könnte, ist aber zugegebenermaßen etwas ähm... unersichtlich

  a.link_home:link,
  a.link_home:visited { background-image:url(img/home.jpg) }
  a.link_home:hover,
  a.link_home:active { background-image:url(img/home_.jpg) }

~Arano