动态加载图像时，Maphilight插件jquery指针无效 - Maphilight plugin jquery invalid pointer issue with dynamically loaded image

关于我要做的事情:

在窗口。onload此页面将AJAX调用另一个php页面并获得base64编码的图像作为响应。这很好。一旦图像通过AJAX返回，它被设置为'img1'的src。而且，工作也很好。由于maphilight有一个带有坐标的区域地图，这些坐标也是通过相同的AJAX调用提取和设置的。当然，正是在这里，maphilight没有开始在ie浏览器上工作。我已经在所有其他浏览器上测试了它，高亮显示效果很好。我的问题是如何让亮点在ie浏览器上工作。我在这里搜索了几天，到处都是，我尝试了一些有趣的事情:尝试先调用加载事件，在页面加载后附加.js文件，检查图像加载，然后运行jquery插件，都无济于事。当代码工作最好时，我在maphilight插件行中得到一个无效的指针错误，其中包含以下内容:

wrap = $('<div></div>').css({
display:'block',
background: 'url("' + this.src + '")',
position:'relative',
padding:0,
width:this.width,
height:this.height
});

img。SRC是空白的，直到窗口。调用onload函数并进行AJAX调用以检索base64图像。下面是被调用的函数以及它如何显示在页面上:

<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只是因为我有太多的插件和脚本已经!尽量保持简单。

所以对于任何搜索和寻找如何适应Maphilight Jquery插件在Internet Explorer下动态显示图像的人，我已经解决了这个问题，希望这也能帮助其他人。

因此，经过彻底的试验和错误，我发现插件将原始图像的不透明度设置为0，从而使其不可见。当原始图像位置"this"时，Javascript也抛出了一个错误。src"可以被IE浏览器(尤其是IE6)看到。最初的插件内置了一个名为(has_VML)的函数，用于在使用VML (IE6使用)的情况下渲染图像。所以这里是我之前和之后所做的(不需要更改我的原始PHP页面或AJAX调用)。

maphilight:

第248行:

  // The below "this.src" under background throws an error at internet explorer when using a dynamic  image that has no original src
 wrap = $('<div></div>').css({
 display:'block',
 background: 'url("'+this.src+'")',
 position:'relative',
 padding:0,
 width:this.width,
 height:this.height
 });

后:248行:

  // Using the plugins function to check for VML, I set with a blank background for IE
     if (has_VML){
     wrap = $('<div></div>').css({
     display:'block',
     background: '',
     position:'relative',
     padding:0,
     width:this.width,
     height:this.height
     });
// This one is for Firefox, Chrome, Safari, etc. Image is set as background normally.
     } else {
     wrap = $('<div></div>').css({
     display:'block',
     background: 'url("'+this.src+'")',
     position:'relative',
     padding:0,
     width:this.width,
     height:this.height
     });
     }

这解决了指针错误的问题，但它仍然不显示原来在那里的图像，因为它的不透明度被插件设置为0，所以你必须改变下面一行的不透明度，以不同的方式呈现VML图像:

第273行::

img.before(wrap).css('opacity', 0).css(canvas_style).remove(); //opacity for non VML
if(has_VML) { img.css('filter', 'Alpha(opacity=0)'); } //opacity for VML
wrap.append(img);

:后

  img.before(wrap).css('opacity', 0).css(canvas_style).remove(); //keep the same
        if(has_VML) { img.css('filter', 'Alpha(opacity=90)'); } //change to 90
        wrap.append(img);

通过改变原始图像的不透明度为90%，你可以看到原来隐藏的图像现在是可见的。注意:你不能将不透明度更改为100%，因为创建高光的div包装将不可见，95%是你可能在高光变得比背景更不亮之前可以设置的最高不透明度。如果你喜欢低于90%的不透明度，你的图像看起来仍然很好，它给了你更多的自由使用不同的高亮选项。

现在图像显示了，所以现在唯一要做的就是将bottom fn.defaults函数替换为IF语句，以特定的方式呈现IE的高亮，而对其他浏览器则不同。您将无法更改默认VML版本的大多数设置，否则将无法看到高亮显示。不过还是有亮点的效果。

if (has_VML){ // render for VML // Note the settings are for 90% opacity set above:
    $.fn.maphilight.defaults = {
        fill: true,
    fillColor: '000000', // Color must be black or close or it won't be dark enough
    fillOpacity: 1, // full opacity
    stroke: true,
    strokeColor: '0055bb', //stroke color
    strokeOpacity: 1, //full opacity
    strokeWidth: 3, //thicker stroke to see border of hilight
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: false,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 6,
    shadowColor: '888888',
    shadowOpacity: 0.8, //you can change this if you want
    shadowPosition: 'outside',
    shadowFrom: false
    };
    } else {// For all other browsers more options and more colors
        $.fn.maphilight.defaults = {
        fill: true,
    fillColor: 'ffffff',
    fillOpacity: .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: '888888',
    shadowOpacity: 0.8,
    shadowPosition: 'outside',
    shadowFrom: false
    };
    }

就是这样。不要让插件重新拉出img。src，因为这会导致IE6错误。因此，将原始图像的不透明度设置为90%或更高，并使用内置的has_VML函数根据检测到的浏览器创建选项。我希望这对将来使用这个动态图像插件的人有所帮助。