Link üzerine gelince 'Div' açılması nasıl yapılıyor

byuCk · 9 Haziran 2012

Allah'ın selamı üzerine olsun arkadaşlar. Ben size isteğimi resim ile anlatayım:

Aşağıdaki linklerin herhangi birinin üzerine gelince hemen üstünde div açılsın istiyorum. Resimde gördüğünüz gibi div üstteki yazının veya herhangi bir içeriğin üstünde çıkacak. Şu kod işe yarıyor aslında ama ie9'da düzgün çalışmıyor:

HTML:

<html>
<head></head>
<body>
<script>function GizleGoster(idAc){document.getElementById(idAc).style.display = 'block';}function GizleGoster2(idAc){document.getElementById(idAc).style.display = 'none';}
</script>
<br><br><br><br>Alt Katmannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<br><br>

<a style="z-index:-1;" href="http://ugurkaman.com" onmouseover="GizleGoster('Layer1')" onmouseout="GizleGoster2('Layer1')" >ugurkaman.com</a>

<div id="Layer1" onmouseover="GizleGoster('Layer1')" onmouseout="GizleGoster2('Layer1')" style="position:absolute; display:none; width:200px; z-index:2; margin-top:-78px; border:1px solid black; background-color:yellow; height:56px; visibility: visible;">Üst Katman 1</div>

<a style="z-index:-1;" href="http://ikraweb.net" onmouseover="GizleGoster('Layer2')" onmouseout="GizleGoster2('Layer2')" >ikraweb.net</a>

<div id="Layer2" onmouseover="GizleGoster('Layer2')" onmouseout="GizleGoster2('Layer2')" style="position:absolute; display:none; width:200px; z-index:2; margin-top:-78px; border:1px solid red; background-color:yellow; height:56px; visibility: visible;">Üst Katman 2</div>

</body></html>

Yardımlarınızı bekliyorum, şimdiden sağolun...

byuCk · 9 Haziran 2012

Bilgisi olan var mı arkadaşlar?

ankarali_gnc" · 9 Haziran 2012

Chorome,safari,firefox ta calısıyor mu dostum??onlarca calısıyor explorerda calısmıyorsa problem var demektir.. ona göre explorerda uyumluluk modu vardı dıye bılıyorum adres cubugunun orda eger tabıkı dıger tarayıcılarda calısıyorsa

byuCk · 10 Haziran 2012

Diğer tarayıcılarda çalışıyor.

craftingMaterial · 10 Haziran 2012

jQuery ile yap. Bir çok uyumluluk sorunun ortadan kalkar. Ayrıca bu kadar uzun fonksiyon yazmana gerek de kalmaz...

byuCk · 10 Haziran 2012

Nasıl yapabilirim jquery ile kardeşim yardımcı olabilir misin?

craftingMaterial · 10 Haziran 2012

Araştırırsan kısa sürece çözersin zaten. Şimdi ben anlatırsam uzun sürer...

byuCk · 11 Haziran 2012

Araştırdım bir kaç örnek buldum ancak tam istediğim gibi değil.

craftingMaterial · 11 Haziran 2012

İstediğin şekle sok o zaman

Altı üstü biraz HTML, 3-5 CSS kuralı ve de basit bir JS kodu

byuCk · 11 Haziran 2012

HTML ve CSS kısmı tamam da JS bir türlü anlayamıyorum kardeşim ya.

Mesela şu tam istediğim gibi. Ben link üzerinde gelince çalışsın istiyorum.

HTML:

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){         $(".slidingDiv").hide();        $(".show_hide").show();     $('.show_hide').click(function(){    $(".slidingDiv").slideToggle();    }); }); </script>

<style>
.slidingDiv {    height:300px;    background-color: [URL=http://forum.shiftdelete.net/usertag.php?do=list&action=hash&hash=99CCFF]#99CCFF[/URL]    padding:20px;    margin-top:10px;    border-bottom:5px solid [URL=http://forum.shiftdelete.net/usertag.php?do=list&action=hash&hash=3399FF]#3399FF[/URL]} 
.show_hide {    display:none;}
</style>
</head><body>
<a href="#" class="show_hide">Show/hide</a><div class="slidingDiv">Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
</body></html>

craftingMaterial · 11 Haziran 2012

Şurada bir örnek yaptım artık üzerinden türetmesi sana kalmış: http://jsfiddle.net/cgrszone/BzmJd/

byuCk · 11 Haziran 2012

Çok sağol kardeşim. İnceleyim ben.

byuCk · 12 Haziran 2012

Hep bu ie'de sorun çıkıyor. Başka örnek verebilecek arkadaşlar var mı acaba?

Mesela ben şunu yaptım ama ie9'da çalışmadı:

HTML:

<html><head>
<style>
.div1{    width:200px;    border:1px solid red;    background:pink;}
.div2{    display:none;    width:200px;    border:1px solid green;    position:absolute;    margin-top:-43px;    background:yellow;}
.div1:hover .div2
{display:block;}
</style>
</head>
<body>
<br>
<br>Bu altta kalacak olan yazı.<br>
<div class="div1">Üzerine gelinecek katman.
<div class="div2">Açılacak katman.</div>
</div>
</body></html>

lensimaii · 4 Temmuz 2013

aşağıdaki kodu denersen çalışır

<!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>
<style>
.div1{ width:200px; border:1px solid red; background

ink;}
.div2{ display:none; width:200px; border:1px solid green; position:absolute; margin-top:-43px; background:yellow;}
.div1:hover .div2
{display:block;}
</style>
</head>
<body>
<br>
<br>Bu altta kalacak olan yazı.<br>
<div class="div1">Üzerine gelinecek katman.
<div class="div2">Açılacak katman.</div>
</div>
</body></html>

Link üzerine gelince 'Div' açılması nasıl yapılıyor

byuCk

Doçent

byuCk

Doçent

ankarali_gnc"

Asistan

byuCk

Doçent

craftingMaterial

Rektör

byuCk

Doçent

craftingMaterial

Rektör

byuCk

Doçent

craftingMaterial

Rektör

byuCk

Doçent

craftingMaterial

Rektör

byuCk

Doçent

byuCk

Doçent

lensimaii

Öğrenci

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar