• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild per Mausklick ändern

Z

Zwmartin

Neues Mitglied
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??
 
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:
Keine Ahnung, woher der Code kommt, aber das kann nicht gehen. Probier mal:
HTML: 
<html>
<body bgcolor="black" >
<script type="text/javascript">

    pic = new Array();
    pic[1] = new Image(); pic[1].src = "Bild1.jpg";
    pic[2] = new Image(); pic[2].src = "Bild2.jpg";
    pic[3] = new Image(); pic[3].src = "Bild3.jpg";

   var a=1;

function weiter()
{
    ++a;
    if (a>3) a=1;
    alert('Nun sollte kommen: Nr: ' + a + ' Name: ' + pic[a].src);
    document.getElementById('meinBild').src = pic[a].src;
}
</script>

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

</body>
</html>

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.
 
Danke für die Anwort funktioniert einwandfrei. Nur mit dem zuletzt ausgewählten Bild wird man das ohne Speicherung kaum umsetzen können oder?
 
Mit CSS ginge das auch. Dafür kann man Hintergrundbilder und die Pseudoklasse focus verwenden. Nachteil: kapiert der IE nicht.
 
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:
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.
 
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: 
<script type="text/javascript">

pic = new Array();
pic[1] = new Image(); pic[1].src = "Bild.jpg";
pic[2] = new Image(); pic[2].src = "Bild.jpg";
pic[3] = new Image(); pic[3].src = "Bild.jpg";

var a=1;

function weiter()
{
       if(document.cookie)
      {
          a = document.cookie;
          document.getElementById('meinBild').src = pic[a].src;
      }
      else
     {
         document.getElementById('meinBild').src = pic[1].src; 
     }
    ++a;
    if (a>3) {a=1}
    document.cookie =a;
}

</script><p align="center" style="text-align: left"><img width="15%" id="meinBild" onclick="weiter()" alt=""/></p>

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 ^^
 
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: 
<script type="text/javascript">
document.getElementById('meinBild').src = pic[1].src; 

var a=1;
var b=0;
    pic = new Array();
    pic[1] = new Image(); pic[1].src = "Bild.jpg";
    pic[2] = new Image(); pic[2].src = "Bild.jpg";
    pic[3] = new Image(); pic[3].src = "Bild.jpg";

document.cookie =a;
function weiter()
{ 
   alert(a)
    if(document.cookie)
      {
          a = document.cookie;
          a.split(";");
          var b = a[0];
          document.getElementById('meinBild').src = pic[b].src;
          a = a[0];
      }
      else
      {
          document.getElementById('meinBild').src = pic[1].src; 
      }
    ++a;
    if(a>3){a=1}
    document.cookie =a;
    }
  </script><p align="center" style="text-align: left"><img width="15%" id="meinBild" onclick="weiter()" alt=""/></p>
 
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: 
<script type="text/javascript">


var a=1;
var b=0;
    pic = new Array();
   pic[1] = new Image(); pic[1].src = "Bild.jpg";
    pic[2] = new Image(); pic[2].src = "Bild.jpg";
    pic[3] = new Image(); pic[3].src =  "Bild.jpg";

function weiter()
{  
       if(document.cookie)
      {
           alert("bin hier 2");
          alert(document.cookie);
          a = document.cookie;
          a.split(";");
          var b = a[0];
          document.getElementById('meinBild').src = pic[b].src;
          a = a[0];
      }
      else
      {
           alert("bin hier 3");

          document.getElementById('meinBild').src = pic[1].src; 
      }
    ++a;
    if(a>3){a=1}
    document.cookie =a;
}
  </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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben