Как лучше сверстать страницу с картинкой окна?

-1- Пример реализации с использованием js: jsFiddle

HTML

<div class="building"></div>

CSS

.building {
    background-color: grey;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 125px;
    left: 125px;
}

.window {
    width: 101px;
    height: 120px;
    background-image: url(http://its116.ru/upload/i.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    z-index: 1;
}

JS

function first_building_windows() {
    return [
        {coords: [50, 25], href: 'http://ya.ru'},
        {coords: [250, 25], href: 'http://google.ru'},
        {coords: [50, 250], href: 'http://mail.ru'},
        {coords: [250, 250], href: 'http://yahoo.ru'}
    ];
}

// remove it if not needed
function append_window_to_body(window_element) {
    var window_container = document.body;
    window_container.appendChild(window_element);
}

// remove it if not needed
function append_window(window_element) {
    var window_container = document.getElementById('window-container');
    if (!window_container) {
        window_container = document.createElement('div');
        window_container.id = "window-container";
        document.body.appendChild(window_container);
    }
    window_container.appendChild(window_element);
}

function create_window(window_info) {
    // creates window element
    var window_element = document.createElement('a');
    window_element.className = 'window';

    // sets window position
    var window_position = window_info['coords'];
    window_element.style.left = window_position[0] + "px";
    window_element.style.top = window_position[1] + "px";

    // sets window link
    window_element.href = window_info['href'];
    return window_element;
}

function draw_window(window_info) {
    var window_element = create_window(window_info);
    append_window(window_element); // creates a window container
    //append_window_to_body(window_element); // do not create any containers
}

function building_windows(window_list) {

    window_list.forEach(function(current_window) { draw_window(current_window); })
}

jQuery(document).ready(function() {
    building_windows(first_building_windows());
});

"окна" можно добавлять прямо в body, пример этого показан в функции append_window_to_body. Либо создавать (что предпочтительнее) контейнер, который будет эти "окна" содержать (см. функцию append_window).

Эти две функции (append_window_to_body и append_window) добавлены для примера. Можно выбрать одну из них и удалить другую.

Возможная проблема - я не проверяю, существует ли уже текущее окно или нет. Поэтому, при вызове функции добавления окон несколько раз, окна будут дублироваться.

Я исходил из того, что рисоваться окна будут только один раз - в момент загрузки страницы. Если же необходимо будет несколько раз вызывать отрисовку всех окон без перезагрузки страницы, тогда надо будет предусмотреть очистку отрисованных ранее окон (как вариант - $('a.window').remove()).

-2- У вас проблема была с тем, что вы пытались отобразить окна еще до создания страницы (точнее - до ее полной загрузки, когда не все элементы страницы существовали). Чтобы это исправить, достаточно просто отображать окна после загрузки страницы (у вас даже пример уже есть на странице - jQuery(document).ready()). На всякий случай я обернул запуск отрисовки окон в jQuery, поэтому если вы просто скопируете код - ничего не должно будет сломаться.

Еще одна проблема - не подгрузились стили для "окон" (хотя может быть вы их просто еще не добавили)

-3- Я бы посоветовал вам поизучать JS, хотя бы немного. Добавление той же ссылки для каждого окна - задача не сложная. Понимание причин вашей ошибки вообще является самой основой. Аналогично, многие косметические операции будут быстрее выполняться, если вы будете иметь некоторое представление о языке.