Хотя во времена IE4 и NS4 IE всегда был прощающим браузером, который поглощал все наши маленькие развивающиеся ошибки, кажется, что по крайней мере для этой функциональности IMG, MAP и AREA таблицы превращаются.
Динамически создавая и добавляя изображение с картой с областью с помощью createElement и appendChild, FireFox работает впервые, а IE - нет (теперь конец Win7 IE9!).
После всех проверок, настройки и настройки IE все равно не будет работать. Единственное решение, которое я смог найти для FF и IE, - это добавить в innerHTML то, что вы обычно печатаете в теле.
Я думал отлично! по крайней мере, решение, которое работает для обоих, но минуту спустя я не смог этого вынести, потому что я нахожусь на этом - по книге createElement и appendChild route - с помощью мне нравится последовательно создавать документы.
Я начал с кода createElement и appendChild для FF рядом с кодом innerHTML для IE. Затем я переместил тег IMG из innerHTML в маршруты createElement и appendChild. Это больше не работает для IE и начал пытаться и пытаться. Затем я проделал то же самое для других тегов и после попытки весь день, и в конце концов я обнаружил полный, но узкий путь для IE.
Для создания изображения:
//USE THIS:
img = new Image(width, height);
//DOES NOT WORK:
img = document.createElement('IMG');
img.width = width;
img.height = height;
//DOES NOT WORK:
img = new Image();
img.width = width;
img.height = height;
далее назначайте реквизиты, как .src как обычно.
Использовать свойства case-case в скрипте
//USE THIS:
img.useMap = '#myMap';
//DOES NOT WORK:
img.usemap = '#myMap';
HTML реквизиты чувствительны к регистру, но в скрипте они чувствительны к регистру.
И это недокументированное, очень забавное (не!) Для MS просто тупая ошибка / причудливость, которая все еще присутствует в IE9 после встроенного тега MAP начиная с IE4. Во всяком случае ...
//USE THIS:
map = document.createElement('MAP');
map.id = "myMap";
map.name = "myMap";
//DOES NOT WORK:
map = document.createElement('MAP');
map.name = "myMap";
В HTML IE использует свойство .name, но в скрипте IE использует свойство .id.
В случае, если вы используете разветвление кода FF и IE, я все равно сохраню .name prop в коде IE на случай, если MS исправит это.
Наконец, вот рабочий кусок кода для IE и FF, использующий маршрут createElement и appendChild, да!:
document.write('<INPUT type="button" value="Dynamic Image Map" onclick="dynamicImageMap(32, 64)">');
function dynamicImageMap(ox, oy)
{
var a, b, map, img, div, s;
a = document.createElement('AREA');
a.shape = 'rect';
a.coords = '128,0,250,128';
a.noHref = true;
b = document.createElement('AREA');
b.shape = 'rect';
b.coords = '0,128,128,250';
b.noHref = true;
map = document.createElement('MAP');
map.id = "myMap";
map.name = "myMap";
map.onclick = function(){ alert('myMap'); }
map.appendChild(a);
map.appendChild(b);
img = new Image(250, 250);
img.src = 'http://www.vectortemplates.com/raster/batman-logo-big.gif';
img.border = 0;
img.useMap = '#myMap';
div = document.createElement('DIV');
s = div.style;
s.position = 'absolute';
s.left = ox +'px';
s.top = oy +'px';
s.width = '250px';
s.height = '250px';
s.overflow = 'hidden';
s.visibility = 'inherit';
div.appendChild(map);
div.appendChild(img);
document.body.appendChild(div);
}
Области карты изображения делают нижнюю левую и верхнюю правую четверти изображения горячими для щелчка.
Замените изображение src существующим src изображения, если оно больше не существует / работает.
Удачи и Фан!