css ile tooltip yardım

27-05-2010, 11:49:25

Arkadaşlar Fatih Hayrioğlu'nun bir css toltipi gözüme çarptı çok başarılı ve güzel bir uygulama olmuş.
Fakat ben bunu text link değilde bir (linksiz) resmin üzerine gelince açılmasını istiyorum kodu aşağıya pasteledim yardımcı olabilecek arkadaşlara şimdiden teşekkürler.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style>
a.aracIpucu{
	position: relative;	
}

a.aracIpucu span {
	display: none;
}

a.aracIpucu:hover span {
	display:block;
	position:absolute;
	top:18px;
	left:20px;
	width:200px;
	padding:2px 6px;
	border:1px solid #963;
	background-color:#FF6;
	color:#000;
} 

a.aracIpucu:hover {
	text-decoration:none;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}
 
</style>
</head>

<body>
<p><a href="http://www.fatihhayrioglu.com/" class="aracIpucu">Fatih Hayrioğlu'nun<span> (Fatih Hayrioğlu'nun Not Defteri) </span> </a> web sitesine bir göz atın.</p> 

</body>
</html>

27-05-2010, 12:08:51

#2

AycanB

Kimlik doğrulama veya yönetimden onay bekliyor.

ie6 da li:hover çalışmaz o yüzden a' ya hover vermek en sağlamdıır ama dediğiniz şu sizin.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style>
.aracIpucu{
	position: relative;	
}

.aracIpucu span {
	display: none;
}

.aracIpucu:hover span {
	display:block;
	position:absolute;
	top:18px;
	left:20px;
	width:200px;
	padding:2px 6px;
	border:1px solid #963;
	background-color:#FF6;
	color:#000;
} 

.aracIpucu:hover {
	text-decoration:none;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}
 
</style>
</head>

<body>
<p><div class="aracIpucu">Fatih Hayrioğlu'nun<span> (Fatih Hayrioğlu'nun Not Defteri) </span> </div> web sitesine bir göz atın.</p> 

</body>
</html>

bu kodları olduğu gibi yapıştırın. sonra css kodlarını temizleyerek istediğiniz şekli verebilirsiniz div'e.

27-05-2010, 12:19:56

#3

plaketkupa

İlgi ve yardımın için teşekkürler benim yapmak istediğim link yerine linksiz resimin üzerine gelince divin açılması. resim kodunu sanırım tam oturtamadım.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style>
.aracIpucu{
	position: relative;	
}

.aracIpucu span {
	display: none;
}

.aracIpucu:hover span {
	display:block;
	position:absolute;
	top:18px;
	left:20px;
	width:200px;
	padding:2px 6px;
	border:1px solid #963;
	background-color:#FF6;
	color:#000;
} 

.aracIpucu:hover {
	text-decoration:none;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}
 
</style>
</head>

<body>
<p><img border="0" src="https://www.r10.net/images/misc/vbulletin3_logo_white.gif" width="227" height="113"> <div class="aracIpucu"> <span> (Fatih Hayrioğlu'nun Not Defteri) </span> </div> web sitesine bir göz atın.</p> 

</body>
</html>

27-05-2010, 14:00:03

#4

AycanB

istediğiniz şekilde uyarladım
siz ayarları düzeltirsiniz

.aracIpucu:hover span {
..
top:18px;
left:20px;
....
}
buradaki top left değerlier ile tooltip'i istediğiniz yere getirebilirsiniz. Kolay gelsin.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style>
.aracIpucu{
	position: relative;
}

.aracIpucu span {
	display: none;
}

.aracIpucu:hover span {
	display:block;
	position:absolute;
	top:18px;
	left:20px;
	width:200px;
	padding:2px 6px;
	border:1px solid #963;
	background-color:#FF6;
	color:#000;
}

.aracIpucu:hover {
	text-decoration:none;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}

</style>
</head>

<body>
    <p><div class="aracIpucu"><img src="https://www.r10.net/images/misc/vbulletin3_logo_white.gif" class=""><span> (Fatih Hayrioğlu'nun Not Defteri) </span> </div> </p>

</body>
</html>

buyrun direk resim kodunu değiştirin olur.

27-05-2010, 15:02:36

#5

plaketkupa

Dışarıdaydım yeni geldim tekrar teşekürler ilgin ve yardımın için;
Bu sefer oldu çok işime yarayacak.

27-05-2010, 16:42:37

#6

plaketkupa

AycanB adlı üyeden alıntı: mesajı görüntüle

ie6 da li:hover çalışmaz o yüzden a' ya hover vermek en sağlamdıır.

Evet Firefox da açılıyor div fakat ie de açılmadı. a' ya hover vermeye çalıştım beceremedim yardımcı olursan sevinirim.

27-05-2010, 18:41:22

#7

AycanB

plaketkupa adlı üyeden alıntı: mesajı görüntüle

Evet Firefox da açılıyor div fakat ie de açılmadı. a' ya hover vermeye çalıştım beceremedim yardımcı olursan sevinirim.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<style>
a.aracIpucu{
	position: relative;
}

a.aracIpucu span {
	display: none;
}

a.aracIpucu:hover span {
	display:block;
	position:absolute;
	top:18px;
	left:20px;
	width:200px;
	padding:2px 6px;
	border:1px solid #963;
	background-color:#FF6;
	color:#000;
}

a.aracIpucu:hover {
	text-decoration:none;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}

</style>
</head>

<body>
    <p><a href="#" class="aracIpucu"><img style="border:0;" src="https://www.r10.net/images/misc/vbulletin3_logo_white.gif" class=""><span> (Fatih Hayrioğlu'nun Not Defteri) </span> </a></p>

</body>
</html>