CSS Link-Button

[TripleD]

Hallo,

ich hab mir ein Menü mit CSS gebastellt,

auf dem ich Text-Links habe.

jetzt hätte ich noch gerne vor dem Text-Link

ein Bild, das sich bei den verschiedensten

Link Möglichkeiten (link, alink, vlink, hover) ändert.

Gibt es da irgendeine möglichkeit?

Gruß

TripleD

[tobias-digital]

Hi!

ja, gibt's:

Du definierst dein a-Element als Block, gibst ihm einen linken Innenrand, und definierst das gewünschte Bild als Hintergrundbild, welches du links-mittig ausrichtest und sich nicht wiederholen lässt. Etwa so:

a {

  display: block;

  padding: 0px 0px 0px 10px;

  background-image: url(bild-normal.gif);

  background-repeat: no-repeat;

  background-position: center left;

}

a:hover {

  background-image: url(bild-over.gif);

}

Gruß Tobias

[kills]

klar geht da was

entweder bei JS:

<img src='normal.gif' id='image'/><a href="abc.de" 

onMouseOver="documet.getElementById( 'image').src='hover.gif'"

onMouseOut="documet.getElementById( 'image').src='normal.gif'"></a>

wenn dus mit CSS klassen lösen willst, musst du mit background images arbeiten, da du mit css keine img src zuweisen kannst. z.b.

<a href='abc.de'></a>

CSS:

a {

   background-image: url('normal.gif');

}

a:hover {

   background-image: url('hover.gif');

}


a:active {

   background-image: url('active.gif');

}

.

.

.

[TripleD]

danke erst mal für eure Hilfe.

Also ich würd es schon gern mit CSS realisieren.

Eure vorschläge (CSS) funktioniert irgendwie nicht.

Hier mal mein Code der CSS datei.

a:link { color:#000000; text-decoration:none; background-image: url(../images/link.bmp);}


a:visited { color:#0080FF; text-decoration:none; background-image: url(../images/vlink.bmp);}


a:active { color:#00007F; text-decoration:none; background-image: url(../images/alink.bmp);}


a:hover { color:#FFFFFF; text-decoration:none; }

und

#menu_bg

{

   width:150;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #CFCFCF;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

}

Hoffe ihr findet da ne Lösung.

Wenn ich in #menu_bg ein bg-image einfüge,

dann ändert sich das nicht, wenn ich auf nen Link klicke.

TripleD

[kills]

angezeigt wird das image?

nur nicht gewechselt?

[TripleD]

Das Bild, dass eigentlich links von Link sein soll,

ist direkt unter dem Link-Text und ändert sich auch.

Aber wenn ich in mein Menü-Hintergrund das Bild

als bg-image mache, ist es zwar an der richtigen stelle,

aber die farbe ändert sich bei klick auf den link nicht.

[tobias-digital]

<style type="text/css">

<!--

a { 

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

   color: #000000; 

   text-decoration: none; 

   background-image: url(../images/link.bmp);

}

a:visited { 

   color:#0080FF; 

   text-decoration:none; 

   background-image: url(../images/vlink.bmp);

}

a:active { 

   color: #00007F; 

   text-decoration: none; 

   background-image: url(../images/alink.bmp);

}

a:hover { 

   color: #fff; 

   text-decoration: none; 

}

div#menu_bg {

   width: 150px;

   height: 22px;

   background-color: #AFAFAF;

   border-top: 1px solid #CFCFCF;

   border-right: 1px solid #CFCFCF;

   border-bottom: 1px solid #7F7F7F;

   border-left: 1px solid #7F7F7F;

}

-->

</style>


<div id="menu_bg">

   <a href="">Testlink</a>

</div>

So funktioniert's bei mir in allen Browsern. Ansonsten schick mal nen Link zu der Seite und wir schauen mal drauf

[TripleD]

Ich hab mir mal deinen CODE in eine Datei kopiert,

und siehe da, es funktioniert bei mir auch.

Wenn ich aber den CSS-Code in eine extra Datei schreibe,

so wie ich es bei mir ja auch habe, wird garnichtsmehr angezeigt,

auser mein Menühintergrund.

[tobias-digital]

Hi!

Die Pfadangaben zu den Bildern sind immer aus der Sicht des Stylesheet zu sehen, dass heißt, wenn dein Stylesheet woanders liegt musst Du von da aus auf die Bilder zugreifen.

Beispiel:

/stylesheets/screen/standard.css

/html/menu.htm

/images/link.bmp

dann muss es so lauten:

background-image: url(../../images/link.bmp);

[kills]

poste ma hier dein zeugs

oder gib die url ma raus!

[TripleD]

Also, hier mal meine Code-Schnipsel:

menu.php

<link rel="stylesheet" type="text/css" href="css/menu.css"/>


<div id="menu_rahmen" style="position:absolute; overflow:hidden; top:131; left:14; z-index:0">

</div>


<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:132; left:15; z-index:0">

        	  <a href="home.php" target="body">Home</a>

</div>


<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:154; left:15; z-index:0">

	  <a href="webprogrammierung.php" target="body">Webprogrammierung</a>

</div>

menu.css

a

{

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

   color: #000000;

   text-decoration: none;

   background-image: url(../images/link.bmp);

}

a:visited

{

   color:#0080FF;

   text-decoration:none;

   background-image: url(../images/vlink.bmp);

}

a:active

{

   color: #00007F;

   text-decoration: none;

   background-image: url(../images/alink.bmp);

}

a:hover

{

   color: #fff;

   text-decoration: none;

}

#menu_bg

{

   width:150;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #CFCFCF;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


#menu_rahmen

{

   border-style:solid;

   border-width:thin;

   width:152;

   height:222;

}


.menu_link_bg1

{

   width:92;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #000000;

   border-right:1    solid #000000;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


.menu_link_bg2

{

   width:92;

   height:22;


   background-color:#AFAFAF;

   color:#DF0000;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #000000;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


.menu_link_bg3

{

   width:92;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #000000;

   border-bottom:1   solid #000000;

   border-left:1     solid #7F7F7F;

}

Ordnerstrucktur

Main (hier steckt die index.php drin)

->css (hier steckt die menu.css drin)

->images (hier stecken die *.bmp drin)

->include (hier steckt die menu.php drin)

[TripleD]

Danke erst mal für eure Hilfe.

Ich hab den Fehler gefunden.

Es lag an den " " vor meinen Links:

<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:154; left:15; z-index:0">

	[COLOR=DarkRed]  [/COLOR]<a href="webprogrammierung.php" target="body">Webprogrammierung</a>

</div>

Gruß

TripleD