JavaScript Jquery bei mouseover anderes Bild bei mouseleave wieder altes

[chrisi01]

hi

folgender (gekürzter) Code:

...
<div class="lala" id="11"><img src="img/map/leer.jpg"></img></div>
...
<script>
var alt;
$(".lala").mouseover(function() 
{
   alt = $(this).html();
   $(this).html('<img src="img/map/bau.jpg"></img>');
});
$(".lala").mouseleave(function() 
{
    $(this).html(alt);
});
</script>
....

bei mouseover ändert er das Bild aber bei mouseleave bleibt es und das alte kommt nicht zurück. Wenn ich anstatt den <img> Tag einfach nur Text verwende geht es aber komischerweise Wer kann mir da mal auf die Sprünge helfen? Wenn ich am Ende der mouseover Funktion die Variable alt ausgeben lasse (in einem extra Div z.b.) ist dort schon das neue Bild (bau.php) drinnen deswegen kann das mouseleave ja nicht mehr gehen. Bei Texten wo es funktioniert ist dort aber der alte Text drinnen

Also so geht es:

...
<div class="lala" id="11">lalakeinmouseover</div>
...
<script>
var alt;
$(".lala").mouseover(function() 
{
   alt = $(this).html();
   $(this).html('lalamouseover');
});
$(".lala").mouseleave(function() 
{
    $(this).html(alt);
});
</script>
....

mfg

Chris

 

[Bububoomt]

1. wäre mir neu, das man </img> macht. Das sollte man im img tag am ende amchen. <img src="" />
2. ich würde nur die src ändern und nicht das ganze Bild austauschen.
3. Eventuell wird das Mouseover mehrfach gefeuert durch den tausch des bildes, so das er dadurch das neue Bild reinschreibt.

 

[chrisi01]

1. ok werde ich machen
2. auch ne gute Idee danke
3. das wars prüfe nun ob das Bild schon geändert wurde und mache danach nix mehr

...
<div class="map" id="11"><img src="img/map/leer.jpg"></img></div>
...
    <script>
      var alt;
      var change = 0;
      $(".map").mouseover(function() 
      {
        if (change != 1)    
        {
          alt = $(this).html();
          $(this).html('<img src="img/map/bau.jpg"></img>');
          change = 1;
        }
      });
      $(".map").mouseleave(function() 
      {
        $(this).html(alt);
        change = 0;
      });
    </script>
...

Geht Punkt 1 und 2 ist noch nicht umgesetzt werde ich aber nach holen

edit:
da ich nun das Problem habe, das bei vielen Feldern nebeneinander er manche Felder nicht mehr zurücksetzt wenn man die Maus zu schnell drüber bewegt habe ich den Code noch mal geändert:

...
<div class="lala" id="11"><img src="img/map/leer.jpg"></img></div>
...
      var alt;
      var alt2;
      $(".lala").mouseover(function() 
      {
        $(alt2).html(alt);
        alt = $(this).html();
        alt2 = this;
        $(this).html('<img src="img/map/bau.jpg" />');
      });

das am Ende dann 1 Feld markiert bleibt ist in meinen Fall egal


(da formatiert man im Forum die Tabs noch nach und dann kommt doch nur Unsinn raus)

 

[tobomator]

HTML technisch würde ich ein img.hoover erzeugen oder so in der art.
Das funktionierte bisher immer...
Wie man das in JQuery macht, keine Ahnung, aber müßte auch so gehen

 

[x3ntar]

probier doch mal statt die HTML-Funktion folgendes aus:

neu = 'img/map/leer.jpg';
$(".map").attr('src',neu);

 

[Sebmaster]

jQuery hat, wenn ich mich nicht irre, hover(in, out) direkt als Funktion. Eigentlich eh nur Mapper auf mouseenter, mouseleave, aber ist einfach

EDIT: Ja, hat es.