1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Bild per Mausklick ändern

Dieses Thema im Forum "Alles rund HTML und XHTML" wurde erstellt von Zwmartin, 13 September 2011.

  1. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Das Bild stellt eine Ampel dar und soll per Klick die Farbe ändern. Also von grün->gelb->rot->grün usw.
    Ich habe also drei Bilder von den eins mein Startbild ist und die anderen je nach Maus klick das Startbild ersetzten oder überlagern sollen.

    Ist so etwas möglich??
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. struppi

    struppi Guest

    Ja, aber nicht mit reinem HTML
     
  3. GW2BDA

    GW2BDA Neues Mitglied

    Registriert seit:
    28 Januar 2011
    Beiträge:
    43
    Punkte für Erfolge:
    0
    mit JS ginge das... aber nicht mit nur html oder css...
     
  4. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Danke euch erstmal,
    ich habe mich mal bissel umgeschaut und eine Lösung gefunden. Meine Javascript Syntax Kenntnisse sind aber gleich 0 und deshalb finde ich den Fehler nicht. Ich bekomme kein Bild angezeigt.


    <html>
    <body bgcolor=black >

    <script type="text/javascript">

    pic1 = new Image(); pic1.src = "Bild.jpg"
    pic2 = new Image(); pic2.src = "Bild.jpg"
    pic3 = new Image(); pic3.src = "Bild.jpg"

    var a=1;

    function weiter()
    {
    document.getElementById('meinBild').src = "pic"+a+".jpg";
    ++a;
    if (a>3) {a=1}
    }
    </script>

    <p align="center">
    <img src="pic1.jpg" onclick=weiter() width=80% ID="meinBild">
    </p>

    </body>
    </html>




    Noch eine Frage wäre kann man sich das zuletzt ausgewählte Bild irgendwie merken, also diese sollte dann beim Neustart der Siete auch angezeigt werden
     
    Zuletzt bearbeitet: 13 September 2011
  5. NetAktiv

    NetAktiv Senior HTML'ler

    Registriert seit:
    23 April 2011
    Beiträge:
    1.065
    Punkte für Erfolge:
    48
    Keine Ahnung, woher der Code kommt, aber das kann nicht gehen. Probier mal:
    HTML:
    1.  
    2. <body bgcolor="black" >
    3. <script type="text/javascript">
    4.  
    5.     pic = new Array();
    6.     pic[1] = new Image(); pic[1].src = "Bild1.jpg";
    7.     pic[2] = new Image(); pic[2].src = "Bild2.jpg";
    8.     pic[3] = new Image(); pic[3].src = "Bild3.jpg";
    9.  
    10.    var a=1;
    11.  
    12. function weiter()
    13. {
    14.     ++a;
    15.     if (a>3) a=1;
    16.     alert('Nun sollte kommen: Nr: ' + a + ' Name: ' + pic[a].src);
    17.     document.getElementById('meinBild').src = pic[a].src;
    18. }
    19.  
    20. <p align="center">
    21. <img src="bild1.jpg" onclick="weiter();" width="80%" ID="meinBild">
    22. </p>
    23.  
    24. </body>
    25. </html>
    26.  
    Gestest habe ich es nicht, können noch kleine Fehler drin sein. Wenn es klappt, lösche die Zeile mit dem alert. Natürlich müssen die drei Bilder Bildx.jpg (x=1,2,3) existieren und Bild1 muss beim Starten angezeigt werden.
     
  6. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Danke für die Anwort funktioniert einwandfrei. Nur mit dem zuletzt ausgewählten Bild wird man das ohne Speicherung kaum umsetzen können oder?
     
  7. NetAktiv

    NetAktiv Senior HTML'ler

    Registriert seit:
    23 April 2011
    Beiträge:
    1.065
    Punkte für Erfolge:
    48
  8. threadi

    threadi Moderator Team Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    15.052
    Punkte für Erfolge:
    83
    Mit CSS ginge das auch. Dafür kann man Hintergrundbilder und die Pseudoklasse focus verwenden. Nachteil: kapiert der IE nicht.
     
  9. NetAktiv

    NetAktiv Senior HTML'ler

    Registriert seit:
    23 April 2011
    Beiträge:
    1.065
    Punkte für Erfolge:
    48
    Und damit soll er sich beim nächsten Mal, wenn die Seite aufgerufen wird, auch merken können, welches Bild als letztes aktiv war? Oder soll er damit die Bilder im Wechsel einblenden?
     
  10. threadi

    threadi Moderator Team Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    15.052
    Punkte für Erfolge:
    83
    Merken geht nur per JavaScript/PHP. Klicken auch ohne.
     
  11. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Hi danke erstmals für eure Antworten.

    Ich habe mich jetzt über Cookies mal belesen und wollte fragen ob mein Ansatz richtig ist?

    Ich würde mir das aktuelle Bild aus dem Array holen und als Cookie speichern. Und dies dann als Startbild wieder einlesen?

    Geht es denn überhaupt das man eine variable als src mit gibt also src="variable.." ?






    Ein andere Gedanke wäre die URL die ich im Array habe zu splitten ( URL haben alle dasselbe Schema ...."Name"...) nach dem Name .
    Diesen Name auf ein Cookie zusichern und als Variable dem Src mitgeben ( Src= "....."+ Variable Name+"...").

    Ist das zu kompliziert gedacht oder bin ich wenigstens auf dem richtigen Weg?
     
    Zuletzt bearbeitet: 14 September 2011
  12. mermshaus

    mermshaus Senior HTML'ler

    Registriert seit:
    11 August 2009
    Beiträge:
    5.369
    Punkte für Erfolge:
    48
    Klingt machbar. Du kannst Attributen wie src auch den Inhalt von Variablen zuweisen. Die dann allerdings nicht in Anführungszeichen setzen, sonst hast du einen String.
     
  13. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Hat leider nicht funktioniert, kann aber auch sein das meine Variable nach dem Script nicht mehr verfügbar ist?! Ich kenne mich leider mit JavaScript nur wenig bis gar nicht aus.

    Ich habe dann noch eine andere Lösung probiert aber die scheint auch ein Logik oder Syntaxfehler zu haben.


    Code (text):
    1.  
    2. <script type="text/javascript">
    3.  
    4. pic = new Array();
    5. pic[1] = new Image(); pic[1].src = "Bild.jpg";
    6. pic[2] = new Image(); pic[2].src = "Bild.jpg";
    7. pic[3] = new Image(); pic[3].src = "Bild.jpg";
    8.  
    9. var a=1;
    10.  
    11. function weiter()
    12. {
    13.        if(document.cookie)
    14.       {
    15.           a = document.cookie;
    16.           document.getElementById('meinBild').src = pic[a].src;
    17.       }
    18.       else
    19.      {
    20.          document.getElementById('meinBild').src = pic[1].src;
    21.      }
    22.     ++a;
    23.     if (a>3) {a=1}
    24.     document.cookie =a;
    25. }
    26.  
    27. </script><p align="center" style="text-align: left"><img width="15%" id="meinBild" onclick="weiter()" alt=""/></p>
    28.  
    Die Idee war eigentlich das ich meine Variable auf eine Cookie zu speichern und diesen dann wieder auszulesen, damit ich weiß welches Bild zuletzt geladen war. Und falls kein Cookie gesetzt wurde soll er immer das Bild 1 nehmen. Funktioniert nur leider in meiner Theorie nur so ^^
     
  14. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Das Problem war das ich den ganzen Cookie mitgeben habe und nicht nur die Nummer.
    Er speichert und lädt mir nun die aktuelle Nummer.

    Nur wie kann ich jetzt der Seite sagen das sie vor dem Laden genau auch das Bild mit der aktuellen Nummer auswählt??
    Meine Versuche bis jetzt gingen alle Schief, es wurde dann immer wieder das selbe Bild geladen.
    Code (text):
    1. <script type="text/javascript">
    2. document.getElementById('meinBild').src = pic[1].src;
    3.  
    4. var a=1;
    5. var b=0;
    6.     pic = new Array();
    7.     pic[1] = new Image(); pic[1].src = "Bild.jpg";
    8.     pic[2] = new Image(); pic[2].src = "Bild.jpg";
    9.     pic[3] = new Image(); pic[3].src = "Bild.jpg";
    10.  
    11. document.cookie =a;
    12. function weiter()
    13. {
    14.    alert(a)
    15.     if(document.cookie)
    16.       {
    17.           a = document.cookie;
    18.           a.split(";");
    19.           var b = a[0];
    20.           document.getElementById('meinBild').src = pic[b].src;
    21.           a = a[0];
    22.       }
    23.       else
    24.       {
    25.           document.getElementById('meinBild').src = pic[1].src;
    26.       }
    27.     ++a;
    28.     if(a>3){a=1}
    29.     document.cookie =a;
    30.     }
    31.   </script><p align="center" style="text-align: left"><img width="15%" id="meinBild" onclick="weiter()" alt=""/></p>
     
  15. mermshaus

    mermshaus Senior HTML'ler

    Registriert seit:
    11 August 2009
    Beiträge:
    5.369
    Punkte für Erfolge:
    48
  16. Zwmartin

    Zwmartin Neues Mitglied

    Registriert seit:
    31 August 2011
    Beiträge:
    17
    Punkte für Erfolge:
    0
    Ja das stimmt schon nur wenn ich keine Cookie vorher setzt, springt er mir Warum auch immer in die If Anweisung und ignoriert meine Else.

    Code (text):
    1. <script type="text/javascript">
    2.  
    3.  
    4. var a=1;
    5. var b=0;
    6.     pic = new Array();
    7.    pic[1] = new Image(); pic[1].src = "Bild.jpg";
    8.     pic[2] = new Image(); pic[2].src = "Bild.jpg";
    9.     pic[3] = new Image(); pic[3].src =  "Bild.jpg";
    10.  
    11. function weiter()
    12. {  
    13.        if(document.cookie)
    14.       {
    15.            alert("bin hier 2");
    16.           alert(document.cookie);
    17.           a = document.cookie;
    18.           a.split(";");
    19.           var b = a[0];
    20.           document.getElementById('meinBild').src = pic[b].src;
    21.           a = a[0];
    22.       }
    23.       else
    24.       {
    25.            alert("bin hier 3");
    26.  
    27.           document.getElementById('meinBild').src = pic[1].src;
    28.       }
    29.     ++a;
    30.     if(a>3){a=1}
    31.     document.cookie =a;
    32. }
    33.   </script><p align="center" style="text-align: left"><img width="15%" id="meinBild" onclick="weiter()" alt=""/></p>

    Die Ausgabe ("bin hier 2") kommt obwohl ich meine Cookies vorher lösche, er hat aber nur den Cookie ohne mein Wert und bringt dann halt ne Fehlermeldung.

    Aber selbst wenn das gehen sollte,bleibt ja noch das Problem das das erste Bild erst beim 1 klick ersscheint.