photoshop ta menu ile ilgili (rollover state)

ilkervpr · 16.08.2006

Adobe imageready ile menü yapımında bir sıkıntıyla karşılaştım da onun ilgili bi soru soracağım,inşallah bir cevap bulabilirim.
ben menü de link olan yerlerin üzerine gelindiğinde renk değiştirsin ya da yazı değişsin istiyorum,sanırım bunun adı " rollover state " bunu nasıl yapabilirim ?
ayrıca ekteki fotoda menüyü görebilirsiniz...
saygılarla tşkler..
http://img147.imageshack.us/img147/7089/menupc3.jpg

fatihunal · 17.08.2006

JavaScript veya CSS ile yapabilirsiniz.
En basit ve kullanışlı olanı ise CSS.

Bazı CSS rollover örnekleri;

http://www.html-site.nl/rollover-menu.php
http://www.ssi-developer.net/css/men...r-effect.shtml
http://www.unbf.ca/altiustu/arsiv/20...uzde_css_v.php

şükrüye · 17.08.2006

biz bunları nasıl kullanacağız burda parça parça verirlmiş nasıl birleştirecem

bgul · 17.08.2006

ilk linkte olani acikliyim.
bilmiyorum senin yapmak istedigin bu mu ama genelde menuleri, altta background resmi, ustte yazi olarak yapiyolar. Burda da bu anlatilmis. CSS yoluyla alttaki resim degisiyo. Ayni sekilde istersen yazi rengini falan da degistirebiliyosun...
Simdi koda gelecek olursak, CSS Explorer'a sayfadaki elementlerin nasil goruntulenecegini soyler.
HTML sayfasinda, menuyu koymak istedigin yere bunu koy:
<div id="navigatie">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Over ons</a></li>
<li><a href="/">Archief</a></li>
<li><a href="/">forum</a></li>
<li><a href="/">Winkel</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>

Yani bu kisim <body> </body> arasinda olacak.

Geri kalanlarsa <head> </head> arasinda su sekilde yer alirsa calisir.

<style type="text/CSS">
#navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}
#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigatie ul li {
margin: 0;
border-top: 1px solid #003;
}
#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background: url(grafik.gif);
color: #fff;
text-decoration: none;
width: 100%;
}
HTML>body #navigatie ul li a {
width: auto;
}
#navigatie ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background: url(grafik2.gif);
color: #fff;
}
</style>

Simdi burda onemli noktalar; ilk olarak <body> taglarinin arasina koydugumuz kisimda <div>'in attribute'u olan id'yi navigatie diye tanimlamisiz. Bu nedenle nasil goruntulenecegini CSS'den navigatie diye arayip buluyo Explorer. Kodun cogu normalde nasil gorulecegini gostermek icin. asil degisimin yapildigi 2 bolum var:
#navigatie ul li a {
#navigatie ul li a:hover {
Biraz HTML'le hasirnesirsen ul ve li listeleme icin kullaniliyo, gormussundur bunlari. Asil onemli olan sonundaki a ve a:hover. a, link'in normalde nasil gorulecegini belirtiyo. a:hover'sa uzerine gelindiginde nasil olacagini belirtiyo. Bu ikisinde de background: url(grafik.gif) satirinda, grafik.gif yerine kendi resimlerini belirtmen gerekiyo.

NOT: ilk linkten birebir kopyaladim. sorun cikabilir... bi de o linkte resim koymuyolarmis, background rengini degistiriyolarmis sadece, 3. link'ten alip duzelttim, umarim calisir.

ilkervpr · 17.08.2006

harika cevaplarla karşılaştım,link veren ve anlatımı yapan arkadaşlarıma çok tşkler. bgul ve fatihunal tekrar tşkler,yardımlarınız için...

eqZo · 14.02.2007

CSS ile resim içermeyen rollover menüler oluşturabiliyoruz, peki resimli rollover menü yapabiliyor mu bu CSS?

Dhilgul · 14.02.2007

Alıntı:

eqZo tarafından gönderilen mesaj:

CSS ile resim içermeyen rollover menüler oluşturabiliyoruz, peki resimli rollover menü yapabiliyor mu bu CSS?

