Loading:


Zmiana obrazka po najechaniu myszą (dynamiczne przyciski)

Skrypt zmienia obrazek po najechaniu na niego myszą wykorzystując do tego zdarzenie onMouseOver i onMouseOut.

Aby skrypt zadziałał do katalogu w którym odpalasz skrypt dodaj dwa obrazki o nazwie

obrazek1_on.gif i obrazek1_off.gif



Napisz Artyku³

Listing


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE= "JavaScript" type= "text/javascript">
<!-- Ukrycie przed przeglądarkami nie obsługującymi JavaScript
obrazek1_on = new Image(100, 50);
obrazek1_on.src = "obrazek1_on.gif";
obrazek1_off = new Image(100, 50);
obrazek1_off.src = "obrazek1_off.gif";

function img_act(pic)
{
  document[pic].src = eval(pic + "_on.src");
}
function img_deact(pic)
{
  document[pic].src = eval(pic + "_off.src");
}
// Koniec kodu JavaScript -->
</SCRIPT>
</HEAD>

<BODY>
<IMG
  NAME="obrazek1"
  SRC="obrazek1_off.gif"
  onMouseOver="img_act('obrazek1')"
  onMouseOut="img_deact('obrazek1')"
>
</BODY>
</HTML>




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
A jak to zrobić by wiele obrazków na jednej stronie działało? Jak Robie jeden to mi chodzi a jak dwa to tylko dalej jeden chodzi, albo ten albo ten. Wszystkie na raz nie chodzą
autor: terlik87@interia.pl | 50 | 2009-01-14 13:23:01


Proste np mam trzy buttony obrazek1 obrazek2 obrazek3
  • Zobacz kod dodany do tego wpisu
    • obrazek1_on = new Image(100, 50);
      obrazek1_on.src = "obrazek1_on.gif";
      obrazek1_off = new Image(100, 50);
      obrazek1_off.src = "obrazek1_off.gif";

      obrazek2_on = new Image(100, 50);
      obrazek2_on.src = "obrazek2_on.gif";
      obrazek2_off = new Image(100, 50);
      obrazek2_off.src = "obrazek2_off.gif";

      obrazek3_on = new Image(100, 50);
      obrazek3_on.src = "obrazek3_on.gif";
      obrazek3_off = new Image(100, 50);
      obrazek3_off.src = "obrazek3_off.gif";


      // a tu 3 obrazki

      <IMG
        NAME="obrazek1"
        SRC="obrazek1_off.gif"
        onMouseOver="img_act('obrazek1')"
        onMouseOut="img_deact('obrazek1')"
      >

      <IMG
        NAME="obrazek2"
        SRC="obrazek2_off.gif"
        onMouseOver="img_act('obrazek2')"
        onMouseOut="img_deact('obrazek2')"
      >

      <IMG
        NAME="obrazek3"
        SRC="obrazek3_off.gif"
        onMouseOver="img_act('obrazek3')"
        onMouseOut="img_deact('obrazek3')"
      >
autor: Igor | 51 | 2009-01-14 21:29:53


szkoda tylko, że to nie działa pod IE, wywala błąd :|
autor: SzukamRozwiązania | 82 | 2009-02-02 14:08:58


Sprawdź dokładnie konsole firebuga czy nie informuje o jakiś błędach, i czy jest poprawny kod JavaScript
autor: Igor | 83 | 2009-02-02 19:13:08


A jak to zrobić na przykładzie div? .menu_gorne_ofirmie{ width: 137px; height: 129px; position: relative; background: url(img/marian_11.jpg); float:left; }
autor: norr | 271 | 2009-06-17 21:51:27


    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2020 v.1.5 | design: diviXdesign & rainbowcolors