Verlinktes Bild bei onClick austauschen?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von s1nu, 15. Juli 2010 .

  1. 15. Juli 2010
    Hey Leute,

    das is wohl ne einfache Frage, bei mir ists aber schon n weilchen her.. und zwar habe ich ein Navigations aus Buttons, welche verlinkt sind und ich hätte gerne, dass wenn ich auf den button draufklicke, der Button ausgetauscht wird durch nen anderen Button.. soll dann so aussehen als würde man ihn reindrücken, so wie nen schalter nur wills momentan einfach net so recht hinhauen. vielleicht sagt mir wer was im dreamweaver genau machen muss dafür

    bw ist für gute hilfen ehrensache!

    lg
     
  2. 15. Juli 2010
    AW: Verlinktes Bild bei onClick austauschen?

    HTML:
    <img scr="unclicked.gif" onclick="this.src='clicked.gif'" />
    
    Wenn du das als Toggle haben wilst, also sodass man auch wieder das "nicht-geklickt" Bild beim erneuten klicken reinmachen willst, musst du halt einfach ne If Abfrage machen!

    MfG
     
  3. 15. Juli 2010
    AW: Verlinktes Bild bei onClick austauschen?

    Ich glaube du meinst das eher so:

    HTML:
    <img src="nicht_gedrueckt.gif" onmousedown="this.src = 'gedrueckt.gif';" onmouseup="this.src = 'nicht_gedrueckt.gif';" alt="Ein Linkbild" />
    
    damit wird zunächst die Grafik "nicht_gedrueckt.gif" angezeigt.
    Wenn du die Maustaste runterdrückst wird auf "gedrueckt.gif" gewechset und wenn du sie wieder loslässt zurück auf "nicht_gedrueckt.gif".

    Grüße


    // edit: Die Einwände, das ganze sauberer über CSS zu lösen sind berechtigt. Hab ich grade selbst nicht dran gedacht. Das ist also nur eine Alternative.
     
  4. 15. Juli 2010
    AW: Verlinktes Bild bei onClick austauschen?


    Wenn er das so haben will ist das hässlich. Kann man viel schöner mit CSS und hover lösen.
     
  5. 15. Juli 2010
    AW: Verlinktes Bild bei onClick austauschen?

    da kann man aber auch mit css arbeiten

    :hover -> maus ist drauf (mouseover)
    :active -> maus wurde geklickt (mousedown)
    :focus -> maus wurde geklickt (mouseup)

    beispiel:
    HTML:
    <!DOCTYPE html>
    <html lang="de" dir="ltr">
     <head>
     <title>CSS und die Maus</title>
     <style type="text/css">
     .my_link {
     color: #bf0000;
     font-family: verdata;
     text-decoration: none;
     padding: 6px;
     }
     
     .my_link:focus {
     color: green;
     }
     
     .my_link:active {
     text-decoration: underline;
     color: red;
     font-weight: bold;
     }
     
     .my_link:hover {
     font-weight: bold;
     }
     </style>
     </head>
     <body>
     <p><a href="#" class="my_link">Hallo Welt!</a></p>
     </body>
    </html>
    einfach mit hintergründen arbeiten
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.