javascript -> ajax/jquery ?

[syuam]

hey leute also folgendes:
Auf meiner Seite habe ich zwei verschiedene img-Elemente,
Erstes img-Element:

<img src="path1" name="wert" />

Zweites img-Element:

<img src="path2" name="wert" />

Bei jedem "onmouseover" soll sich "border-color" verändern.
Bei jedem "onmouseout" soll wieder die ursprüngliche "border-color" erscheinen.
Bei jedem "onclick" soll das "value" von dem angeklickten Bild in ein input-hidden-Feld geschrieben werden.
Außerdem soll das angeklickte Bild markiert bleiben.
Wichtig: Es darf immer nur ein Bild angeklickt bleiben . Außerdem sollen sich alle "events" nur auf das zweite img-Element auswirken, also nur bei:

<img src="path2" name="wert" />

Allerdings habe ich das nun mit inline-JS gelöst, hier:

function changecolor(img)
{
    var images = document.getElementsByTagName("img");
    for(var i=0,j=images.length; i<j; i++)
    {
        images[i].style.borderColor="#F00";
    }
    if(img.src == "path2") {
        img.style.borderColor="#F00";
    }
    if(img.src == "path2") {
        document.getElementById('number').value = img.name // das value wird immer verschickt
    }
}

Nun wollte ich dieses ganze inline-js-Gefummel weglassen und stattdessen alles im header lösen(per ajax oder jquery?),
wie sollte ich es machen?
lg

 

[Tronjer]

Das Nachfolgende habe ich jetzt nicht getestet, aber entscheidend ist hier der Event-Listener on() in Verbindung mit dem Keyword this als Referenz des aktuellen Objekts.

$(document).ready(function() {
  $('img').on('click', function() {
    if( $(this).attr('src') === 'path2' ) {
      // tu was mit dem value
      $(this).attr('value') ...
      ......................
    }
    $(this).mouseover(function() {
       $(this).css('border-color', '#ff0000');
    });
     $(this).mouseout(function() {
       $(this).css('border-color', '#00ff00');
    });
  });
})

 

[syuam]

ok, angenommen "mouseover" und "mouseout" sollen auch nur dann laufen, wenn mit dem Mauszeiger über das img-Element mit img.src==="path2" gefahren wird, dann brauche ich die beiden Funktionen auch nur in eine if-Bedingung zu setzen oder? genau so wie das value..lg

 

[Tronjer]

Jupp, baue das doch einfach stufenweise auf und teste nach jeder iteration.

// Stufe 1:
$('img').on('click', function() {
  console.log('Hi');
});

//Stufe 2
$('img').on('click', function() {
  if( $(this).attr('src') === 'path2' ) {
    console.log('Hi');
  }
});

//Stufe 3
.......

 

[syuam]

ok danke ich werde die ganzen Abläufe stufenweise testen, anschließend poste ich hier nochmals :)

 

[syuam]

ok also ich habe das Problem online gestellt, hier:
http://checkstyle.eu.pn/
Nun weiß ich aber nicht, wieso "mouseover" und "mouseout" nicht funktionierten...
Die if-Bedingung muss doch für die blauen Bilder true ergeben und dann sollte sich der "border" grün färben oder?
Das mit dem input-hidden-Feld lassen wir erstmal. Es geht mir nur darum, dass mouseover und mouseout funktionieren? Weißt du was ich falsch gemacht habe?
lg

 

[Tronjer]

Schau mal in die Konsole, dann siehst du den Grund.

Meine Funktion aus post #2 war auch nicht zum copy & paste bestimmt.

 

[syuam]

ich wollte ihn ja auch nur ergänzen..hab es nun umgeändert, so dass erst mal nur "mouseover" und "mouseout" laufen sollten, funktioniert aber nicht..wieso?
lg

edit: fehlermeldung für js laut konsole:
Character encoding was not declared... ich schreibe mit notepad++ und habe dort UTF-8 ohne BOM als Kodierung.
was soll ich den nun tun?

edit: ich habe nun weitee notwendige meta daten angegeben, und die fehlermeldung ist weg.
das script funktioniert trotzdem nicht mit mousover und mouseout. kannst du mir jetzt helfen?
wäre echt nett danke
edit: es funtz, danke :)

 

[Tronjer]

Es ging bei dem Beispiel in erster Linie darum, wie sich das Inline-JS mit Hilfe von Event-Listenern eliminieren lässt. Darüber hinaus sollte man schon nachdenken, was Sinn macht. Eine Kombination von click() und mouseover() eher nicht. ;)

 

[syuam]

ja stimmt du hast recht, hier ein Beispiel dafür:

<script>
$(document).ready(function() {
  $('img').on('click', function() {
    if( $(this).attr('src') == "http://www.checkstyle.eu.pn/images/blau.png" ) {
      $(this).click(function() {
        $(this).css('border-color', 'red');
      });
    }
  })
  $('img').on('mouseover', function() {
    if( $(this).attr('src') == "http://www.checkstyle.eu.pn/images/blau.png" ) {
      $(this).mouseover(function() {
        $(this).css('border-color', 'green');
      });
    }
  })
  $('img').on('mouseout', function() {
    if( $(this).attr('src') == "http://www.checkstyle.eu.pn/images/blau.png" ) {
      $(this).mouseout(function() {
        $(this).css('border-color', 'black');
      });
    }
  })
})
</script>

Alle drei Funktionen werden "ordnugsgemäß" ausgeführt, Beispiel: wenn ich ein Bild anklicke bleibt es markiert, wenn ich mit dem Mauszeiger aber dann das Bild verlasse wird "mouseout" ausgeführt und die Markierung ist weg
nun wollte ich, dass man die Möglichkeit hat, dass bei Klick ein Bild markiert wird und auch markiert bleibt, wenn der Mauszeiger das Bild verlässt.
Wie sollte ich da vorgehen?
lg
weißt du wie ich da vorgehen sollte?

 

[Tronjer]

Das ist insofern etwas unglücklich, als dass alle drei Funktionen die border-color beeinflussen sollen.

Mit hover() lässt sich ein Event-Listener für mousein() und mouseout() kombinieren. Das click() sollte erst ein unbind für hover() setzen, dem border eine Farbe zuweisen und beim mouseout() das hover()-Event wieder aufrufen. Der Ansatz wären zwei Funktionen, die entsprechend ergänzt werden müssen.

$('img').hover(function() { ... })
$('img').click(function() { ... })

 

[syuam]

ok ich habe mich entschieden, dass nun doch etwas anders zu machen:

<input type="image" src="#" name="wert" />

Nun fungiert das Bild ja sozusagen als button,
trotzdem würde ich gerne bei Klick auf das Bild den Wert von "name" in ein input-hidden-Feld schreiben, damit ich damit dann weiterarbeiten kann.

<input type="hidden" id="identifikation" name="name" value="" />

Ich würde das nun über inline-js lösen(onclick-event), aber das ist halt schlechter stil, deswegen wollte ich fragen auf welche Weise ich das Problem noch lösen könnte? jquery?
lg

 

[scbawik]

Ja, mit jQuery von mir aus:

<input type="image" src="#" value="wert" name="bild">

$('[name="bild"]').on('click',function () {
    $('#identifikation').val($(this).val());
});