75032
75032
Jul 17, 2010
view4165
view13
0
Goto Top

Onmouseover mit css

GermansolvedQuestionCSSDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 147112

Url: https://administrator.de/contentid/147112

Printed on: April 24, 2024 at 05:04 o'clock

13 Comments
Latest comment
Goto Top
Member: Friemler
Friemler Jul 17, 2010 at 23:17:35 (UTC)
Goto Top
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
Mitglied: 75032
75032 Jul 18, 2010 at 07:51:11 (UTC)
Goto Top
Aha ok und gäbe es da vielleicht noch eine andere Möglichkeit wie man das machen kann?
Member: Arano
Arano Jul 18, 2010 at 10:25:40 (UTC)
Goto Top
Warum denn ne andere Möglichkeit !?

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


~Arano
Mitglied: 75032
75032 Jul 18, 2010 at 10:43:42 (UTC)
Goto Top
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?
Member: Arano
Arano Jul 18, 2010 at 11:36:38 (UTC)
Goto Top
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
Mitglied: 75032
75032 Jul 18, 2010 at 12:19:13 (UTC)
Goto Top
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\">
Member: Arano
Arano Jul 18, 2010 at 13:31:03 (UTC)
Goto Top
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 face-wink
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 face-big-smile


~Arano
Mitglied: 75032
75032 Jul 18, 2010 at 14:17:33 (UTC)
Goto Top
okey danke ich werd versuchen das hinzubekommen...
Mitglied: 75032
75032 Jul 18, 2010 at 15:21:48 (UTC)
Goto Top
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
Member: Razalduria
Razalduria Jul 18, 2010 at 15:54:03 (UTC)
Goto Top
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;  
}
Mitglied: 75032
75032 Jul 18, 2010 at 18:38:29 (UTC)
Goto Top
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
Member: Arano
Arano Jul 18, 2010 at 19:18:09 (UTC)
Goto Top
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
Mitglied: 75032
75032 Jul 18, 2010 at 20:49:16 (UTC)
Goto Top
ja jetzt geht alles...danke für eure hilfe

mfg Schelli13
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments