Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Zmiana obrazka
Forum PHP.pl > Forum > Przedszkole
adam882
Witam

Rozwiązanie problemu może okazać się wręcz banalne. Posiadam dwa obrazki - a.gif i b.gif Pod po kliknięciu na a.gif otwiera się odsyłacz. Chciałbym zrobić, aby po najechaniu myszką na obrazek a.gif - zamienił się na b.gif (ma być to efekt podświetlenia buttonu pod nagłówkiem). Widziałem takie rozwiązania w <ul><li></li></ul>, lecz jedynie w przypadku, kiedy plik graficzny stanowi tło dla odsyłacza tekstowego w <li>.
Daiquiri
Nie bardzo rozumiem... jeżeli to jest link to skorzystaj z hover.
adam882
Mam przykładowo <a href="index.html"><img src="img/buttony/strona-glowna.gif" alt="" /></a> i po najechaniu myszką na ten link dla obrazku w momencie najechania, obrazek zmienia się na drugi, wybrany - tworząc efekt podświetlenia.
tog
daj jako tlo albo przez js
inaczej nei zrobisz

a.button {
display: block;
width: 100px;
height: 200px;
background: url('czarna_kupa.png');
}

a.button:hover {
background: url('brazowa_kupa.png');
}

pozniej
<a class="button"></a>

nie musisz nic wpisywac pomiedzy <a> a </a>
john_doe
potrzebujesz obrazka który jest taki sam jeden pod drugim, tylko ten niżej jest z jakimś odcieniem (mój przykład pokazuje obrazek height 46 px, robisz wiec obraz dwa razy większy a wnim jakby dwa te same ale ten drugi o innym odcieniu np ten dolny -> nie wiem czy mnie dobrze tutaj zrozumiesz
ogólnie tym kodem otrzymasz cos takiego jak tutaj menu na gorze
http://helion.pl/
zobacz taki CSS
  1. #main-menu {
  2. list-style-type: none;
  3. margin: 0 auto;
  4. padding: 0;
  5. }
  6.  
  7. #main-menu li {
  8. float: right;
  9. padding: 0;
  10. }
  11.  
  12. #main-menu li a {
  13. float: left;
  14. height: 46px;
  15. position: relative;
  16. overflow: hidden;
  17. }
  18.  
  19. #main-menu li a:hover {
  20. border-width: 0;
  21. }
  22.  
  23. #main-menu li a:hover img {
  24. position: relative;
  25. top: -46px;
  26. }


i potem np cos takiego
  1. <div id="menu">
  2. <ul id="main-menu">
  3. <li>
  4. <a href="#">
  5. <img src="tutaj path to img" alt="alt" border="0"/>
  6. </a>
  7. </li>
  8. <li>
  9. <a href="#">
  10. <img src="tutaj path to img" alt="alt" border="0"/>
  11. </a>
  12. </li>
  13. <li>
  14. <a href="#">
  15. <img src="tutaj path to img" alt="alt" border="0"/>
  16. </a>
  17. </li>
  18. </ul>
  19. </div>


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.