3 verschiedene Hintergründe bei Links

Dome · 02.07.2004, 23:57

Hi@all!

Ich möchte mir ein gutes Inhaltsverzeichnis erstellen.

Wie kann ich bei einem Link im Hintergrund 3 verschiedene Bilder einsetzen:
Wenn ich nicht drauf zeige, eines.
Wenn ich drauf zeige, dann ein anderes.
Und wenn ich drauf klicke, dann noch mal ein anderes.
Wie geht das?
Kann mir jemand ein Script geben oder mir eine Anleitung wie das geht?

Danke im Vorraus!

webmichl · 03.07.2004, 00:21

Hilft Dir das hier weiter?

PS: Da es um CSS geht, verschieb ich den Thread mal zu den Puristen...

Dome · 03.07.2004, 09:40

Jetzt hab ich aber immer noch nicht kapiert, wie ich dann die 3 verschiedenen Bilder hinter den Link krieg.
Ich hab mal mit FrontPage was ausprobiert und bin auf einen Dynamik HTML Effekt gestoßen. Dieser kann aber nur mit 2 verschiedenen Bildern pro Link arbeiten (mit Bild austauschen)

Vielleicht weiß da noch jemand was.

webcreate · 03.07.2004, 10:54

Eigentlich sollte Dir der Link zu den Linkeigenschaften schon alles sagen, aber eh ich hier nun lange rumtippe, hier mal bei Bsp.

HTML-Code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Links mit Hintergrundbild</title>
  <style type="text/css">
  <!--
  a:link {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	color: #666666;
  	text-decoration: underline;
  	background-image: url(bilder/1.jpg);
  }
  a:hover {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	color: #000000;
  	text-decoration: underline;	
  	background-image: url(bilder/2.jpg);
  }
  a:active {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	color: #990000;
  	text-decoration: underline;
  	background-image: url(bilder/3.jpg);
  }
  -->
  </style>
  </head>
  
  <body>
  <a href="#">Das ist dann mal der Testlink</a> 
  </body>
  </html>

belimo · 28.08.2004, 22:23

Falls du Fireworks hast, lässt sich damit das Problem ebenfalls lösen...

Aber die Möglichkeit mit CSS ist ebensogut. Denn Fireworks braucht dafür javascript...

Darüber gibts viele Tuts...
Gruss Belimo

fiu · 28.08.2004, 23:33

also so isses meiner meinung nach das beste:

wenn man nicht drauf ist:

Code:

a:link {background-image:url('bild1.gif')}

wenn man drauf ist:

Code:

a:hover {background-image:url('bild2.gif')}

wenn man drauf klickt:

Code:

a:active {background-image:url('bild3.gif')}

Ich würde aber noch empfehlen:

Wenn man schon draufgeklickt hat:

Code:

a:visited {background-image:url('bild4.gif')}

und evtl. für die Leute die per Tabulator von Link zu Link wechseln:

Code:

a:focus {background-image:url('bild5.gif')}

greetz fiu

PS: die korrekte Reihenfolge wäre

a:link
a:visited
a:hover
a:active
und
a:focus

sonst scheissen sich manche Browser ins Hemd