mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

**dialog** · 19.11.2008 11:45

Arkadaşlar bi ara bulmuştum ama kaybetmişim. Aşağıda örnek olarak vereceğim ama yine de anlatayım. Solda text linkler var. Bunların üzerine geldiğimde(onmouseover) ayrı bir bölümde <div> içerisinde geniş açıklama gözüksün istiyorum. Benzer javascriptler buldum ama link üzerine gelince gözükecek açıklama yazısını o linke ait <a> tagı içerisinde göstermiş. Ben çok daha geniş açıklama yazısı göstermek istediğim için ayrı bir <div>içerisinde yazmak istiyorum. şöyle yani

LİNK - 1 <div> Link - 1 üzerine gelince gözükecek açıklama</div>

LİNK - 2 <div> Link - 2 üzerine gelince gözükecek açıklama</div>

. Mouse linkin üzerinden çekince açıklaması da kaybolacak. Yardımcı olursanız sevinirim

**hasantayyar** · 20.11.2008 09:27

Başlıkta biraz uzun bir tanım olmuş, kısaca bir çeşit tooltip aramaktasınız.

Bunu en güzel jquery ile yaparsınız..
ilk olarak bakınız (ilk tavsiyem. çok kullanışlı) : http://www.codylindley.com/blogstuff/js/jtip/
bir bakın 1. http://www.webdesignerwall.com/demo/...ed-hover2.html
bir bakın 2. http://www.webdesignerwall.com/demo/...ed-hover1.html
bir bakın 3. http://forum.zoque.net/java-jsp/28834-jquery-tooltip/

Eğer biliyorsanız jquery bir ara bir yerde kullanmıştım (Tam radaığınız şeyi keyfinize göre yapmanız için ideal sade bir kod) . Örnek olması için deneyebilirsiniz.

Kod:

<script type="text/JavaScript">
$(document).ready(function(){

	$(".faq_item_a a").hover(function() {
		$(this).next(".cevapSatir").animate({opacity: "show"}, "medium"); //alert("over");
	}, function() {
		$(this).next(".cevapSatir").animate({opacity: "hide"}, "medium"); //alert("out");
		//alert($(this).next("div").HTML());
	});


});
// kısaca faq_item_a class a sahip şeyin içindeki a dan sonra gelen ilk cevapSatir class lı şey anime ediliyor.
</script>

bu koddan sonra şu eklenebilir

HTML Kodu:

<div class="faq_item">
 <div class="soruSatir">
  <div class="faq_item_a"><a href="JavaScript:;"><b>1</b><p>Curabitur accumsan. Nullam dapibus pretium ligula?</p></a>

   <div class="cevapSatir"> <p>Proin ac enim in diam porttitor laoreet. Praesent hendrerit. In tortor dolor, ultrices id, dictum eget, placerat nec, mi. Donec neque.</p>
	<div class="yazarSatir">
	Author: webmaster | Nov 17, 2008
	</div> 
   </div>
  </div>
 </div>
</div>


<div class="faq_item">
 <div class="soruSatir">
  <div class="faq_item_a"><a href="JavaScript:;"><b>2</b><p>Cras adipiscing hendrerit nibh?</p></a>
   <div class="cevapSatir"> <p>Ut tortor tellus, convallis vel, sagittis a, tristique et, ligula.</p>
	<div class="yazarSatir">
	Author: webmaster | Nov 17, 2008
	</div> 
   </div>

  </div>
 </div>
</div>

not: CSS eklenmeli (deüzenlenmeli)

CSS:

Kod:

.faq_item{
width:98%;
background:#e8e0e0;
margin:2px 0px 2px 0px;

}

.soruSatir{
background:#d9d9db;
border-left:#DC941F 5px solid;
border-bottom:#DC941F 1px solid;
}
.soruSatir div{ padding:5px; }

.cevapSatir{
background:#010105;
color:#E2EBEB;
padding:2px 1px 5px 1px;
position:absolute;
width:400px;
border:1px #532121 solid;
padding:10px;
/*top:100px;*/
display:none;
}
.cevapSatir div{ padding:5px;  }

.yazarSatir{
background:#e7e7e7;
padding:2px 01px 5px 1px;
font-size:9px;
color:#878798
}
.faq_item_a a, .faq_item_a a:hover{
color:#010101;
display:block;
text-decoration:none;
padding:5px;
}

**dialog** · 20.11.2008 16:25

merhaba Hasan bey..
öncelikle ilginizden dolayı teşekkür ederim.

bahsettiğiniz jquery tamamen yabancı olduğum bir konu. Bulduğum javascriptleri ufak müdahalelerle kullanabiliyorum ama JavaScript konusunda da oldukça zayıfım. Eğer copy paste yaparak ve üzerinde ufak tefek kullanıma özel değişiklikler yaparak çözebileceğim şekilde hazır kod göndererek yardımcı olabilirseniz sevinirim. Saygılarımla

**hasantayyar** · 20.11.2008 17:50

Yukarıda verdiğim bağlantılardan birisi için detay yazıyorum :

ilk olarak http://jquery.com/ a gidip jquery indirdikten sonra (mümkünse minimal versiyonunu), indirdiğimiz dosyanın adını daha makul bir isimle değiştiriyoruz.
Örneğin jq.js gibi.

(Bu arada jquery olmadan da çözebilirsin ancak ilerisi için bir daha başka görsel eklentiler kullanmak istediğinde hiç fena olmaz. Sayfayı yormaz fazla.)

Ardında bu dosyayı sayfamızın yanına taşıyıp sayfamızın </head> tagından evvel jq.js yi çağırıyoruz.
Şöyle:

Kod:

<script type="text/JavaScript" src="jq.js"></script>

<script type="text/JavaScript">
$(document).ready(function(){

	$(".tooltip a").append("<em></em>");
	
	$(".tooltip a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});


});

ve yine </head> tag dan önce CSS eklemeli

CSS

Kod:

.tooltip {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
}
.tooltip li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.tooltip a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;
	font-weight: bold;
	background: url(images/button.gif) no-repeat center center;
/* imaj adresi : http://www.webdesignerwall.com/demo/jquery/images/button.gif */
}
.tooltip li em {
	font-weight: normal;
	background: url(images/hover.png) no-repeat;
/* imaj adresi : http://www.webdesignerwall.com/demo/jquery/images/hover.png */
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}

Yapılcak şey basit artık tooltip çıkımasını istediğimiz linki "tooltip" class'ı ile çevrelemeli (mesela bir div ile) ve title özelliğine metni yazmalıyız.

HTML Kodu:

<span class="tooltip">
		<a href="http://www.zoque.net" title="Bla bla bla bla bla bla bla">Açılış Sayfamız</a>
</span>

bu kadar.
bknz: http://www.webdesignerwall.com/demo/...ed-hover2.html

Ayrıca Google ı kullanarak "JavaScript tooltip" gibi anahtar kelimelerle daha minimal çözümler mutlaka bulacaksınız. Bence üşenmeyip bunu deneyin.

Konu Başlığı: mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

Konuyu Paylaş

Seçenekler

mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

Re: mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

Re: mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

Re: mouse ile text link üzerine gelince ayrı yerde gözüken, çekince kaybolan yazı

Bu konu başlığı için etiketler

Mesaj Seçenekleri