A bit about what I am trying to do:
At window.onload this page will AJAX call another php page and get a base64 encoded image as a response. This works fine. Once the image is returned via AJAX it is set as the src of 'img1'. Also, work's fine. The image also, because of maphilight has an area map with coordinates that are also pulled and set with same AJAX call. It is here that the maphilight doesn't begin working on, of course, internet explorer. I've tested it on all other browsers and highlights work fine. My question is how do I get the highlights to work on Internet Explorer. I have searched for days on here and all over and I've tried some interesting things: trying to call the load event first, appending the .js file to head after page load, check for image load then run the jquery plugin, all to no avail. When the code is working the best I am getting an invalid pointer error at the line of maphilight plugin that contains the following:
wrap = $('<div></div>').css({
display:'block',
background: 'url("' + this.src + '")',
position:'relative',
padding:0,
width:this.width,
height:this.height
});
The img.src is blank until the window.onload function is called and the AJAX call is made to retrieve the base64 image. Here is the function that is called and how it displays to the page:
<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>
There are other functions that I won't include due to space and time constraints but those all work fine. (ie. click map area and an alert is sent)
Here is the HTML code for the body part of the page where the image is displayed (in 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>";
I know the image is set because it's displayed, and I know the coordinates and areas are set because the alerts are thrown depending on where you click the image. Is the image loading too soon to be loaded by the javascript or is the javascript loading the original image src and not going to the new one? Any help will really be appreciated. You can see a live version of the code here at my website:
http://www.securacap.com/testajax2.php
Thanks again for any light that can be shed on this situation. I would prefer not to use a plugin like imagesLoaded just because I have too many plugins and scripts already! Trying to keep it as simple as possible.
