Question

关于我想做的事情：

在window.onload这个页面将AJAX调用另一个php页面并获得base64编码的图像作为响应。这很好用。一旦通过AJAX返回图像，它就被设置为'img1'的src。还有，工作很好。由于maphilight，图像还有一个区域地图，其坐标也被拉动并设置相同的AJAX调用。正是在这里，maphilight并没有开始工作，当然，互联网浏览器。我已经在所有其他浏览器上进行了测试，并且突出显示正常。我的问题是如何让亮点在Internet Explorer上运行。我已经在这里搜索了几天，我已经尝试了一些有趣的事情：尝试首先调用load事件，在页面加载后附加.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是空白的，直到调用window.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这样的插件，因为我已经有太多的插件和脚本了！尽量保持简单。

Answer 1

所以对于任何搜索和查看如何使用Maphilight Jquery插件来处理Internet Explorer下的动态显示图像的人来说，我已经解决了这个问题，希望这也可以帮助其他人。

因此，经过彻底的试验和错误后，我发现该插件将原始图像的不透明度设置为0，从而使其不可见。当原始图像位置＆＃34; this.src＆＃34;时，Javascript也向我抛出了一个错误。 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％，因为创建hilight的div包装器将不可见95％是在hilight变得不如背景亮度之前可能达到的最高值。如果你对低于90％的不透明度感到满意并且你的图像看起来仍然很好，它可以让你更自由地在下面使用不同的hilight选项。

所以现在显示图像所以现在唯一要做的就是将底部的fn.defaults函数替换为IF语句，以使hilight成为IE的特定方式，而其他方式则不同。您将无法更改默认值的VML版本的大多数设置，否则将无法看到hilight。尽管如此，仍然会产生影响。

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出错。因此，将orignal图像的不透明度设置为90％或更高，并使用内置的has_VML函数根据检测到的浏览器创建选项。我希望这可以帮助将来使用动态图像的这个伟大插件的人。

Maphilight插件jquery无效指针问题与动态加载图像

1 个答案: