Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Closed TopicStart new topic
> [xhtml] obrazek w <a>:hover ?
robos85
post 5.10.2007, 16:38:54
Post #1





Grupa: Zarejestrowani
Postów: 466
Pomógł: 11
Dołączył: 21.09.2006
Skąd: Szczecin

Ostrzeżenie: (0%)
-----


Chodzi mi o to, jak zrobić aby po najechaniu na linka (w formie gif'a) pojawił się inny obrazek.
Chcę aby po najechaniu na obrazek w <a> robił się on jaśniejszy (mam już 2 gotowe obrazki)
Go to the top of the page
+Quote Post
mike
post 5.10.2007, 16:47:42
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----


W skrócie:
  1. a {
  2. background: url('obrazek.gif');
  3. }
  4.  
  5. a:hover {
  6. background: url('obrazek_hover.gif');
  7. }
Go to the top of the page
+Quote Post
NoiseMc
post 5.10.2007, 16:49:18
Post #3





Grupa: Zarejestrowani
Postów: 398
Pomógł: 10
Dołączył: 24.11.2004
Skąd: Łódź

Ostrzeżenie: (0%)
-----


Mozesz dodac do css 2 klasy:
Kod
.off
{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
.on
{
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}


I przy obrazku dac na przyklad:
  1. <a href="http://www.example.com"><img class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" src="image.gif" alt="Image" /></a></li>


--------------------
Go to the top of the page
+Quote Post
robos85
post 5.10.2007, 16:55:07
Post #4





Grupa: Zarejestrowani
Postów: 466
Pomógł: 11
Dołączył: 21.09.2006
Skąd: Szczecin

Ostrzeżenie: (0%)
-----


ten 1szy sposób mnie chyba bardziej interesuje, bo będą mi też potrzebne obrazki nie tylko rozjaśnione/pocienione ale także o róznych kształtach itp smile.gif

Ten 2gi sposób też przydatny smile.gif

Dzięki ;]

a jest sposób, żeby te 2 obrazki jakoś określać w znaczniku <a> bo np, dla 15 linków robić po 2 klasy w css to sporo roboty:)
Go to the top of the page
+Quote Post
wuchi
post 21.08.2009, 12:41:02
Post #5





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 21.08.2009

Ostrzeżenie: (0%)
-----


Mocno spóźnione winksmiley.jpg, ale może komuś się jeszcze przyda...

Cytat(robos85 @ 5.10.2007, 17:55:07 ) *
a jest sposób, żeby te 2 obrazki jakoś określać w znaczniku <a> bo np, dla 15 linków robić po 2 klasy w css to sporo roboty:)



<a href="link.php"><img id="polski" src="obrazek1.jpg" onmouseover="this.src='obrazek2.jpg'" onmouseout="this.src='obrazek1.jpg'" /></a>
Go to the top of the page
+Quote Post
erix
post 21.08.2009, 12:46:03
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Jak radzisz, to radź dobrze - na co JavaScript do tego?


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
seth-kk
post 21.08.2009, 14:16:15
Post #7





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

Ostrzeżenie: (0%)
-----


Cytat(wuchi @ 21.08.2009, 13:41:02 ) *
Mocno spóźnione winksmiley.jpg, ale może komuś się jeszcze przyda...




<a href="link.php"><img id="polski" src="obrazek1.jpg" onmouseover="this.src='obrazek2.jpg'" onmouseout="this.src='obrazek1.jpg'" /></a>

takie cos nadal mozna oprzec na css
np dajac jeden obrazek w tlo a drugi do img nastepnie ustawiajac jedno nad drugim i opisujac czyms w stylu
  1. a img {display: none;}
  2. a:hover img {display: block;}


--------------------
Go to the top of the page
+Quote Post
erix
post 21.08.2009, 15:20:03
Post #8





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Dobra, wystarczy bo widzę, że dyskusja zatacza koło.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post

Closed TopicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 18:21