[HTML][CSS]Buttony Opcje

[gniew1971]

Zrobiłem sobie w photoshopie buttony, jest ich parenaście, na każdym co inne napisane. Np mam pliki buttonów: stronaglowna.png i stronaglowna1.png(ten jest inaczej podświetlony). Co zrobić z użyciem css że jak sie najedzie na buttona stronaglowna.png, to pojawi się zamiast niego stronaglowna1.png?

[adasiu]

spróbuj zrobić tak jak tutaj

[Spawnm]

np:

[HTML] pobierz, plaintext 
css:
	  #st{
	   background-image: url(320px-ROT13_table_with_example.svg.png);
	   width:100px; 
	   height:50px
	  }
	  #st:hover{
	   background-image: url(320px-ROT13_table_with_example.svg1.png);
	  }
html:
<input type='button' id='st'  />
[HTML] pobierz, plaintext 

[1010]

hover?


edit: spoznilem się

Ten post edytował 1010 8.02.2009, 19:44:48

[gniew1971]

obrazek się nie wyświetla. a i obrazek mam w folderze buttony

[piotrooo89]

pokaż kod! jak mamy z fusów wróżyć?

[gniew1971]

css:

Kod

#st{
background-image: url("buttony/sg.png");
width: 146px;
height: 39px
}
#st:hover{
background-image: url("buttony/sg1.png");
}

html:

Kod

<div id="menu"><a href="index.html"><input type='button' id='st' /></a></div>

[piotrooo89]

to coś masz skopane w ścieżkach chyba. tu wygląda ok.

tip: w IE nie będzie chodzić ponieważ on obsługuje pseudo klasę :hover tylko dla linków.

[Lion_87]

a nie lepiej bedzie Tobie tak:

[HTML] pobierz, plaintext 
<style type="text/css">
A.link {background: url(buttony/sg.png); width:146px;height: 39px;display:block;}
A.link:HOVER{background: url(buttony/sg1.png);width:146px;height: 39px;display:block;}
</style>
 
<a class="link" href="#">asdasd</a>
[HTML] pobierz, plaintext 

Ten post edytował Lion_87 8.02.2009, 22:11:01

[gniew1971]

no ale ja mam kilka obrazków więc jak to zrobić? nie bardzo rozumiem...

[Lion_87]

kilka obrazków >> kilka class

[HTML] pobierz, plaintext 
<style type="text/css">
A.link_stg {background: url(buttony/sg.png); width:146px;height: 39px;display:block;}
A.link_stg:HOVER{background: url(buttony/sg1.png);width:146px;height: 39px;display:block;}
 
A.link_two {background: url(buttony/two.png); width:146px;height: 39px;display:block;}
A.link_two:HOVER{background: url(buttony/two1.png);width:146px;height: 39px;display:block;}
</style>
 
<a class="lin_stg" href="#">asdasd</a>
<a class="link_two" href="#">asdasd</a>
[HTML] pobierz, plaintext 

Ten post edytował Lion_87 8.02.2009, 22:14:07

[erix]

Tutaj lepiej byłoby skorzystać z ID, a nie klasy... Klasa - wiele elementów, ID - jeden.

http://www.w3.org/TR/CSS21/selector.html#id-selectors

[gniew1971]

Mam problem, bo jak są 2 buttony to tylko na IE się dobrze wyświetlają, a na FF jest tylko jeden button. A chce by były na środku

[DeemR]

Bez CSS możesz zrobić to tak:

Kod

<img src="buttony/sg.png"  border="0" onMouseOver="this.src = 'buttony/sg1.png'" onMouseOut="this.src = 'buttony/sg.png'" />

Według mnie lepszy sposób

[b4x]

Bez CSS możesz zrobić to tak:

Kod

<img src="buttony/sg.png"  border="0" onMouseOver="this.src = 'buttony/sg1.png'" onMouseOut="this.src = 'buttony/sg.png'" />

Według mnie lepszy sposób

Wg. mnie nie jest to lepszy sposób. - Co jeśli sobie wyłączę JS ? ;-)

@gniew1971 - mógłbyś pokazać jakiegoś screena - jak to mniej więcej wygląda?

Ten post edytował b4x 9.02.2009, 16:05:34

[DeemR]

hover też ma swoje wady ...

[gniew1971]

To wszystko jest na www.fhurm.info/new - uciekają buttony do lewej, a chce by były wyśrofkowane @

Czy ktos mi powie jak je wyśrodkować ?


css:

Kod

div.menu2 a { float: left; }

A.sg {background: url(buttony/sg.png);
background-position: center;
margin: auto;
width:146px;
height: 39px;
display:block;}
A.sg:HOVER{background: url(buttony/sg1.png);
width:146px;
height: 39px;
display:block;}

A.on {background: url(buttony/on.png);background-position: center;margin: auto;width:71px;height: 39px;display:block;}
A.on:HOVER{background: url(buttony/on1.png);width:71px;height: 39px;display:block;}

A.of {background: url(buttony/of.png);background-position: center;margin: auto;width:71px;height: 39px;display:block;}
A.of:HOVER{background: url(buttony/of1.png);width:71px;height: 39px;display:block;}

html:

Kod

<div id="menu"><div class="menu2"><a class="sg" href="index.html"></a><a class="on" href="onas.html"></a><a class="of" href="oferta.html"></a></div></div>

buttony na stronie uciekaja mi do lewej strony ! mozna to zobaczyc na www.fhurm.info/new

[Lion_87]

A w #menu masz text-align:center;??

EDIT: Trudno tu coś wymyślić przez to że jest

DISPLAY: BLOCK;

jak by go nie było to wyśrodkowało by sie ale tla linku by nie było.

Ten post edytował Lion_87 9.02.2009, 19:49:00

[gniew1971]

Tak mam !

to co ja mam robic ?


Kurde, nikt nie pomoże ?

[Lion_87]

Kurde, nikt nie pomoże ?

...

Pozostało Ci chyba z IMG zrobić tak jak CI wyżej ktoś napisał:

Bez CSS możesz zrobić to tak:
Kod
<img src="buttony/sg.png" border="0" onMouseOver="this.src = 'buttony/sg1.png'" onMouseOut="this.src = 'buttony/sg.png'" />


Według mnie lepszy sposób