Ajax - Bilder onmouse / outmouse -> Text daneben an / aus

fl1tz

Grünschnabel
Hallo an diesem schönen Sonnentag!
Ich bin mit folgender Lösung unsicher und würde sie zudem gern verfeinern. Für Tipps und / oder Hinweise wäre ich dankbar.

Ich habe eine Tabelle, in deren linker Spalte 3 Bilder untereinander stehen. In der zweiten Spalte ist in den <td>'s Platz freigehalten für Texteinblendungen. Nun soll per Ajax bei onmouseover in diesen <td>'s Text aus zugehörigen einfachen Textdateien aufgerufen, bei onmouseout ausgeblendet werden.

1. Mein Script scheint zu funktionieren. Sieht da jemand, der den Profi-Blick hat, dennoch einen fatalen Error-Wurm?
2. Zudem würde ich gern die mouseout-Lösung verfeinern. In meiner Lösung rufe ich eine leere Datei auf. Hat jemand eine Idee, wie ich die Ausgabe eleganter "leeren" könnte?

Javascript:
var resOb = new XMLHttpRequest();
window.onload = function() {
    document.getElementsByTagName("IMG")[0].onmouseover = function() {sndReq(0)};
    document.getElementsByTagName("IMG")[1].onmouseover = function() {sndReq(1)};
    document.getElementsByTagName("IMG")[2].onmouseover = function() {sndReq(2)};
    document.getElementsByTagName("IMG")[0].onmouseout = function() {out(0)};
    document.getElementsByTagName("IMG")[1].onmouseout = function() {out(1)};
    document.getElementsByTagName("IMG")[2].onmouseout = function() {out(2)};
    function sndReq(i){
        switch(i) {
            case 0: resOb.open('get', 'info0.txt', true); break; 
            case 1: resOb.open('get', 'info1.txt', true); break;
            case 2: resOb.open('get', 'info2.txt', true); break;
            }
            function handleResponse(i) {
                if (resOb.readyState == 4)
                    document.getElementById("info" + i).innerHTML = resOb.responseText;
            }
            resOb.onreadystatechange = function() {
                handleResponse(i);
            };
            resOb.send(null);
        };   

    function out(i){
        if (i <=2) {
            resOb.open('get', 'info3.txt', true);
        }
        function handleResponse(i) {
            if (resOb.readyState == 4)
                document.getElementById("info" + i).innerHTML = resOb.responseText;
            }
            resOb.onreadystatechange = function() {
                handleResponse(i);
        };
        resOb.send(null);   
    };
};
 
Einen fatalen Fehler sehe ich auf Anhieb nicht, aber hast Du daran gedacht, dass es auf Touch-Geräten kein Mouseover gibt und der Benutzer die Texte nicht zu Gesicht bekommt?

In meiner Lösung rufe ich eine leere Datei auf. Hat jemand eine Idee, wie ich die Ausgabe eleganter "leeren" könnte?
Versuche es so:
Code:
    function out(i){
        document.getElementById("info" + i).innerHTML = "";
    };
 
@Sempervivum, vielen Dank für die schnelle Antwort!
1. Für Tablets & Co. ist das natürlich nichts. Ich habe spaßeshalber einmal onmouseover / onmouseout mit click / dbclick ersetzt. - Aber da ist erst einmal gar nichts passiert. Das müsste doch eigentlich klappen?

2. Stimmt. Da ich kein Objekt anzeige, brauche ich auch kein Objekt durchreichen. Es reicht offenbar ...
Code:
function out(i){
        document.getElementById("info" + i).innerHTML = "";
    };

Also -> ?
Code:
var resOb = new XMLHttpRequest();
window.onload = function() {
    document.getElementsByTagName("IMG")[0].onmouseover = function() {sndReq(0)};
    document.getElementsByTagName("IMG")[1].onmouseover = function() {sndReq(1)};
    document.getElementsByTagName("IMG")[2].onmouseover = function() {sndReq(2)};
    document.getElementsByTagName("IMG")[0].onmouseout = function() {out(0)};
    document.getElementsByTagName("IMG")[1].onmouseout = function() {out(1)};
    document.getElementsByTagName("IMG")[2].onmouseout = function() {out(2)};
    function sndReq(i){
        switch(i) {
            case 0: resOb.open('get', 'info0.txt', true); break;
            case 1: resOb.open('get', 'info1.txt', true); break;
            case 2: resOb.open('get', 'info2.txt', true); break;
            }
            function handleResponse(i) {
                if (resOb.readyState == 4)
                    document.getElementById("info" + i).innerHTML = resOb.responseText;
            }
            resOb.onreadystatechange = function() {
                handleResponse(i);
            };
            resOb.send(null);
        };   

    function out(i){
        document.getElementById("info" + i).innerHTML = "";
    };
};
 
Zuletzt bearbeitet:
Zurück