Forum PHP.pl > [CSS]Napis na obrazku po najechaniu na niego

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Napis na obrazku po najechaniu na niego

czernin

17.11.2012, 17:04:19

Witam,

Mam taki kod, który na obrazku wyświetla dany napis. Jak ten kod zmodyfikować, aby napis wyświetlał się dopiero po najechaniu kursorem na obrazek?

[HTML] pobierz, plaintext 
<html>
	<head>
 
	<style type="text/css">
 
    .miniaturka {
		border: 3px solid #F0F0F0;
		margin-left: 20px;
		margin-bottom:50px;
		position: relative;
		width: 150px;
		float: left;
    }
 
    .tekst {
		background: rgba(255, 255, 255, .9);
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
    }
 
    .tekst h5 {
		font-family: Verdana, Arial, sans-serif;
		font-size: 11px;
		color: #4B4B4B;
		margin: 5px 10px;
    }
 
    </style>
 
    </head>
	<body>
 
    <div class="miniaturka">
    	<a href="#"><img src="/images/brak_miniaturki.png" alt="" /></a>
    	<div class="tekst">
    		<h5>Napis na obrazku</h5>
    	</div>
    </div>
 
	</body>
</html>
[HTML] pobierz, plaintext

kamil_lk

17.11.2012, 17:31:28

[HTML] pobierz, plaintext 
 .tekst {
background: rgba(255, 255, 255, .9);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
display: none;
}
 
.miniatura:hover .tekst{ display: block; }
[HTML] pobierz, plaintext

tomi1985

17.11.2012, 18:26:24

a nie lepiej uzyć title a poźniej ewentualnie obrobić go w javiesript ?

[HTML] pobierz, plaintext 
 <a href="#"><img title="Napis na obrazku" src="/images/brak_miniaturki.png" alt="" /></a>
[HTML] pobierz, plaintext

sądze, że tak będzie owiele łatwiej i mniej kodu będzie

przykład

[html]
<script type="text/javascript">
<!-- <![CDATA[
/*****************************************
Copyright © 2004 Tomasz Elendt- Eluś
this script is free for non-commercial use
*****************************************/
function tooltip(d,E,b,i,a){
d=document;E=d.documentElement;b=d.body;if(!E)return;
for(i=0;a=b.getElementsByTagName("a")[i];i++){
if(a.title){
with(a.t=d.createElement("div")){
id="tooltip"
innerHTML=a.title.replace(/\|/g,"<br />")
}
a.onmouseover=function(e){
with(this){title="";onmousemove(e)}
b.appendChild(this.t)
}
a.onmouseout=function(x){
with(this){title=t.innerHTML.replace(/<br \/>/g,"\|")}
if(x=d.getElementById("tooltip"))b.removeChild(x)
}
a.onmousemove=function(e){
e=e||event;with(this.t.style){
left=e.clientX+(E.scrollLeft||b.scrollLeft)+"px"
top=e.clientY+(E.scrollTop||b.scrollTop)+"px"
}
}
}
}
}
function addEvent(O,E,F,x){
return(x=O.addEventListener)?x(E,F,1)

x=O.attachEvent)?x('on'+E,F):!1
}
addEvent(window,'load',tooltip);

// ]]> -->
</script>

/css

#tooltip {
font-family: Georgia;
font-size: 12px;
color: rgb(79, 79, 79);
text-align:left;
white-space:nowrap;
padding:10px;

/* ROZMIESZCZENIE */
position:absolute;
margin-top:-10px;margin-left:50px; /* odległość w pionie od kursora myszy */
border:1px solid #999;
border-radius: 5px;
background: #f0f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
}

<a href="#" title="opis pierwszego | odsyłacza..."><img src='images/zapytaj_mini.png' alt='' /></a>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.