Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Zmieniajacy sie obrazek jako link
Forum PHP.pl > Forum > Przedszkole
Turson
Chcę zrobić, że po najechaniu kursorem na obrazek, który jest linkiem zmienia się w inny.

Próbwałem;
  1. .test{
  2. background-color:red;
  3. width:100px;
  4. height:100px;
  5. }
  6. .test:hover{
  7. background-color:black;
  8. width:100px;
  9. height:100px;
  10. }

  1. <a href="#" class="test"></a>


Ale to nie to..

natomiast działa
  1. <a href="www.google.pl">
  2. <button type="button" class="test"></button></a>

ale czy to jedyne wyjscie?
prowseed
Nic dziwnego, ze nie dziala, skoro zmieniasz tlo, a to z kolei jest zakryte przez obrazek

  1. span .cos{
  2. background:url('obrazek.jpg') top left no-repeat;
  3. width:100px;
  4. height:100px;
  5. font: Arial 1px/200px;
  6. text-indent:9999px;
  7. }
  8. span .cos:hover{
  9. background:url('obrazek.jpg') bottom left no-repeat;
  10. width:100px;
  11. height:100px;
  12. }


Jakos tak, na szybko i nie sprawdzane- dopasujesz sobie : )

Obrazek ma wymiary 100x200 w tym przypadku
w html robisz <a href="#"><span class="cos">tego nie widac</span></a>

//EDIT
Pierwszy raz widzę taki kod z buttonem : )
Z tego co pamietam, to nie dzialalo takie cuś kiedyś pod IE, nie wiem jak teraz ale i tak radzę zrobić to w foremce
<form action='http://google.pl'>
<input type='submit' value='link' />
</form>
albo po prostu wywalic ten button
nekomata
  1. <a href="#" class="test"></a>

Dziala , tylko jest puste w środku
  1. <a href="#" class="test">Jakis tekst/obiekt/cokolwiek</a>

powinno działać.
Turson
Właśnie chodzi to żeby tekstu nie było ani nic, bo tekst jest na obrazku wbudowany
Mikolaj.on
<a href="LINK"><img src="ścieżka dostępu" alt="Tekst wyświetlany po najechaniu" /></a>
Turson
Ale po najechaniu obrazek ma sie zmienic
troleczek
Spróbuj w JavaScript zrobić takie linki. Przykład daję z innego źródła (http://www.javascript-coder.com/button/javascript-button-p1.phtml).

  1. <a href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" >
  2. <img name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0" alt="javascript button"></a>


Tutaj masz cały stworzony odnośnik.

[JAVASCRIPT] pobierz, plaintext
  1. function changeImage()
  2. {
  3. document.images["jsbutton"].src= "buyit15u.jpg";
  4. return true;
  5. }
  6. function changeImageBack()
  7. {
  8. document.images["jsbutton"].src = "buyit15.jpg";
  9. return true;
  10. }
[JAVASCRIPT] pobierz, plaintext


Tutaj masz funkcję do odnośników. Wydaje mi się, że o to Ci chodziło. Zmień nazwy obrazków na swoje i powinno działać.
nekomata
Zbędny js wystarczy div wstawić zobacz :
  1.  
  2. <a href="www.jakislink.com" >
  3. <div class="test">
  4. </div>
  5. </a>

i :
  1. .test{
  2. width:100px;
  3. height:100px;
  4. background:black;
  5. }
  6. .test:hover{
  7. background:red;
  8. }

Działa sprawdziłem.
prowseed
@up
Toż tu nawet nie ma co sprawdzać.

@topic
Napisałem w swoim pierwszym poście całkowity kod, który podmienia obrazek bez przeladowywania go (co jest bardzo denerwujace). Po prostu sprawdz sobie jak sie w tym przypadku zachowuje obrazek o wyiarach 100x200px i zobaczysz o co mi chodzi.
nekomata
Tylko ty zastosowałeś Span i jakieś wariacje z 1/200 wielkości czcionki , wygląda to niedorzecznie tak samo jak powtórne ustawianie wielkości , to akurat jest totalnie zbędny jeśli wielkość ustawiasz taką samą , klasy typu hover , focus etc dziedziczą po macierzystych . Ogólnie rzecz biorąc lepiej używać Div do obiektów , span do text'u . Czemu?Bo tak powinno być , a nie potem zamiast textarea , masz input'a ... bo przecież tez działa.
Cytat("prowseed")
@up
Toż tu nawet nie ma co sprawdzać.
Napisałem zęby temat można było spokojnie zamknąć a ty tu się , aktualnie twój @topic był tez zbędny , to co napisaliśmy obydwaj działa na tej samej zasadzie.Dobra starczy tego offtupu.
d3ut3r
W pierwszym poście napisałeś

  1. <a href="#" class="test"></a>


Tylko. że <a> jest elementem liniowym (chyba tak to się nazywa smile.gif) więc po prostu najłatwiej nadaj mu display:block; w CSS i po sprawie, innym tematem jest przydatność takiego rozwiązania bo co jeżeli obrazek się nie wczyta ? lub ktoś wyłączy CSS. Moim zdaniem w pliku graficznym trzymaj tło dla przycisku a tekst normalnie w tagu umieszczaj. Gdyby obrazek się nie wczytał to nadal będzie wiadomo do czego ten link jest.
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.