My app is supposed to draw a grid over an image and provide you with the coordinates of that grid. This however does not seem to work in I.E., Safari, and Firefox when the image is hosted on my local machine. When I host the photo on Picasa the images show up fine. This is working in Chrome. The images will eventually be hosted on my server but I am working with it locally first. I am really new to this. Any help would be greatly appreciated. Thank you
Here is the HTML and javascript I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<meta charset=utf-8 />
<title>Grid test</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<link rel="stylesheet" type="text/css" href="css\grid_style.css">
<img src="c:\EA_A02_N_1-4_5mM_Xgal_7d_B.cropped.resized.grey.png" id="img"/>
<script>
function SetGrid(el) {
var size = el.getSize();
var coord = el.getCoordinates();
var gridTable = new Element('table', {
'id' : 'gridTable',
'styles' : {
'position': 'absolute',
'width' : size.x,
'height' : size.y,
'top' : coord.top,
'left' : coord.left
}
});
var numcols = 48;
var numrows = 32;
var cellSize = {
width: size.x / numcols,
height: size.y / numrows
}
for (var row = 1; row<=numrows; row++){
thisRow = new Element('tr', {
'id' : row,
'class' : 'gridRow'
});
for(var col = 1; col<=numcols; col++){
thisCol = new Element('td', {
'id' : col,
'title': row + ' x ' + col,
'class' : 'gridCol0'
});
thisCol.inject(thisRow, 'bottom');
};
thisRow.inject(gridTable, 'bottom');
}
gridTable.addEvents({
// Add the click event to the gridTable
click: function(e) {
// Do something with the grid position.
alert(Math.floor((e.client.x - coord.left) / cellSize.width)
+ ', ' + Math.floor((e.client.y - coord.top)/ cellSize.height));
}
});
gridTable.inject(el.getParent());
}
window.addEvent('load', function() {
SetGrid($('img'));
}
);</script>
</body>
</html>
It’s probably a security “zone” related problem. Browsers tend to be picky about allowing javascript from external URLs run alongside code that reads things off the local disk for fear of leaking confidential information.
Does it work if you host all the javascript locally too?