Mateusz Grużewski

Mateusz Grużewski Software Developer

Temat: Problem z stroną www

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 :

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

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

konto usunięte

Temat: Problem z stroną www

Musisz dopisać "skrypt" i nadać atrybuty id przyciskom.

Skoro się uczysz z pewnością lepiej będzie jak sam stworzysz kod według wskazówek:
1. Musisz przypisać funkcje do zdarzeń onClick poszczególnych przycisków
2. Funkcja taka powinna:
- usuwać zdarzenie onMouseOut za pomocą metody removeEventListener()
- sprawdzać czy "uchwyt do przycisku" o którym napisałem poniżej jest pusty, jeśli nie jest to należy dodać do tego przycisku zdarzenie onMouseOut
- zapisywać do jakiejś zmiennej uchwyt aktualnie klikniętego przycisku np jako jego id lub wartość zwróconą przez document.getElementById()
Mateusz Grużewski

Mateusz Grużewski Software Developer

Temat: Problem z stroną www

Dziękuje będę próbował coś napisać. CSS j JS dopiero się uczę , ale te rady na pewno mi się przydadzą. Lepiej mi idzie pisanie w Java : )
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Problem z stroną www

No to po kolei.

1. Stan guzików można przedstawić przy pomocy jednego obrazka. W górnej połowie dajemy fragment widoczny normalnie, poniżej fragment widoczny po najechaniu myszką. Dzięki temu po połączeniu mamy szansę na uzyskanie mniejszego obrazka niż dwa pojedyncze (warto sprawdzić czy png da lepszy rezultat niż gif).
2. Kod js bezpośrednio w kodzie strony działa, ale wprowadza niekiedy zamęt i czasami nie zadziała jak trzeba (ten z podświetlaniem powinien działać wszędzie).
3. Zamiast czystego js (który w zależności od twórców przeglądarek różnie działa) warto użyć jakiegoś gotowca w postaci jQuery czy MooTools.
4. I nadeszła pora na właściwą część. Kod podany w pierwszym poście odpowiada nie za kliknięcie, a najechanie myszką na obrazek. Jak więc to ma być zrobione? Jeśli zgodnie z przedstawionym przykładem, to robimy to następująco:

<div id="#id_elementu"><ul><li class="el1"><a href="adres">tekst</a></li><li class="el2"><a href="adres">tekst</a></li></ul>

w css robimy:

#id_elementu li.el1 {
background-image: url( obrazek1.png ) ;
display: inline-block ;
width: ...px ;
height: ...px ;
}

#id_elementu li.el1:hover {
background-position: 0 -...px ;
}

li.el1 a {
display: block ; width: 100% ; height: 100% ; text-indent: -9999px ;
}

Pisane z pamięci, możliwe, że coś przeoczyłem albo dodałem niepotrzebnie. Szerokość i wysokość należy wpisać zgodnie z wymiarami połówki obrazka. Pozycję tła przesuwamy o -liczba piksli (czyli też o połowę wysokości obrazka).

Do takiej podmiany obrazków nie jest potrzebny js.

Następna dyskusja:

Problem: Wstawienie filmu z...




Wyślij zaproszenie do