Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Skrypt do kontroli zdarzeń onmouseover - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Skrypt do kontroli zdarzeń onmouseover (/thread-skrypt-do-kontroli-zdarzen-onmouseover)



Skrypt do kontroli zdarzeń onmouseover - lakmus - 17-11-2011

Witam,

Zrobiłem menu w gimpie przy użycia filtra image map
wszystko pięknie działa, ale chciałbym dodać jakiś efekt podczas najeżdżania kursorem na napis w menu.
Zdobyłem skrypt kontrolujący onmouseover, tylko, że coś nie działa, moze ktoś zechciałby mnie oświecić, co jest nie tak? Pozdrawiam
Oto kod:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>

<div id="node1">
<img src="logo5.jpg" width="1011" height="1225" border="0" usemap="#map" />
<map name="map">
<area id="areaobraz" shape="rect" coords="731,78,819,122" onmouseover="podmiana(1)" onmouseout="podmiana(2)" href="file:/news.html" />
</map>
</div>
</html>


Utworzyłem plik skrypt.js

var x = 0;
function podmiana(x){
areaobraz = document.getElementById['areaobraz'];
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}
} lakmus

Posty: 7
Dołączył(a): piątek, 09 paź, 2009 20:02
Cytuj zaznaczonePrywatna wiadomość


RE: Skrypt do kontroli zdarzeń onmouseover - Kartofelek - 17-11-2011

Google -> css menu tutorial
To co robisz gorzej zrobione być nie morze


RE: Skrypt do kontroli zdarzeń onmouseover - lakmus - 08-12-2011

(17-11-2011, 03:33)Kartofelek napisał(a): Google -> css menu tutorial
To co robisz gorzej zrobione być nie morze

Najpierw sie naucz ortografii, potem się wypowiadaj, albo lepiej nie, bo twoja "konstruktywna" krytyka nic nie wnosi panie mądry.


RE: Skrypt do kontroli zdarzeń onmouseover - Kartofelek - 08-12-2011

No dobrze. Za literówkę kłaniam się i liżę stopy.

Tym razem będzie bardziej konstruktywnie:

Kod:
<div id="node1">
<img src="logo5.jpg" width="1011" height="1225" border="0" usemap="#map" />
<map name="map">
<area id="areaobraz" shape="rect" coords="731,78,819,122" onmouseover="podmiana(1)" onmouseout="podmiana(2)" href="file:/news.html" />
</map>

Akurat ten kawałek kodu jest totalnie bez sensu. Użyta technika była popularna w latach bodajże 90? Po pierwsze NIE UŻYWAMY deklaracji zdarzeń inline.

http://doman.art.pl/kursjs/kurs/events.html <- Rejestrowanie zdarzenia inline

Po drugie do tak prostej rzeczy jak podmiana obrazka NIE STOSUJE się ani JS, ani mapy. Jest to po prostu wbrew logice. Używa się natomiast ostylowanych linków lub pasujących elementów html

Dałem ci hasło które powinieneś wpisać w google. Linków konkretnych ci nie dałem, bo jak byś je jednak w google wpisał, wyskoczyło by ci milion tutoriali prowadzących za rączkę JAK TAKIE MENU SIĘ ROBI.

Ale moja krytyka ma być konstruktywna więc jedziemy dalej:

Kod:
var x = 0;
function podmiana(x){
areaobraz = document.getElementById['areaobraz'];
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}
}

- używanie globalnej zmiennej x do takiej rzeczy? BŁĄD. Nie mały. Duży.

- deklarowanie zmiennej w funkcji bez var - DUŻY BŁĄD. http://doman.art.pl/kursjs/kurs/zmienne.html <- zasięg zmiennych

- document.getElementById['areaobraz'] ?? - skąd nawiasy kwadratowe?? - http://doman.art.pl/kursjs/kurs/hierarchia/hierarchia_nody.html <- pobieranie nodów

Kod:
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}

o wiele lepiej:

Kod:
areobraz.className = (x)?'cien1':'cien2';
//lub
areobraz.style.background = (x)?'cien1.gif':'cien2';

Używaj klas zamiast zamiany styli w JS. Czemu? Bo zabezpieczysz się na przyszłość.

I jak? Tym razem było konstruktywnie? Fajna sprawa pojawić się na forum i od początku agresywnie z łapami rzucać się na ludzi, którzy NIE MUSZĄ ci pomagać. Nic a nic nie muszą. A może chcą?

A jako praca domowa przeczytaj pierwsze opowiadanie:
http://porcelanka.wordpress.com/2011/06/16/przypowiesc-xiii/


RE: Skrypt do kontroli zdarzeń onmouseover - lakmus - 09-12-2011

Po pierwsze się nie rzucam, tylko bronię (to diametralna różnica) a po drugie dziękuję za (tym razem) konstruktywną wypowiedź Smile


RE: Skrypt do kontroli zdarzeń onmouseover - Kartofelek - 09-12-2011

No i tak trzymaj Big Grin