Като минеш с мишката в/у картинка над нея да се покаже текст
- Автор Illusion
- Начална дата
Предпочитам да бъде с JavaScript, защото информацията и картинките ще са различни всеки път. Аз успях да намеря скрипта, но не е това, което всъщност ми трябва. Този JavaScript, който намерих работи добре, но като мина с мишката в/у картинката и след това отида на лентичката пак все едно съм върху линк. Искам като се мине с мишката вече в/у лентата с информацията да се маха линка, защото вдясно на линията ще сложа една иконка, която да води към друга съвсем различна страница.
Ето ти един базов вариянт:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Добре дошли!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#box{
list-style-type:none;
padding:0;
margin:0;
}
#box li{
position:relative;
margin:0 4px 0 0;
padding:0;
float:left;
width:100px;
height:100px;
border: solid 1px red;
}
#box a.image{
display:block;
width:100px;
height:100px;
background: no-repeat center center;
}
#box li div{
position:absolute; bottom:0px; left:0px; z-index:5;
width:100px;
height:25px;
background:#c5c5c5;
text-align:center;
color:#fff;
display:none;
}
#box li:hover div{
display:block;
}
</style>
</head>
<body>
<ul id="box">
<li><a class="image" style="background-image:url(http://www.erabg.com/pub/images/items/ncdc3dfef314864ef7c2d0a8b57fabd81.jpg);" href="#"></a><div>текст с <a href="#">линк</a></div></li>
<li><a class="image" style="background-image:url(http://www.erabg.com/pub/images/items/ncdc3dfef314864ef7c2d0a8b57fabd81.jpg);" href="#"></a><div>текст с <a href="#">линк</a></div></li>
<li><a class="image" style="background-image:url(http://www.erabg.com/pub/images/items/ncdc3dfef314864ef7c2d0a8b57fabd81.jpg);" href="#"></a><div>текст с <a href="#">линк</a></div></li>
</ul>
</body>
</html>Много ти благодаря! Направих си го така, както го исках, но сега проблема е такъв, че не мога да направя така, че на 1 ред да бъдат 3 различни картинки и под тях още 3 и т.н.. Ето кода:
Код:
<ul class="box">
<li>
<a class="image" style="background: url(image.png) no-repeat center center;" href="#"></a>
<div class="line">
<div class="name_left">text</div>
<div class="name_right"><a href="window.html"><img src="info.png" alt=""></a></div>
</div>
</li>
</ul>
Код:
<ul class="box">
<li>
<a class="image" style="background: url(image.png) no-repeat center center;" href="#"></a>
<div class="line">
<div class="name_left">text</div>
<div class="name_right"><a href="window.html"><img src="info.png" alt=""></a></div>
</div>
</li>
<li>
<a class="image" style="background: url(image.png) no-repeat center center;" href="#"></a>
<div class="line">
<div class="name_left">text</div>
<div class="name_right"><a href="window.html"><img src="info.png" alt=""></a></div>
</div>
</li>
<li>
<a class="image" style="background: url(image.png) no-repeat center center;" href="#"></a>
<div class="line">
<div class="name_left">text</div>
<div class="name_right"><a href="window.html"><img src="info.png" alt=""></a></div>
</div>
</li>
</ul>Един под друг са. Отделно как да ги направя на един ред да седят, след като ги изваждам от ДБ-то, тъй като може би знаеш, че за да извадя всички картинки от ДБ-то трябва да ползвам while, в който мога да сложа само веднъж един li таг и вече според броя резултати този li таг да се повтаря.