Arkaplan resimlerinin değişmesiyle çalışan bir menü yapabilirsin. Menüdeki eleman sayısı kaç olursa olsun toplam iki (ya da üç) resim yükleneceği için hızlı olacaktır.
Her eleman için iki (ya da üç) resim belirleyip, bunları alt alta ya da yan yana birleştirip tek resim haline getirip, ardından "background-position" özelliği ile ayarlayabilrsin.

Saat 04:12. Aklıma gelmeyen yöntemler de olabilir tabii.

eqZo · 14.02.2007

teşekkür ederim dhilgul

ama tam olarak istediğişm yazılardan menü yapmak değil.
üzerine geldiğimizde değişen bildiğimiz resimlerden oluşan rollover menü veya herhangi bir ikon, istediğim..

rollover bazen sağlıksız oluyor. o yüzden varsa CSS ile çözümü, öğrenmek isterim..

T.M.R · 14.02.2007

Mehmet Doğan'ın altiustutasarim.com sitesinde şöyle bi örnek yapmıştı.. bilemiyorum istediğin şey bumuydu ama..?

Dhilgul · 14.02.2007

CSS'in hover özelliğinden faydalanarak yapmak için:

http://www.nublue.co.uk/blog/css-hover-button/

CSS'in background-position özelliğinden faydalanarak yapmak için:

http://www.wellstyled.com/css-nopreload-rollovers.html

Benim tavsiyem ikincisini kullanman. Butonun üç hali de (normal, hover, aktif) bir kerede yüklendiği için daha hızlı çalışır.

17.08.2006	#2 (permalink)
fatihunal Üyelik Tarihi: 14.06.2004 Yer: Ege'nin en büyük köyü Yaş: 25 Mesaj: 550	Re: photoshop ta menu ile ilgili (rollover state) JavaScript veya CSS ile yapabilirsiniz. En basit ve kullanışlı olanı ise CSS. Bazı CSS rollover örnekleri; http://www.html-site.nl/rollover-menu.php http://www.ssi-developer.net/css/men...r-effect.shtml http://www.unbf.ca/altiustu/arsiv/20...uzde_css_v.php __________________ Aza sormuşlar nereye gidiyorsun diye. Çoğun yanına demiş. :confused:

17.08.2006	#3 (permalink)
şükrüye Üyelik Tarihi: 11.08.2006 Yer: Ankara Mesaj: 45 Görsel: 1	Re: photoshop ta menu ile ilgili (rollover state) biz bunları nasıl kullanacağız burda parça parça verirlmiş nasıl birleştirecem

17.08.2006	#4 (permalink)
bgul Üyelik Tarihi: 06.07.2006 Yer: İstanbul Yaş: 22 Mesaj: 199	Re: photoshop ta menu ile ilgili (rollover state) ilk linkte olani acikliyim. bilmiyorum senin yapmak istedigin bu mu ama genelde menuleri, altta background resmi, ustte yazi olarak yapiyolar. Burda da bu anlatilmis. CSS yoluyla alttaki resim degisiyo. Ayni sekilde istersen yazi rengini falan da degistirebiliyosun... Simdi koda gelecek olursak, CSS Explorer'a sayfadaki elementlerin nasil goruntulenecegini soyler. HTML sayfasinda, menuyu koymak istedigin yere bunu koy: <div id="navigatie"> <ul> <li><a href="/">Home</a></li> <li><a href="/">Over ons</a></li> <li><a href="/">Archief</a></li> <li><a href="/">forum</a></li> <li><a href="/">Winkel</a></li> <li><a href="/">Contact</a></li> </ul> </div> Yani bu kisim <body> </body> arasinda olacak. Geri kalanlarsa <head> </head> arasinda su sekilde yer alirsa calisir. <style type="text/CSS"> #navigatie { font-family: verdana, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; width: 12em; border-right: 1px solid #666; padding: 0; margin-bottom: 1em; background-color: #9cc; color: #333; } #navigatie ul { list-style: none; margin: 0; padding: 0; } #navigatie ul li { margin: 0; border-top: 1px solid #003; } #navigatie ul li a { display: block; padding: 2px 2px 2px 4px; border-left: 10px solid #369; border-right: 1px solid #69c; border-bottom: 1px solid #369; background: url(grafik.gif); color: #fff; text-decoration: none; width: 100%; } HTML>body #navigatie ul li a { width: auto; } #navigatie ul li a:hover { border-left: 10px solid #036; border-right: 1px solid #69c; border-bottom: 1px solid #369; background: url(grafik2.gif); color: #fff; } </style> Simdi burda onemli noktalar; ilk olarak <body> taglarinin arasina koydugumuz kisimda <div>'in attribute'u olan id'yi navigatie diye tanimlamisiz. Bu nedenle nasil goruntulenecegini CSS'den navigatie diye arayip buluyo Explorer. Kodun cogu normalde nasil gorulecegini gostermek icin. asil degisimin yapildigi 2 bolum var: #navigatie ul li a { #navigatie ul li a:hover { Biraz HTML'le hasirnesirsen ul ve li listeleme icin kullaniliyo, gormussundur bunlari. Asil onemli olan sonundaki a ve a:hover. a, link'in normalde nasil gorulecegini belirtiyo. a:hover'sa uzerine gelindiginde nasil olacagini belirtiyo. Bu ikisinde de background: url(grafik.gif) satirinda, grafik.gif yerine kendi resimlerini belirtmen gerekiyo. NOT: ilk linkten birebir kopyaladim. sorun cikabilir... bi de o linkte resim koymuyolarmis, background rengini degistiriyolarmis sadece, 3. link'ten alip duzelttim, umarim calisir.

