JS na zmiane obrazka

Dla specjalistów Webmastering
#1

Witajcie,

Zacząłem naukę JS od strony kursjs.pl , jednakże znalazłem tam kilka błędów (literówki, brakujące nawiasy),

dzięki którym trochę kodów nie działa. Mimo tego przeglądałem “kurs” dalej, ponieważ tłumaczenie skryptów było w miare jasne.

Aż natknąłem się na taki oto kodzik, który mnie bardzo zainteresował :

 

Założeniowo, ten kod ma za zadanie zmianę zdjęcie “nazwa”_on.jpg na “nazwa”_off.jpg po kliknięciu na niego myszką a po dblkliku ma wrócić “nazwa”_on.jpg . Moja przeróbka kodu polega na zamienie onmouseover na onclick i onmouseout na ondblclick. Oryginalny kod znajduje sie tutaj : http://kursjs.pl/kurs/obrazki.html (dział efekt roll over dla wiekszej ilosci obrazkow).  

 

Jaki mam problem? Nie wiem jak wstawic zdjecia w html-u, tak aby pasowaly do tego kodu. Znam tag <img src=“nazwa”> jednakże nie wiem co po nim wpisac tak aby wszystko ładnie działało. Czy jest ktoś w stanie mi pomóc? + Jak przerobić ten kod tak aby przy pierwszym kliknięciu pokazywał się obrazek “nazwa”_off.png a po drugim znów “nazwa”_on.png. Jeśli coś napisałem niezrozumiale, pytajcie postaram się wytłumaczyć. :smiley:

 

#2 
document.getElementById('obrazek')

Wskazuje na to, że obrazek powinien mieć id=“obrazek”:

<img src="..." id="obrazek" />
#3

Mój kod wygląda tak :

<html>
<body>
<img src="1_on.jpg" id="obrazek" />
<img src="2_on.jpg" id="piesek" />
<img src="3_on.jpg" id="kotek" />

<script type="text/javascript">
var nazwy = new Array('obrazek', 'piesek', 'kotek', 'czekolada')
for (x=0; x<nazwy.length; x++) {
    var obr[x] = new Array();
    obr[x]['on'] = new Image();
    obr[x]['on'].src = nazwy[x]+'_on.jpg';
    obr[x]['off'] = new Image();
    obr[x]['off'].src = nazwy[x]+'_off.jpg'
}
 
document.getElementById('obrazek').onclick = function() {
    this.src = obr[1]['on'];
}
document.getElementById('obrazek').ondblclick = function() {
    this.src = obr[1]['off'];
}
</script>
</body>
</html>

I teoretycznie powinien działać, ale w praktyce nie działa. Coś nie tak wpisałem, czy sam kod ma jakiś błąd?

#4

A przypadkiem nie potrzebujesz do tego kodu podpiętej pod stronę biblioteki jquery? :wink:

#5

@mani

 

 

Szczerze? 

Jestem zielony w tym temacie, i nie wiem o co dokładnie chodzi. :confused:

#6

Tak podpinasz bibliotekę jq pod stronę (hosting google’a, można również taki plik pobrać i ładować go z własnej strony/serwera), jest to wymagane do działania skryptów:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
...

Bez takiego dopisku kod js byłby o wiele dłuższy… strona, którą podałeś też ma podobny wpis (różni się wersją biblioteki).

#7

To jest js, z tym że kiepsko napisany. Poza tym wywala błędy w konsoli.

ID masz jedno, więc funkcje w stanie w jakim jest powinieneś powielić tyle razy ile jest obrazków. Tablica nazwa powinna mieć nazwy obrazków wraz ze początkiem ścieżki docelowe. Poza tym js to nie php, tam nie zawsze można raz sobie deklarować zmienne, a raz nie.

 

Gość korzysta z obiektu image a nie wie co ona robi. Olej ten kurs bo niczego się nie nauczysz. Polecam ten na stronie mozilli (eng)

#8

Kurde, szkoda , bo troche tam przesiedzialem.

Ale dzięki za rady, w takim razie sprawdze ten mozilli.

#9

Nie ucz się  dla samej nauki, wymyśl sobie jakieś zadanie / projekt i stwórz go. Szukaj odpowiedzi w necie a jak nie znajdziesz, albo nie będziesz wiedział jak szukać to wrzuć pytanie na forum .

#10

a sorry widzisz gdzieś w kodzie choć być jedno użycie jquery ??

 

ludzie bez tego też można żyć i robić dokładnie to samo. jquery tylko ułatwia - ale komuś kto wie co chce zrobić, nie zrobi za ciebie wszystkiego!

<html>
<body>
<img src="1_on.png" id="img1" />
<img src="2_on.png" id="img2" />
<img src="3_on.png" id="img3" />

<script type="text/javascript">
var nazwy = ['1', '2', '3'];
var obr = [];
for (x=0; x<nazwy.length; x++) {
    obr.push({on:null, off:null});
    obr[x]['on'] = new Image();
    obr[x]['on'].src = nazwy[x]+'_on.png';
    obr[x]['off'] = new Image();
    obr[x]['off'].src = nazwy[x]+'_off.png'
}

document.getElementById('img1').onclick = function() {
    this.src = obr[0]['on'].src;
}
document.getElementById('img1').ondblclick = function() {
    this.src = obr[0]['off'].src;
}

</script>
</body>
</html>

dla swojej analizy zmieniłem nazwy plikow i id obiektow;

 

ogolnie chodzilo o dwa problemy:

var obr[x] = new Array();
  1. tak sie nie deklaruje tablic w JS

 

  1. zmiana src musi byc zadeklarowana w ten sposob:

    this.src = obr[0][‘off’].src

#11

No dokładnie tam miałem błąd.

Wieć albo

this.src = obr[1]['on'].src

albo 

this = obr[1]['on']

ale napewno nie:

this.src = obr[1]['on']

Tak na logikę.