Input Button mit 2 Bildern (wechselnd)

  • Input Button mit 2 Bildern (wechselnd)

    Hallo,
    wie kann ich aus diesem Code

    Quellcode

    1. <input class="liteoption" type="button" value="Show" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">


    einen input Button mit 2 verschiedenen Grafiken erstellen wobei aber die Funktionen hide und show nicht beeinträchtigt werden ?

    ICh möchte 2 grafiken haben wo zb Button1 steht und Button2 wbei dann bei klick der Button1 versetzt werden soll mit Button2 und umgekehrt.

  • Die Formatierung deines Codes ist eine Zumutung!

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html>
    5. <head>
    7. <script type="text/javascript">
    8. function doSomething() {
    9. var display = this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display;
    10. if (display != '') {
    11. display = '';
    12. this.innerText = '';
    13. this.value = 'Hide';
    14. } else {
    15. display = 'none';
    16. this.innerText = '';
    17. this.value = 'Show';
    18. }
    19. }
    20. </script>
    22. <title>doSomething</title>
    24. </head>
    26. <body>
    28. <input class="liteoption" type="button" value="Show" onclick="doSomething()" />
    30. </body>
    32. </html>
    Alles anzeigen


    Und dann bitte nochmal deine Frage in verständlicher Form. Willst du deinen Button mit einer Hintergrundgfaphik versehen, der sich beim Click ändert, oder was?

  • Hi,
    naja das mit dem Code ist nicht auf meinem mist gewachsen Javascript kann ich garnicht. Zu dem Button ich weis nicht wie ich das erklären soll.

    mmhh
    im Anhang ist ein Bild wie ich das habe bis jetzt. Der Button "Show und Hide" möchte ich durch selbst erstellte Grafiken ersetzten wobei jewals nur einer immer sichbar sein soll. Wie jetzt mit Show und Hide nur halt mit Grafiken.
    Bilder

    • hiden.gif

      4,17 kB, 830×300, 786 mal angesehen

  • klingt irgendwie fast als hättest du gar keine lust es zu lernen...

    ungetestet:

    Quellcode

    1. function doSomething(ob) {
    2. var display = this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display;
    3. if (display != '') {
    4. display = '';
    5. this.innerText = '';
    6. ob.src = 'Hide.gif';
    7. } else {
    8. display = 'none';
    9. this.innerText = '';
    10. ob.value = 'Show.gif';
    11. }
    12. }
    Alles anzeigen


    Quellcode

    1. <input class="liteoption" type="image" src="alt.gif" value="Show" onclick="doSomething(this)" />


    Literatur:
    * http://de.selfhtml.org/html/formulare/formularbuttons.htm
    * http://de.selfhtml.org/javascript/objekte/node.htm
    * http://de.selfhtml.org/javascript/objekte/document.htm

  • "markus" schrieb:

    im Anhang ist ein Bild wie ich das habe bis jetzt. Der Button "Show und Hide" möchte ich durch selbst erstellte Grafiken ersetzten wobei jewals nur einer immer sichbar sein soll. Wie jetzt mit Show und Hide nur halt mit Grafiken.


    Hm, das ist doch schon viel verständlicher, obwohl da noch ein paar Fragen offen bleiben:

    1) Willst du daß sich die Beschriftung des Buttons ändert?

    2) Wie kommst du zu:

    Quellcode

    1. this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]

    Läßt sich die DIV nicht anders referenzieren? Durch eine ID z.B.?
    So sieht das furchtbar aus und da kann ich mir vorstellen daß JavaScript nicht dein Ding ist.
    Aber wenn du die DIV wie folgt bezeichnest:

    Quellcode

    1. <div id="meine_id"></div>

    dann kannst du statt dem obigen Ausdruck folgenden verwenden.

    Quellcode

    1. document.getElementById('meine_id')

  • @ d0nUt
    das funktioniert irgendwie nicht so richtig. Der Code hat irgendwie keine Funktion und ich sehe auch kein Bild. Wenn ich mir den Bildnamen ansehe will er immerr ein "alt.gif" haben ???
    Dann muß doch irgendwas hier nicht stimmen mit dem scr

    Quellcode

    1. <input class="liteoption" type="image" src="alt.gif" value="Show" onclick="doSomething(this)" />


    @ Marcus Gnaß
    das mit den ids habe ich noch nicht ausprobiert denn so sieht momentan mein HTML
    Code aus mit auskmmatierung des originalen input Code. Der input Code der aktiv ist ist von d0nUt.
    hier mal ein Bild wie ich das meine

    EDIT:
    habe meinen HTML Code vergessen :/
    Bilder

    • spoiler.gif

      4,44 kB, 830×300, 751 mal angesehen

  • "Marcus Gnaß" schrieb:

    Quellcode

    1. <input class="liteoption" type="button" value="Show" onclick="doSomething()" />


    "d0nUt" schrieb:

    Quellcode

    1. <input class="liteoption" type="image" src="alt.gif" value="Show" onclick="doSomething(this)" />


    Wenn du genau hinschaust hat d0nUt aus deinem InputButton ein InputImage gemacht.
    Bei einem InputButton kannst du per JavaScript den Value (Hide/Show) ändern.
    Bei einem InputImage kannst du die Source ändern. Das ist die URI zur Graphik.

    Ich empfehle mal wieder SelfHTML. Einen Link dazu findet du im StickyThread easy-coding.de/literatur-zu-ht…ascript%2C-css-t2412.html