Forum PHP.pl

Chcę zrobić, że po najechaniu kursorem na obrazek, który jest linkiem zmienia się w inny.

Próbwałem;

[CSS] pobierz, plaintext 
.test{
background-color:red;
width:100px;
height:100px;
}
.test:hover{
background-color:black;
width:100px;
height:100px;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a href="#" class="test"></a>
[HTML] pobierz, plaintext 

Ale to nie to..

natomiast działa

[HTML] pobierz, plaintext 
<a href="www.google.pl">
<button type="button" class="test"></button></a>
[HTML] pobierz, plaintext 

ale czy to jedyne wyjscie?

Ten post edytował TursoN 18.02.2011, 21:56:44

Nic dziwnego, ze nie dziala, skoro zmieniasz tlo, a to z kolei jest zakryte przez obrazek

[CSS] pobierz, plaintext 
span .cos{
background:url('obrazek.jpg') top left no-repeat;
width:100px;
height:100px;
font: Arial 1px/200px;
text-indent:9999px;
}
span .cos:hover{
background:url('obrazek.jpg') bottom left no-repeat;
width:100px;
height:100px;
}
[CSS] pobierz, plaintext 

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

Ten post edytował prowseed 18.02.2011, 23:25:07

[HTML] pobierz, plaintext 
<a href="#" class="test"></a>
[HTML] pobierz, plaintext 

Dziala , tylko jest puste w środku

[HTML] pobierz, plaintext 
<a href="#" class="test">Jakis tekst/obiekt/cokolwiek</a>
[HTML] pobierz, plaintext 

powinno działać.

Właśnie chodzi to żeby tekstu nie było ani nic, bo tekst jest na obrazku wbudowany

<a href="LINK"><img src="ścieżka dostępu" alt="Tekst wyświetlany po najechaniu" /></a>

Ale po najechaniu obrazek ma sie zmienic

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).

[HTML] pobierz, plaintext 
<a href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" >
<img name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0" alt="javascript button"></a>
[HTML] pobierz, plaintext 

Tutaj masz cały stworzony odnośnik.

[JAVASCRIPT] pobierz, plaintext 
function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}
function changeImageBack()
{
 document.images["jsbutton"].src = "buyit15.jpg";
 return true;
}
[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ć.

Zbędny js wystarczy div wstawić zobacz :

[HTML] pobierz, plaintext 
 
<a href="www.jakislink.com" >
<div class="test">
</div>
</a>
[HTML] pobierz, plaintext 

i :

[CSS] pobierz, plaintext 
.test{
width:100px;
height:100px;
background:black;
}
.test:hover{
background:red;
}
[CSS] pobierz, plaintext 

Działa sprawdziłem.

@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.

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.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.

Ten post edytował nekomata 23.02.2011, 01:35:02

W pierwszym poście napisałeś

[HTML] pobierz, plaintext 
<a href="#" class="test"></a>
[HTML] pobierz, plaintext 

Tylko. że <a> jest elementem liniowym (chyba tak to się nazywa ) 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.