За последние 5 лет не написал ни строчки кода и вот что из этого вышло
 

На одном форуме придумали игру, суть такова.
Даётся картинка на которой фото известного человека, разделённая на 12х12 ячеек. Человек пишет номер ячейки (например, G5) и если номер его сообщения кончается на 0, автор открывает ячейку. Кто первый сможет распознать что это за известный человек, тот и выиграл.

Вручную править всё в пэинте неудобно, поэтому я решил расчехлить покрывшиеся пылью навыки и написать скрипт. Вот собственно и он: http://tiles.ucoz.net/main.html

Щёлкаешь по ячейкам - они открываются.

Проблема - в IE не работает, в Opera/Chrome - при первом запуске всё куда-то съезжает, но если нажать на кнопку ещё раз, то всё встаёт на места. Не знаю что и думать.

Только что понял, какой же я индус.
Можно же было просто картинку перекрыть дивами и удалять их по клику!
А не создавать 144 висячих дива, в каждый пихать картинку и смещать её маргинами...
Буду переписывать но всё равно интересно, почему так

Diphenyl Oxalate,
картинку надо сначала загрузить и только потом запустить весь остальной код создания. нет картинки - нет размеров, или самому их назначить изначально.

Я так и делаю
Написал по-другому:
http://tiles.ucoz.net/new.html

Вот так оно выглядит по крайней мере у меня: http://i.imgur.com/pX7B8zN.jpg

Но ведёт скрипт себя всё равно странно. Если запросить другую картинку, то вместо неё появляется пустое место, при повторном нажатии на кнопку всё становится нормально.

В целом как работает скрипт:
1) вычисляем размеры картинки
2) уменьшаем её так чтобы умещалась на экране
3) дивы, которые закрывают картинку, уже созданы заранее
4) задаём этим дивам размеры и позицию в зав-ти от размера картинки
5) при клике на див делаем его невидимым, часть картинки под ним проявляется
6) при выборе новой картинки проходимся по всем дивам и делаем их вновь visible

Diphenyl Oxalate,
тоже самое
структура условно

function GO(){
var img = document.createElement('img');
img.onload = function() {
// здесь весь остальной код
}
var imgS = document.getElementById("imgsrc").value;
img.src = imgS;
}

Diphenyl Oxalate,

function GO(){
//создание строки "загрузка"
var img = document.createElement('img');
img.onload = function() {
//удаление строки "загрузка"
// здесь весь остальной код
}
var imgS = document.getElementById("imgsrc").value;
img.src = imgS;
}

Спасибо, оказалось дело было в рассинхроне

Осталось только понять, почему не работает в IE.

у меня работает, какая версия у вас?

IE8
Выглядит эта красота вот так: http://i.imgur.com/Q1CeYWC.jpg

Страничка со скриптом теперь здесь http://tiles.ucoz.org/Ch.html
Добавил onload, вроде нормально работает в опере/хроме.

не могу проверить IE8, в 11 нормально, только src ставят после onload, смотрите код выше.