Ссылка поверх FLASH-объекта.

Написана 8 Марта, 2012 в 0:11. Автор: borN_free   |   Теги: html, css, flash Комментарии 1

Heading/Alt Text Сегодня я покажу Вам способ, как заставить ссылку быть над flash-объектом, чтобы при нажатии срабатывала именно она, причем вариант, работающий абсолютно кроссбраузерно.

Для этого нам понадобится: сама ссылка, элемент div, в котором будут находиться ссылка и flash-объект, и несколько CSS классов.






Структура нашего html-кода будет следующей:

Обращаю внимание на то, что ссылка не обрамляет объект, а находится рядом с ним. Самым важным параметром объекта является wmode="opaque". Без этого работать не будет. Кстати, добавьте его и в embed при наличии.

Отлично, все почти готово, осталось добавить немного стилей:

.header_logo {
    width: 135px;
    height:100px;
    position: relative;
}
.header_logo a {
    display: block; // делаем ее блочной, что бы установить высоту и ширину
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; // делаем ссылку заведомо выше чем flash объект
    background: url("../images/1px.gif"); // этот хак для IE - однопиксельная прозрачная картинка
    text-indent: -9999px;
    overflow: hidden;
}
.header_logo object {
    position: relative;
    z-index: 1;
}

Все должно работать, проверено в Opera 10+, IE 7+, FF 3.6+, Chrome 12+.

Однопиксельную картинку можете скачать здесь

One comment

+1 ответить
March 10, 2016 at 01:26 pm

В принципе нормально. Статье + и автору +

Оставьте свой комментарий:

Поля с * обязательны.