Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Onmouseover mit css

Frage Entwicklung CSS

Mitglied: 75032

75032 (Level 1)

17.07.2010 um 23:37 Uhr, 3470 Aufrufe, 13 Kommentare

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

Mit freundlichen Grüßen Schelli13
Mitglied: Friemler
18.07.2010 um 01:17 Uhr
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
Bitte warten ..
Mitglied: 75032
18.07.2010 um 09:51 Uhr
Aha ok und gäbe es da vielleicht noch eine andere Möglichkeit wie man das machen kann?
Bitte warten ..
Mitglied: Arano
18.07.2010 um 12:25 Uhr
Warum denn ne andere Möglichkeit !?

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


~Arano
Bitte warten ..
Mitglied: 75032
18.07.2010 um 12:43 Uhr
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?
Bitte warten ..
Mitglied: Arano
18.07.2010 um 13:36 Uhr
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
Bitte warten ..
Mitglied: 75032
18.07.2010 um 14:19 Uhr
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\">
Bitte warten ..
Mitglied: Arano
18.07.2010 um 15:31 Uhr
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:

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
Bitte warten ..
Mitglied: 75032
18.07.2010 um 16:17 Uhr
okey danke ich werd versuchen das hinzubekommen...
Bitte warten ..
Mitglied: 75032
18.07.2010 um 17:21 Uhr
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
Bitte warten ..
Mitglied: Razalduria
18.07.2010 um 17:54 Uhr
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:
01.
a:link, a:visited { 
02.
    background: url('img/home.jpg') no-repeat 
03.
04.
a:focus, a:hover, a:active { 
05.
    background: url('img/home_.jpg') no-repeat; 
06.
}
Bitte warten ..
Mitglied: 75032
18.07.2010 um 20:38 Uhr
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
Bitte warten ..
Mitglied: Arano
18.07.2010 um 21:18 Uhr
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
01.
  a.link_home:link, 
02.
  a.link_home:visited { background-image:url(img/home.jpg) } 
03.
  a.link_home:hover, 
04.
  a.link_home:active { background-image:url(img/home_.jpg) }
~Arano
Bitte warten ..
Mitglied: 75032
18.07.2010 um 22:49 Uhr
ja jetzt geht alles...danke für eure hilfe

Mit freundlichen Grüßen Schelli13
Bitte warten ..
Neuester Wissensbeitrag
Ähnliche Inhalte
CSS
gelöst Jimdo Webseiten Header per css verkleinern (6)

Frage von Flodsche zum Thema CSS ...

Suse
gelöst SquidGuard filtert CSS (3)

Frage von killtec zum Thema Suse ...

CSS
gelöst CSS width in Outlook 2013 bei Tabellen ohne Funtion, warum? (3)

Frage von Pago159 zum Thema CSS ...

HTML
gelöst Angebundenes CSS funktioniert nach Link nicht mehr (4)

Frage von fugu zum Thema HTML ...

Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (32)

Frage von patz223 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (21)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...