2012-04-01 24 views
0

Ich habe eine Karte, die Sie auf Standorte klicken können Informationen für diesen Bereich zu bekommen, und ich würde diese Informationen in einem Iframe auf der gleichen Seite, wennauf Klick zeigt Iframe

geklickt zeigen, wie

Meine Seite hat dies für die Link jetzt

`<AREA SHAPE="CIRCLE" COORDS="555,142,6" HREF="http://www.Page.com" TITLE="" />` 

Irgendwelche Vorschläge

Antwort

2

Die Schönheit von AJAX ist, dass Sie nicht wirklich brauchen eine IFRAME dies zu tun.

Sie haben einen Server, der Ihnen Informationen über einen bestimmten Bereich zurückgibt. Jedes der AREA-Tags benötigt einfach ein onclick-Attribut, das eine JavaScript-Funktion aufruft, um diese Informationen abzurufen und sie an einem Speicherort anzuzeigen, den Sie auf Ihrer Seite festgelegt haben.

Hier ein Beispiel HTML-Seite, und hier ist die info.php, die die Informationen an die HTML-Seite gibt Informationen vom Server unter Verwendung von AJAX

<html> 
<head> 
<script type="text/javascript"> 
function getAreaInfo(id) 
{ 
    var infoBox = document.getElementById("infoBox"); 
    if (infoBox == null) return true; 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState != 4) return; 
    if (xhr.status != 200) alert(xhr.status); 
    infoBox.innerHTML = xhr.responseText; 
    }; 
    xhr.open("GET", "info.php?id=" + id, true); 
    xhr.send(null); 
    return false; 
} 
</script> 
<style type="text/css"> 
#infoBox { 
    border:1px solid #777; 
    height: 400px; 
    width: 400px; 
} 
</style> 
</head> 
<body onload=""> 
<p>AJAX Test</p> 
<p>Click a link... 
<a href="info.php?id=1" onclick="return getAreaInfo(1);">Area One</a> 
<a href="info.php?id=2" onclick="return getAreaInfo(2);">Area Two</a> 
<a href="info.php?id=3" onclick="return getAreaInfo(3);">Area Three</a> 
</p> 
<p>Here is where the information will go.</p> 
<div id="infoBox">&nbsp;</div> 
</body> 
</html> 

abruft:

<?php 
$id = $_GET["id"]; 
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON."; 
?> 

Hoffe das hilft!

Verwandte Themen