buttons mit pseudoklassen erstellen

betti1

hi,
bin neu hier. und hab ein problem beim button erstellen.
meine idee: ein verlinktes bild (in meinem fall eine klaviertaste) soll die farbe ändern sobald die maus drüber kommt und bei einem klick darauf. wenn der link angeklick wurde soll sie eine andere farbe bekommen.
hab jetzt 3 verschieden farbige tasten gespeichert, und wollte das ganze mit der :link, :visited, :focus, :hover, :active funktion umsetzen allerdings ohne Erfolg. hier der code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>:link, :visited, :focus, :hover, :active</title>
  <style type="text/css">
img:link { src="file:///D:/webprojekt/templates/meintemplate/images/taste.gif" }
img:visited { }
img:focus { }
img:hover { src="file:///D:/webprojekt/templates/meintemplate/images/taste1.gif" }
img:active { }
  </style>
</head>
<body>
[url='http://www.biblioteca-tercer-milenio.com'][img]file:///D:/webprojekt/templates/meintemplate/images/taste.gif[/img][/url]
</body>
</html>


kann mir jemand weiterhelfen und weiss wo der fehler liegt?

Alles anzeigen

sejuma

So müsste es klappen:

CSS

Code

<style type="text/css">


a:link {
display:block;
width:100px;
height:30px;
background-image:url(taste.gif);
}


a:visited {
display:block;
width:100px;
height:30px;
background-image:url(taste2.gif);
}


a:hover {
display:block;
width:100px;
height:30px;
background-image:url(taste1.gif);
}


</style>

Alles anzeigen

Für die width- und height-Werte nimmst du die deiner Grafikgrößen.

HTML

Code

[url='http://www.biblioteca-tercer-milenio.com'][/url]

Jetzt musst du noch darauf achten, dass bei den background-images der Pfad und die Ordner stimmen. In deinem Fall verweisen sie auf die Festplatte D. Das funktioniert offline, jedoch nicht online, da es hier keine Verbindung zu deiner Festplatte gibt.

Entsprechend deinen Vorgaben wäre das so:

Code

a:link {
display:block;
width:100px;
height:30px;
background-image:url(webprojekt/templates/meintemplate/images/taste.gif);
}

Allerdings muss die gleiche Verzeichnis/Ordnerstruktur dann auch auf dem Webspace hinterlegt sein.

Dragooni

hi,

mach es doch mit einem div und im css

machst einfach ein leeres div:

Code

<div id="klavier"></div>

und im css definierst:

Code

#klavier{
background-image:
  url(file:///D:/webprojekt/templates/meintemplate/images/taste.gif);
}


#klavier:hover{
  url:(file:///D:/webprojekt/templates/meintemplate/images/taste1.gif);
}


#klavier:active{
  url:(entsprechende bilder-url)
}

Alles anzeigen

Das ganze geht auch mit visited und focus.
Aber soviel ich weiss, wird das vom IE erst ab Version 7 unterstützt, probiere es zuerst mal aus

hoffe es klappt

//edit: War wer schneller und ausführlicher xD

Tags