17.08.2006	#5 (permalink)
ilkervpr Üyelik Tarihi: 14.08.2006 Yer: istanbul Yaş: 24 Mesaj: 6 Görsel: 10	Re: photoshop ta menu ile ilgili (rollover state) harika cevaplarla karşılaştım,link veren ve anlatımı yapan arkadaşlarıma çok tşkler. bgul ve fatihunal tekrar tşkler,yardımlarınız için...

14.02.2007	#6 (permalink)
eqZo Üyelik Tarihi: 11.01.2003 Yer: Istanbul - Eskişehir Yaş: 20 Mesaj: 374	Re: photoshop ta menu ile ilgili (rollover state) CSS ile resim içermeyen rollover menüler oluşturabiliyoruz, peki resimli rollover menü yapabiliyor mu bu CSS? __________________ Mazhar Tolga ERGİN Eskişehir , İstanbul arası mesafe nedir ki?

14.02.2007	#8 (permalink)
eqZo Üyelik Tarihi: 11.01.2003 Yer: Istanbul - Eskişehir Yaş: 20 Mesaj: 374	Re: photoshop ta menu ile ilgili (rollover state) teşekkür ederim dhilgul ama tam olarak istediğişm yazılardan menü yapmak değil. üzerine geldiğimizde değişen bildiğimiz resimlerden oluşan rollover menü veya herhangi bir ikon, istediğim.. rollover bazen sağlıksız oluyor. o yüzden varsa CSS ile çözümü, öğrenmek isterim.. __________________ Mazhar Tolga ERGİN Eskişehir , İstanbul arası mesafe nedir ki?

14.02.2007	#9 (permalink)
T.M.R Üyelik Tarihi: 06.12.2006 Yer: AntaLya Yaş: 27 Mesaj: 75	Re: photoshop ta menu ile ilgili (rollover state) Mehmet Doğan'ın altiustutasarim.com sitesinde şöyle bi örnek yapmıştı.. bilemiyorum istediğin şey bumuydu ama..? __________________ Madde harici alışveriş erbabı

14.02.2007	#10 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	Re: photoshop ta menu ile ilgili (rollover state) CSS'in hover özelliğinden faydalanarak yapmak için: http://www.nublue.co.uk/blog/css-hover-button/ CSS'in background-position özelliğinden faydalanarak yapmak için: http://www.wellstyled.com/css-nopreload-rollovers.html Benim tavsiyem ikincisini kullanman. Butonun üç hali de (normal, hover, aktif) bir kerede yüklendiği için daha hızlı çalışır. __________________ \| Yazım Kuralları \| İmla Kuralları \| Türk Dil Kurumu \| Dahi anlamındaki "de" ayrı yazılır. \|