私がやろうとしていることについて少し：
window.onload で、このページは AJAX で別の php ページを呼び出し、base64 でエンコードされた画像を応答として取得します。これはうまくいきます。画像が AJAX 経由で返されると、'img1' の src として設定されます。また、仕事も順調です。画像にも maphilight があるため、同じ AJAX 呼び出しでプルおよび設定される座標を持つエリア マップがあります。maphilight が Internet Explorer で作業を開始しないのはここからです。他のすべてのブラウザーでテストしたところ、ハイライトは正常に機能します。私の質問は、ハイライトを Internet Explorer で動作させるにはどうすればよいかということです。ここで何日も検索し、いくつかの興味深いことを試しました。最初にロードイベントを呼び出し、ページのロード後に.jsファイルをヘッドに追加し、画像のロードを確認してからjqueryプラグインを実行して、すべて役立たず。
wrap = $('<div></div>').css({
display:'block',
background: 'url("' + this.src + '")',
position:'relative',
padding:0,
width:this.width,
height:this.height
});
window.onload 関数が呼び出され、base64 イメージを取得するために AJAX 呼び出しが行われるまで、img.src は空白です。呼び出される関数と、それがページにどのように表示されるかを次に示します。
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.maphilight.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.maphilight.defaults = {
fill: true,
fillColor: 'ffffff',
fillOpacity: 0.5,
stroke: true,
strokeColor: '0055bb',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
$('img[usemap]').maphilight();
});
window.onload = function(){
ajaxFunction();
}
var ttxx = new Array();
function ajaxFunction(){
var ajaxRequest; // Start Ajax Request
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Something went wrong
alert('Your browser broke!');
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var resp = ajaxRequest.responseText;
var spl = resp.split('SECIMG'); // response received divide it up to get all vars
thei = spl[0]; // get img src1 (img to be hilighted)
var rest = spl[1]; // get rest of request
var im = document.getElementById('img1');// set var for img name
im.src = thei; // set img1 src as base64 code recived
var spl3 = rest.split('eb');
var tx = spl3[0]; // get txt values
var coor = spl3[1]; // get coordinates
var ttx = tx.split(':');
for (u = 0; u< 8; u++){
var ne = u + 1;
ttxx[ne] = ttx[u];
}
var mid = '100,100'; // set coordinates
var indiv = coor.split('ec');
for (i = 0; i< 8; i++){
var coord = indiv[i];
var fullcoor = coord + ',' + mid;
var upone = i + 1;
var are = document.getElementById('ar' + upone);
are.coords = fullcoor; //coordinates set
}
}
}
ajaxRequest.open('GET', 'testajaximg.php', true);
ajaxRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
ajaxRequest.setRequestHeader('Authorization', 'GetCap');
ajaxRequest.send(null);
} // obviously set AJAX request
</script></head>
スペースと時間の制約のために含めない関数が他にもありますが、それらはすべて正常に機能します。(つまり、マップ エリアをクリックすると、アラートが送信されます)
画像が表示されるページの本文部分の HTML コードを次に示します (php で)。
<img id="img1" border="0" usemap="#cap"><br><br> /*img put here */
<map name="cap">";
$huy = 1;
$enlop = 8;
while ($huy <= $enlop){
echo"<area shape="polygon" id="ar".$huy."\" coords="" onclick=javascript:alert('Hello'".$huy."');">";
$huy++;
}
echo"</map>";
画像が表示されているため、画像が設定されていることがわかります。また、画像をクリックした場所に応じてアラートがスローされるため、座標と領域が設定されていることがわかります。画像の読み込みが早すぎて JavaScript で読み込まれないのでしょうか、それとも JavaScript が元の画像 src を読み込んで新しい画像に移動しないのでしょうか? どんな助けでも本当に感謝します。私のウェブサイトでコードのライブバージョンを見ることができます：
http://www.securacap.com/testajax2.php
この状況に光を当てることができる光をありがとう。すでにプラグインとスクリプトが多すぎるという理由だけで、imagesLoaded のようなプラグインを使用したくありません。できるだけシンプルに保つようにしています。