Forum PHP.pl > Problem z przyciskami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

lshadown

30.03.2013, 12:58:23

Witam, mam następujący problem: Zastanawiam się jak zrobić aby po kliknięciu przyciskiem na przycisk obrazek, został nad przyciskiem tak długo jak nie klikniemy w inny przycisk.
Na razie mam coś takiego :

[HTML] pobierz, plaintext 
<a href="index.html"><img src="images/oferta-1.gif" width="123" height="104" alt="" onMouseOver="this.src = 'images/oferta_podswietlenie.gif'" onMouseOut="this.src = 'images/oferta-1.gif'"></a>
[HTML] pobierz, plaintext

Wiecie może jak to zrobić ? Czekam na waszą pomoc. Z góry dziękuje : )

PaFaT

6.04.2013, 21:31:05

Drogi(a) lshadown,

aby uzyskać taki efekt należy do każdego elementu przycisku dopisać atrybuty:

[HTML] pobierz, plaintext 
<img ... onclick="wybierzObraz(this); " wybranySRC="images/oferta-wybrana.gif" niewybranySRC="images/oferta-1.gif" />
[HTML] pobierz, plaintext

gdzie atrybut wybranySRC oznacza adres URL obrazka aktywnego (klikniętego), a atrybut niewybranySRC - adres obrazka niewybranego (domyślnego)

a następnie do sekcji <head> dopisać następujący kod:

[HTML] pobierz, plaintext 
<script type="text/javascript">
var aktualnyObraz = null;
 
function wybierzObraz(obj)
{
if(!obj) return;
obj.src = obj.getAttribute("wybranySRC");
if(aktualnyObraz) aktualnyObraz.src = aktualnyObraz.getAttribute("niewybranySRC");
 
aktualnyObraz = obj;
}
</script>
[HTML] pobierz, plaintext

Powinno zadziałać.

PrinceOfPersia

7.04.2013, 05:55:51

Cytat(lshadown @ 30.03.2013, 13:58:23 )

[HTML] pobierz, plaintext 
<a href="index.html"><img src="images/oferta-1.gif" width="123" height="104" alt="" onMouseOver="this.src = 'images/oferta_podswietlenie.gif'" onMouseOut="this.src = 'images/oferta-1.gif'"></a>
[HTML] pobierz, plaintext

Wiecie może jak to zrobić ? Czekam na waszą pomoc. Z góry dziękuje : )

kliknąć czy tylko najechać ? Bo wrzucony przez Ciebie kod raczej wskazuje, że chcesz zbadać najechanie (jeśli tak, to masz w CSS pseudoelement :hover
a:hover img {
display:block;
}
w ten sposób: http://jsfiddle.net/SCLs3/

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.