css ve javascript beraber nasıl kullanılacak

anonymuser · 11.10.2007

aslında bazıları için kolay olabilir ama beceremedim. istediğim basit aslında mouse ile bir katmanın üstüne gelince katmanın arka plan rengi değişsin istiyorum. JavaScript bilgim sınırlı yardımcı olabilir misiniz? aşağıdaki koda bakınca sanırım her şey anlaşılıyor.

Kod:

<!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>
<script language="JavaScript" type="text/JavaScript">
function uygula{
document.form1.katman.style="background-color:#FF0000"
}
</script>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<title>Untitled Document</title>
</head>
<body>
<form name="form1">
<div id="katman" onmousemove="uygula()">
burası katmanın içeriği
</div></form>
</body>
</HTML>

BYK · 11.10.2007

http://www.konyasinema.com/code/visual.js adresindeki kod ile yazdığın herhangi bir elemana "effected" özelliği verirsen o elemanlar kod tarafından otomatik olarak yönetilmeye başlanıyor. Buradaki mantık CSS de hiç JS kullanmadan yapılan "a" ve "a:hover" sistemini her sınıfa uygulamak. "effected" özelliğine sahip olan elemanın sınıf adı "sinif1" olsun diyelim ki. Eğer "sinif1_hover" ve "sinif1_clck" sınıfları da tanımlıysa kod bu elemanın üzerinde gelindiğinde sınıfını "sinif1_hover" olarak değiştiriyor. Sizin yapmanız gereken tek şey ilgili sınıfları hazırlayıp, istediğiniz elemanlara "effected=1" parametresini eklemek ve sayfa yüklendiğinde initEffects() fonksiyonunu çalıştırtmak. Örnek bir sayfa şöyle olabilir:

HTML Code:

<HTML>
<head>
  <title>Deneme</title>
  <script type="text/JavaScript" src="visual.js"></script>
  <style type="text/CSS">
    .sinif1 {background-color: #ffffff}
    .sinif1_hover {background-color: #ff0000}
    .sinif1_clck {background-color: #dddddd}
  </style>
</head>
<body onload="initEffects()">
<div class="sinif1" effected="1" style="width: 100px">Bir yazı....</div>
</body>
</HTML>

Gerçek hayattaki kullanım için,
http://www.konyasinema.com/index.php...=Afacan+Dennis adresinde aşağıda bulunan sekme sisteminin görsel yönetimi bu script ile yapılmakta.

Bu yöntemle bir kereye mahsus JavaScript komutu çalıştırarak sayfandaki her elemana bu tarz bir efekt uygulayabilirsin.

anonymuser · 11.10.2007

çok sağol ben bu elemanların hover özelliğini tamamen unutmuşum. ufacık bir kod yetti bana

Kod:

div:hover{
  background-color: #6699CC;
}

BYK · 11.10.2007

div:hover olayı IE'de çalışmayabilir, o yüzden böyle bir scripte ihtiyaç duymuştum.

Sorunun çözüldüyse sorun yok ama

anonymuser · 12.10.2007

ie7' de çalışıyor. ie6'da problem olmaz sanırım. tekrar sağol. iyi ki hover'dan bahsetmişsin

arsende · 12.10.2007

JS bilginiz sınırlı ise pes etmeyin ! Sınırları kaldırmak lazım

Kod:

<!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>
<script language="JavaScript" type="text/JavaScript">
function uygula(divID)
{
document.getElementById(''+divID+'').style.background="red";
}
</script>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<title>Untitled Document</title>
</head>
<body>
<form name="form1">
<div id="katman"  onmouseover="uygula(this.id)">
burası katmanın içeriği
</div></form>
</body>
</HTML>

onmouseover="uygula(this.id)">
ID' si bulunan katmalarda sorunsuz çalışır. (IE6, IE7,FF,Opera)

11.10.2007	#2 (permalink)
BYK Üyelik Tarihi: 08.04.2003 Yer: Ankara Yaş: 20 Mesaj: 689 Görsel: 8	Re: css ve javascript beraber nasıl kullanılacak http://www.konyasinema.com/code/visual.js adresindeki kod ile yazdığın herhangi bir elemana "effected" özelliği verirsen o elemanlar kod tarafından otomatik olarak yönetilmeye başlanıyor. Buradaki mantık CSS de hiç JS kullanmadan yapılan "a" ve "a:hover" sistemini her sınıfa uygulamak. "effected" özelliğine sahip olan elemanın sınıf adı "sinif1" olsun diyelim ki. Eğer "sinif1_hover" ve "sinif1_clck" sınıfları da tanımlıysa kod bu elemanın üzerinde gelindiğinde sınıfını "sinif1_hover" olarak değiştiriyor. Sizin yapmanız gereken tek şey ilgili sınıfları hazırlayıp, istediğiniz elemanlara "effected=1" parametresini eklemek ve sayfa yüklendiğinde initEffects() fonksiyonunu çalıştırtmak. Örnek bir sayfa şöyle olabilir: HTML Code: <HTML> <head> <title>Deneme</title> <script type="text/JavaScript" src="visual.js"></script> <style type="text/CSS"> .sinif1 {background-color: #ffffff} .sinif1_hover {background-color: #ff0000} .sinif1_clck {background-color: #dddddd} </style> </head> <body onload="initEffects()"> <div class="sinif1" effected="1" style="width: 100px">Bir yazı....</div> </body> </HTML> Gerçek hayattaki kullanım için, http://www.konyasinema.com/index.php...=Afacan+Dennis adresinde aşağıda bulunan sekme sisteminin görsel yönetimi bu script ile yapılmakta. Bu yöntemle bir kereye mahsus JavaScript komutu çalıştırarak sayfandaki her elemana bu tarz bir efekt uygulayabilirsin. __________________ Hayata gülümse! Fotoğraf Sergim - www.fototonik.com/madbyk@gmail.com/Denemeler

11.10.2007	#3 (permalink)
anonymuser Üyelik Tarihi: 14.03.2007 Yer: diyarbakır Yaş: 28 Mesaj: 35	Re: css ve javascript beraber nasıl kullanılacak çok sağol ben bu elemanların hover özelliğini tamamen unutmuşum. ufacık bir kod yetti bana Kod: div:hover{ background-color: #6699CC; } __________________ www.kamuflaj.org

11.10.2007	#4 (permalink)
BYK Üyelik Tarihi: 08.04.2003 Yer: Ankara Yaş: 20 Mesaj: 689 Görsel: 8	Re: css ve javascript beraber nasıl kullanılacak div:hover olayı IE'de çalışmayabilir, o yüzden böyle bir scripte ihtiyaç duymuştum. Sorunun çözüldüyse sorun yok ama __________________ Hayata gülümse! Fotoğraf Sergim - www.fototonik.com/madbyk@gmail.com/Denemeler

12.10.2007	#5 (permalink)
anonymuser Üyelik Tarihi: 14.03.2007 Yer: diyarbakır Yaş: 28 Mesaj: 35	Re: css ve javascript beraber nasıl kullanılacak ie7' de çalışıyor. ie6'da problem olmaz sanırım. tekrar sağol. iyi ki hover'dan bahsetmişsin __________________ www.kamuflaj.org

Sponsorlu Bağlantılar
Zoque.Forum Reklam