mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Sa 20.04.2024 03:55 Benutzername: Passwort: Auto-Login

Thema: grafik-rollover mit css vom 14.12.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> grafik-rollover mit css
Seite: 1, 2  Weiter
Autor Nachricht
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Do 14.12.2006 11:22
Titel

grafik-rollover mit css

 Antworten mit Zitat Zum Seitenanfang
Hallo!

Bei dem zweiten Button soll ein anderes Bild (navi1_active) erscheinen, wenn man mit der maus drüberfährt. Die Klasse navi ist zugewiesen. Was mache ich falsch? Danke!!

Code:

<html><head>

<style type="text/css">

 a:link {color:#0000ff;}
 a:visited {color:#dddddd;}
 a:hover {color:#ff0000;}
 a:active {color:#ff0000;}
 
 a.navi:link
 {
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif)
 }
 
 a.navi:visited
 {
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif)
 }
 
 a.navi:hover
 {
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1_acitve.gif)
 }
 
 a.navi:active
 {
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1_acitve.gif)
 }

</style>

<title>Rollover Test</title>
<body>

<a href="datei.htm"><img src="file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif"></a>

<a class="navi" href="datei.htm"><img src="file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif"></a>

</body>
</html>
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Do 14.12.2006 11:30
Titel

Antworten mit Zitat Zum Seitenanfang
Hi,

1) active vs. acitve
2) ist es richtig, dass nav1.gif sowohl als IMG als auch als A-background eingebunden wird??? Das Bild im Hintergrund wird doch immer von dem Bild im Vordergrund ueberdeckt, oder?!

Gruss
  View user's profile Private Nachricht senden
Anzeige
Anzeige
caZpa
Account gelöscht


Ort: -

Verfasst Do 14.12.2006 11:32
Titel

Antworten mit Zitat Zum Seitenanfang
nicht .navi a:hover ?
 
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Do 14.12.2006 11:38
Titel

Antworten mit Zitat Zum Seitenanfang
Ich glaub an der Reihenfolge liegt es nicht, habe das von css4you guckst du hier:
http://www.css4you.de/wscss/css03.html

Stimmt, die Bildbezeichnung ist nicht korrekt, aber liegt es in dem Fall wirklich daran?
Bin mir auch nicht sicher, ob man das mit "background" realisieren kann. Hab es eben nur mal ausprobiert und dachte es geht. Hilfe! Menno!
  View user's profile Private Nachricht senden
caZpa
Account gelöscht


Ort: -

Verfasst Do 14.12.2006 11:48
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
<html><head>

<style type="text/css">

 a:link {color:#0000ff;}
 a:visited {color:#dddddd;}
 a:hover {color:#ff0000;}
 a:active {color:#ff0000;}
 
 a.navi:link
 {
width:100px;
height:100px;
background:url(bild.gif);
 }
 
 a.navi:visited
 {
background:url(bild.gif);
 }
 
 a.navi:hover
 {
background:url(bild2.gif);
 }
 
 a.navi:active
 {
background:url(bild.gif);
 }

</style>

<title>Rollover Test</title>
<body>

<a class="navi" href="datei.htm"></a>

</body>
</html>
 
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Do 14.12.2006 11:57
Titel

Antworten mit Zitat Zum Seitenanfang
Hallo, es geht nicht. *heul*
es wird jetzt überhaupt nix angezeigt. muss nicht noch was in den body? der button den ich verlinken will??
Code:

<html><head>

<style type="text/css">

 a:link {color:#0000ff;}
 a:visited {color:#dddddd;}
 a:hover {color:#ff0000;}
 a:active {color:#ff0000;}
 
 a.navi:link
 {
width:100px;
height:100px;
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif);
 }
 
 a.navi:visited
 {
background: url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif);
 }
 
 a.navi:hover
 {
background: url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1_acitve.gif);
 }
 
 a.navi:active
 {
background:url(file:///Z|/Zwischenablage/PHP Web/Images/Navi/nav1.gif);
 }

</style>

<title>Rollover Test</title>
<body>

<a class="navi" href="datei.htm"></a>

</body>
</html>


Zuletzt bearbeitet von Certilion am Do 14.12.2006 12:02, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Njelo

Dabei seit: 18.07.2003
Ort: Leonberg
Alter: 43
Geschlecht: Männlich
Verfasst Do 14.12.2006 12:00
Titel

Antworten mit Zitat Zum Seitenanfang
Das mit dem CSS-Background ist eigentlich recht schick. Klappt gut, und eben ohne jegliches Javascript...

guggst du hier.
(Navi komplett über CSS gelöst)

Grüße
Njelo
  View user's profile Private Nachricht senden
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Do 14.12.2006 12:06
Titel

Antworten mit Zitat Zum Seitenanfang
Das Menü ist schick. Aber ich hab ja das Problem im css, das ich da nicht sehen kann, oder doch im body? Muss ich nicht den Button in den Body schreiben?
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS grafik-rollover ausrichtung
Bei rollover Grafik vergrößern
Rollover Grafik als E-Mail Signatur möglich?
Rollover-Grafik per <area ...> klappt nicht mit Firefox =(
Flash- Bei Grafik-Mouseover soll Grafik vergrößert werden.
rollover-PNG in PS
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB