Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]A href za zdjęciem ?
Forum PHP.pl > Forum > Przedszkole
piotr485
Witam - mam takie pytanko bo nie wiem jak się do tego zabrac.

Wyświetlam sobie zdjęcie
  1. <img src="zdjecie.jpg" />


Chciałbym wstawic za zdjęcie hrefa w ktorym ustawie width and height i dodatkowo jesli ktos najedzie myszka na ten obszar to sie pojawi jakis gifek (np. strzalka.gif)

1. Można to wszystko osiągnac za pomoca css?
2. Moze jakas mała podpowiedz ?

Z góry dziekuje!

pablo89pl
  1. <img src="sciezkaDefualt" onMouseOver="this.src = sciezka" onMouseOut=" jak wcześniej " />


smile.gif
Przez css tego nie zmienisz, chyba ze wrzucisz calosc jako div i ustawisz background , i wtedy przez css zmieniac :hover i gotowe;]


Powodzenia!:)
lamcpp
Można za pomocą czystego CSS
  1. <a href="index.php?l=losowe"><span class="ust_li2"><img src="images/c4.png" /></span</a></li>


i teraz w css, zeby zmienic wielkość zdjęcia:
  1. a span img{
  2. text-decoration: none;
  3. width: 65px;
  4. height: 35px;
  5. }

żeby zmieniało się coś po najechaniu myszką:

  1. a:hover span img{
  2. width: 80px; /*tu ustawiasz sobie wszystkie znaczniki które się zmieniają po najechaniu myszką*/
  3. background: green;
  4. }
piotr485
Przykład na JS mi nie działa. Próbowałem to zrobic na divach i background jako moje zdjecie ale niestety tak nie moze byc bo nie moge wpisywac szerokosci zdjec musi byc ona automatyczna wiec musze zapisac w normalnej postaci <img src="plik.jpg" />

Może wytłumaczę o co mi chodzi dokładnie.



Zdjęcie musi byc jako <img src="plik.jpg"> poniewaz mini galeria jest obslugiwana przez JS

Pole białe pokazuje jaki obszar ma href kiedy najedzie sie myszka i wtedy powinna pojawic sie czerwona strzalka.
Gdy najedziemy na zolte pole powinna pojawic sie czerona strzalka w prawo (tak to nic niewyswietlamy)

A zdjecie jest po prostu zdjeciem.

Czy ktos jest mi w stanie pomoc ?

Postawie duze piwwo guitar.gif
Blame
Ja bym to zrobił tak. Największy div, w którym będą: na środku div ze zdjęciem, po lewej i prawej link. Tu przykładowa struktura:

  1. <div id="slajd">
  2. <a href="adres" class="left"></a>
  3. <div id="zdjecie">
  4. </div>
  5. <a href="adres1" class="right"></a>
  6. </div>

i CSS:
  1. #slajd{
  2. width:600px;
  3.  
  4. height:600px;
  5.  
  6. text_align:center;
  7. }
  8. a.left{
  9.  
  10. width:300px;
  11.  
  12. height:600px;
  13.  
  14. float:left
  15.  
  16. }
  17.  
  18. a.left:hover{
  19.  
  20. width:300px;
  21.  
  22. height:600px;
  23.  
  24. float:left;
  25.  
  26. background-image:url(adres_do_strzalki);
  27.  
  28. background-position:left;
  29.  
  30. }
  31.  
  32. #zdjecie{
  33.  
  34. z-index:100000;
  35.  
  36. }


Wymiary przykładowe. Nie podawałem a.right, pokombinuj sam 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.