Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML,CSS] Obramowanie zdjęcia
Forum PHP.pl > Forum > Przedszkole
krzychu0808
12.03.2008, 11:39:23
Witam....
Chciałbym zrobić ramkę wkoło zdjęcia np białą ale po najechaniu na zdjęcie żeby zmieniała kolor na np. żółty
Zrobiłem:
[HTML] pobierz, plaintext 
  1. <div class="txtgal">
  2. <center>
  3. <a href="images/g1.jpg" rel="lightbox" title="G-War"><img src="images/mg1.jpg"></a>
  4. </center>
  5. </div>
[HTML] pobierz, plaintext


Css:
[XML] pobierz, plaintext 
  1. .txtgal {
  2.     color:#FFFFFF;
  3.     font-family: Tahoma;
  4.     font-size:11px;
  5.  
  6. }
  7. .txtgal a{
  8.     border: 2px;
  9.     border-color:#FFFFFF; 
  10.  
  11. }
  12. .txtgal a:hover{
  13.     border: 2px;
  14.     border-color:#FFF000; 
  15.  
  16. }
[XML] pobierz, plaintext


Ale nie działa zobaczcie http://kmp.elaz.eu/g-war/index.php?a=galeria
woj_tas
12.03.2008, 11:58:53 
[HTML] pobierz, plaintext 
  1. .txtgal a img {
  2.    border: 2px;
  3.    border-color:#FFFFFF;
  4.  
  5. }
  6. .txtgal a:hover img {
  7.    border: 2px;
  8.    border-color:#FFF000;
  9.  
  10. }
[HTML] pobierz, plaintext
krzychu0808
12.03.2008, 12:39:18
Nie wiem czemu ale w IE 7.0 wszystko działa a na Mozilla nie działa obramowanie..
Dałem:
[HTML] pobierz, plaintext 
  1. .txtgal {
  2.     color:#FFFFFF;
  3.     font-family: Tahoma;
  4.     font-size:11px;
  5.  
  6. }
  7. .txtgal a img{
  8.     border: 2px;
  9.     border-color:#FFFFFF; 
  10.  
  11. }
  12. .txtgal a:hover img{
  13.     border: 2px;
  14.     border-color:#FFF000; 
  15.  
  16. }
[HTML] pobierz, plaintext


zobaczcie http://kmp.elaz.eu/g-war/index.php?a=galeria
grzesiek_g
12.03.2008, 12:49:55 
[HTML] pobierz, plaintext 
  1. .txtgal a img{
  2. border: 2px solid #fff;
  3. }
  4. .txtgal a:hover img{
  5. border: 2px solid #fff000;
  6. }
[HTML] pobierz, plaintext

// edit
Na IE6 to nie zadziała, użyj albo js albo obramowanie daj dla a:
[HTML] pobierz, plaintext 
  1. .txtgal a {
  2. display:block;
  3. width:300px;
  4. border: 2px solid #fff;
  5. }
  6. .txtgal a:hover
  7. border: 2px solid #fff000;
  8. }
[HTML] pobierz, plaintext

Powinno zadziałać, nie testowałem bo nie mam włączonego IE6.
webspy
12.03.2008, 15:27:57
Ja mam taki skrypt:
Kod
<a href="#"><img onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor='transparent';" border="0" src="obrazek.jpg" alt=""></a>


Tylko, że znowu działa na Mozilli a w IE nie sad.gif
to może połącz te dwa rozwiązania (js i css) i powinno działać tu i tu winksmiley.jpg
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.