Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) как вывести текстовое окно поверх всех картинок

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


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

вопрос
Подскажите пожалуйста есть коммерческий сайт хотел бы прописать на картинках полезную информацию типа телефон адрес и т.д. Как такое реализовать на всех картинках во всех новостях 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
8

86 | 42

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

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

wcw2007
8

86 | 42

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

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

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

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

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