Najprostszy sposób zmiany obrazka po najechaniu myszką

Czasami potrzeba zrobić zmieniający się obrazek po najechaniu myszką w sposób najprostszy z możliwych.

Oto więc on. Najpierw dodajemy krótki skrypt w javascript.

function imgChange( o, img ) {
   o.src = img;
}

Potem już tylko przy osadzaniu obrazka w html’u.

<img onmouseover="imgChange(this, '/img/1b.png')" onmouseout="imgChange(this, '/img/1a.png')" src="/img/1a.png" border="0" />

5 thoughts on “Najprostszy sposób zmiany obrazka po najechaniu myszką

  1. Najgorszy z możliwych sposobów zmiany obrazka.
    Minusy:
    – dwukrotne zaczytanie obrazków
    – zaczytanie 2 obrazka dopiero w momencie zmiany
    – będzie widoczny przeskok
    – zbędne linie kodu.

    Poprzez użycie CSS’a możesz to zrobić poprzez:

    #id {
    background-images: url(‚adres obrazka’);
    background-position: 0px 0px;
    }

    #id:hover {
    background-position: 120px 0px;
    }

    Zaczytujesz obrazek raz, przesuwasz go w wyznaczonym obszarze, zero zabawy z JS i późniejszym szukaniem kodu.

  2. ale CSS zadziała zawsze, a wystarczy noScript i JS już nie działa

  3. Rzeczywiście, jeden z najgorszych sposobów. Zdecydowanie jest to zadanie dla CSS, zwłaszcza w takim kontekście (zmiana obrazka po najechaniu i nic poza tym).

    JS mógłby być uzasadniony przy bardziej złożonych zadaniach, gdzie najechanie na obrazek wyzwala szereg akcji lub jest w takim miejscu, gdzie użycie CSS jest niemożliwe.

  4. A jak zrobić np. w jquery by obrazek zmieniał się cały czas gdy najedziemy na niego myszką ?
    Obrazek 1.jpg a gdy najedziemy myszka do czasu zjechania kursorem obrazka by naprzemiennie zmieniały się na nim obrazki 2.jpg i 3.jpg ?
    Jak to zrobic ?
    pozdrawiam i dzieki

Comments are closed.