Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » как вывести текстовое окно поверх всех картинок

как вывести текстовое окно поверх всех картинок


     21.10.2012    Стили (CSS), jQuery    5277

вопрос
Подскажите пожалуйста есть коммерческий сайт хотел бы прописать на картинках полезную информацию типа телефон адрес и т.д. Как такое реализовать на всех картинках во всех новостях dle??? с помощью css

Пример:
Главная страница Яндекс картинок где на каждой картинке есть окно с описанием так такое создать на dle
http://images.yandex.ru/

Большое спасибо за ответы...

Ответил: ПафНутиЙ


С помощью CSS не получится, но вот с jquery можно:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Картинка с описанием из ALT</title>
    <style>
    body {
        padding: 100px;
        }
        img {
            display: block;
            }
        .img_wrap {
            position: relative;
            display: inline-block;
            }
            .img_wrap > span {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 5px;
                background: rgba(0, 0, 0, 0.6);
                font: normal 12px/14px Tahoma, sans-serif;
                color: #fff;
                z-index: 2;
                }
    </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script>
        jQuery(function($) {
            $("img").each(function (i) {
                alt = $("img").eq(i).attr("alt");                
                $("img").eq(i).wrap('<span class="img_wrap"></span>').after('<span>'+alt+'</span>');
            })
        });
    </script>
</head>
<body>
    <span alt="Альтернативный текст11"  >1111</span>
    <img src="http://lorempixel.com/sport/200/200" alt="Альтернативный текст" />
    <img src="http://lorempixel.com/200/200" alt="Альтернативный текст 1" />
    <img src="http://lorempixel.com/sity/200/200" alt="Альтернативный текст 3" />
</body>
</html>

2 комментария

wcw2007
Юзер

wcw2007 - 22 октября 2012 10:17 -

Спасибо а как сделать статический текст на всех картинках т.к. на сайте более 700 новостей с картинками.

wcw2007
Юзер

wcw2007 - 22 октября 2012 10:35 -

Уважаемый ПАФНУТИЙ

Проблема в том, что альт применяется ко всем картинкам т.е. и к шаблону естественно шаблон при этом разьезжается. Я перенес все скрипты в fullstory но все равно шаблон расплывается. А как сделать чтоб выводилось только к картинкам в полной новости???? Спасибо за ответ

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх