Top-Themen

Aktuelle Themen (A bis Z)

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

Frage Entwicklung CSS

GELÖST

Onmouseover mit css

Mitglied: 75032

75032 (Level 1)

17.07.2010 um 23:37 Uhr, 3581 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

mfg 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

mfg Schelli13
Bitte warten ..
Ähnliche Inhalte
HTML
CSS 3 - "viewport" Kein gültiges CSS?
gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

CSS
CSS Problem
gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

CSS
Hilfe bei CSS
gelöst Frage von emeriksCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

CSS
CSS Verständnisproblem
gelöst Frage von 127944CSS14 Kommentare

Hallo liebe CSS-Gurus, ich habe diesen Code 1:1 übernommen. (ich versuche noch immer mich in CSS einzuarbeiten) Was kann ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 1 TagLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 2 TagenTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 2 TagenSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 2 TagenSicherheit10 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
Batch & Shell
Meltdown Microsoft Prüf Script - .zip Datei leider leer
gelöst Frage von MasterBlaster88Batch & Shell13 Kommentare

Hallo zusammen, ich patche gerade unsere Windows Server bzgl. der Meltdown Lücke. Patch vorhanden, Reg Keys gesetzt Um das ...

Batch & Shell
Shell-Skript - Syntax error: Unterminated quoted string
Frage von newit1Batch & Shell13 Kommentare

Hallo Ich schreibe ein Skript das eine CSV-Datei in eine mySQL Datenbank schieben soll. Bekomme nach start des Skrips ...

E-Mail
Erfahrungen mit hMailServer gesucht
Frage von it-fraggleE-Mail10 Kommentare

Hallo, meine neue Stelle möchte einen eigenen Mailserver. Ich als Linuxkind war direkt geistig mit Postfix dabei. Leider wollen ...

Windows Server
DNS Forwarding an andere Domäne
Frage von detox91Windows Server9 Kommentare

Hallo, für Testzwecke haben wir bei uns eine zweite Windows Domäne (B.local) aufgebaut, welche komplett unabhängig und isoliert der ...