Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Buttony
Forum PHP.pl > Forum > Przedszkole
gniew1971
8.02.2009, 19:32:44
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
8.02.2009, 19:43:00
spróbuj zrobić tak jak tutaj smile.gif
Spawnm
8.02.2009, 19:43:50
np:
[HTML] pobierz, plaintext 
  1. css:
  2. 	  #st{
  3. 	   background-image: url(320px-ROT13_table_with_example.svg.png);
  4. 	   width:100px; 
  5. 	   height:50px
  6. 	  }
  7. 	  #st:hover{
  8. 	   background-image: url(320px-ROT13_table_with_example.svg1.png);
  9. 	  }
  10. html:
  11. <input type='button' id='st'  />
[HTML] pobierz, plaintext
1010
8.02.2009, 19:44:32
hover?


edit: spoznilem się smile.gif
gniew1971
8.02.2009, 21:58:31
obrazek się nie wyświetla. a i obrazek mam w folderze buttony
piotrooo89
8.02.2009, 21:59:18
pokaż kod! jak mamy z fusów wróżyć?
gniew1971
8.02.2009, 22:03:20
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
8.02.2009, 22:07:49
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
8.02.2009, 22:08:07
a nie lepiej bedzie Tobie tak:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. A.link {background: url(buttony/sg.png); width:146px;height: 39px;display:block;}
  3. A.link:HOVER{background: url(buttony/sg1.png);width:146px;height: 39px;display:block;}
  4. </style>
  5.  
  6. <a class="link" href="#">asdasd</a>
[HTML] pobierz, plaintext
gniew1971
8.02.2009, 22:09:25
no ale ja mam kilka obrazków więc jak to zrobić? nie bardzo rozumiem...
Lion_87
8.02.2009, 22:13:33
kilka obrazków >> kilka class
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. A.link_stg {background: url(buttony/sg.png); width:146px;height: 39px;display:block;}
  3. A.link_stg:HOVER{background: url(buttony/sg1.png);width:146px;height: 39px;display:block;}
  4.  
  5. A.link_two {background: url(buttony/two.png); width:146px;height: 39px;display:block;}
  6. A.link_two:HOVER{background: url(buttony/two1.png);width:146px;height: 39px;display:block;}
  7. </style>
  8.  
  9. <a class="lin_stg" href="#">asdasd</a>
  10. <a class="link_two" href="#">asdasd</a>
[HTML] pobierz, plaintext
erix
9.02.2009, 12:24:28
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
9.02.2009, 15:52:32
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
9.02.2009, 16:01:56
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
9.02.2009, 16:03:44
Cytat(DeemR @ 9.02.2009, 16:01:56 ) *
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?
DeemR
9.02.2009, 16:07:38
hover też ma swoje wady ...
gniew1971
9.02.2009, 18:29:30
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ć questionmark.gif?


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
9.02.2009, 18:45:52
A w #menu masz text-align:center;??

EDIT: Trudno tu coś wymyślić przez to że jest
Cytat
DISPLAY: BLOCK;
jak by go nie było to wyśrodkowało by sie ale tla linku by nie było.
gniew1971
9.02.2009, 22:05:34
Tak mam !

to co ja mam robic ?


Kurde, nikt nie pomoże ?
Lion_87
9.02.2009, 22:10:49
Cytat
Kurde, nikt nie pomoże ?

...

Pozostało Ci chyba z IMG zrobić tak jak CI wyżej ktoś napisał:
Cytat
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.