Ergebnis 1 bis 3 von 3

Thema: buttons mit pseudoklassen erstellen

  1. #1
    betti1
    Gast

    Standard buttons mit pseudoklassen erstellen

    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

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <title>&#58;link, &#58;visited, &#58;focus, &#58;hover, &#58;active</title>
      <style type="text/css">
    img&#58;link &#123; src="file&#58;///D&#58;/webprojekt/templates/meintemplate/images/taste.gif" &#125;
    img&#58;visited &#123; &#125;
    img&#58;focus &#123; &#125;
    img&#58;hover &#123; src="file&#58;///D&#58;/webprojekt/templates/meintemplate/images/taste1.gif" &#125;
    img&#58;active &#123; &#125;
      </style>
    </head>
    <body>
    [img]file&#58;///D&#58;/webprojekt/templates/meintemplate/images/taste.gif[/img]
    </body>
    </html>
    
    kann mir jemand weiterhelfen und weiss wo der fehler liegt?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So müsste es klappen:

    CSS
    Code:
    <style type="text/css">
    
    a&#58;link &#123;
    display&#58;block;
    width&#58;100px;
    height&#58;30px;
    background-image&#58;url&#40;taste.gif&#41;;
    &#125;
    
    a&#58;visited &#123;
    display&#58;block;
    width&#58;100px;
    height&#58;30px;
    background-image&#58;url&#40;taste2.gif&#41;;
    &#125;
    
    a&#58;hover &#123;
    display&#58;block;
    width&#58;100px;
    height&#58;30px;
    background-image&#58;url&#40;taste1.gif&#41;;
    &#125;
    
    </style>
    Für die width- und height-Werte nimmst du die deiner Grafikgrößen.

    HTML
    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&#58;link &#123;
    display&#58;block;
    width&#58;100px;
    height&#58;30px;
    background-image&#58;url&#40;webprojekt/templates/meintemplate/images/taste.gif&#41;;
    &#125;
    Allerdings muss die gleiche Verzeichnis/Ordnerstruktur dann auch auf dem Webspace hinterlegt sein.

  3. #3
    Teeny
    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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&#123;
    background-image&#58;
      url&#40;file&#58;///D&#58;/webprojekt/templates/meintemplate/images/taste.gif&#41;;
    &#125;
    
    #klavier&#58;hover&#123;
      url&#58;&#40;file&#58;///D&#58;/webprojekt/templates/meintemplate/images/taste1.gif&#41;;
    &#125;
    
    #klavier&#58;active&#123;
      url&#58;&#40;entsprechende bilder-url&#41;
    &#125;

    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

Ähnliche Themen

  1. Problem mit Pseudoklassen (CSS)
    Von noname0309 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.03.2007, 13:42
  2. Ordner erstellen und Datei erstellen
    Von Daniela im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 20
    Letzter Beitrag: 26.02.2007, 20:41
  3. Buttons mit php erstellen
    Von Cpt. Rick im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 14.11.2006, 21:18
  4. Software zum Erstellen von Buttons/Bannern
    Von Antimon im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 28.11.2005, 10:19
  5. Buttons
    Von Beatz im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.06.2004, 16:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •