вопрос
Подскажите пожалуйста есть коммерческий сайт хотел бы прописать на картинках полезную информацию типа телефон адрес и т.д. Как такое реализовать на всех картинках во всех новостях dle??? с помощью css
Пример:
Главная страница Яндекс картинок где на каждой картинке есть окно с описанием так такое создать на dle
http://images.yandex.ru/
Большое спасибо за ответы...
Пример:
Главная страница Яндекс картинок где на каждой картинке есть окно с описанием так такое создать на 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>
