Java Reference
In-Depth Information
Listing 10.6■
Eine Webseite mit mehreren Bildern
...
<script src="lib/js/erzeugeXHR.js" type="text/javascript"></script>
<script src="lib/js/kap10_2.js" type="text/javascript"></script>
</head>
<body>
<h1>Zusatzinformationen</h1>
<table><tr><td><img src="images/h1.jpg" /></td>
<td><img src="images/h2.jpg" /></td>
<td><img src="images/h3.jpg" /></td></tr>
<tr><td id="info0"></td><td id="info1"></td>
<td id="info2"></td></tr></table>
</body>
</html>
Sie haben hier eine Webseite mit mehreren Bildern in einer Tabelle, bei denen Eventhand-
ler in der externen JavaScript-Datei registriert werden. Mit den aufgerufenen Funktionen
sollte beim Überstreichen eines Bilds mit der Maus in der Zelle darunter eine Zusatzinfor-
mation angezeigt werden. Wenn der Mauszeiger den Bereich wieder verlässt, wird der
Anzeigebereich gelöscht. Hier sehen Sie die JavaScript-Datei
(kap10_2.js):
Listing 10.7■
Die JavaScript-Datei zum Steuern der AJAX-Anfrage
var resOb = erzXHRObjekt();
function sndReq(i) {
switch(i) {
case 0: resOb.open('get', 'serverantworten/info0.txt', true); break;
case 1: resOb.open('get', 'serverantworten/info1.txt', true); break;
case 2: resOb.open('get', 'serverantworten/info2.txt', true); break;
}
resOb.onreadystatechange = function() {
handleResponse(i);
}
resOb.send(null);
}
function handleResponse(i) {
if (resOb.readyState == 4) {
document.getElementById("info" + i).innerHTML = resOb.responseText;
}
}
function out() {
for ( i = 0; i < 3; i++) {
document.getElementById("info" + i).innerHTML = "";
}
}
function init() {
with (document) {
getElementsByTagName("img")[0].onmouseover = function() {
sndReq(0);
}
getElementsByTagName("img")[1].onmouseover = function() {
sndReq(1);
}
getElementsByTagName("img")[2].onmouseover = function() {
sndReq(2);
}
Search WWH ::
Custom Search