MozillaPL.org - polskie centrum Mozilli

Główne menu:

[js] atrybut "id" zamiast "name" w xhtml

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Odpowiedz

[js] atrybut "id" zamiast "name" w xhtml

Postautor: MusK » 11 grudnia 2005, 07:30

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

Jest sobie taki JavaScript:
Kod: Zaznacz cały
<script type="text/javascript">
//<![CDATA[

<!--
  if (document.images) {
var obrazekf = new Image();
obrazekf.src = "obrazek-jasny.png";
var obrazeko = new Image();
obrazeko.src = "obrazek.png";
}

function act(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "o.src");
}

function inact(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "f.src");
}

// -->
//]]>
</script>

Całość działa w każdej przeglądarce internetowej pod warunkiem, że obrazek, którego dotyczy skrypt ma przypisany atrybut "name" (name="obrazek"). Jak wiadomo XHTML 1.0 Strict nie pozwala uzywać atrybutu "name" i zamiast tego należy stosować "id". Niestety po zamianie "name" na "id" skrypt ten działa tylko w Firefoksie. Skrypt powoduje zamianę jednego obrazka na drugi - zamienia ciemy na jaśniejszy po dodaniu do atrybutów obrazka:
Kod: Zaznacz cały
onmouseout="act('obrazek')" onmouseover="inact('obrazek')"


Pytanie: Jak zmodyfikować JavaScript (lub atrybuty obrazka), by skrypt działał w innych przeglądarkach (IE, Konqueror)? Zamiana imgName na imgId nic nie daje...

Pozdrawiam,
MusK
MusK
 
Posty: 249
Z nami od: 13 lutego 2004, 01:08
Na górę

Postautor: Zajec » 11 grudnia 2005, 09:23

Przeglądarka: Opera/8.10 (X11; Linux i686; U; pl)

Kod: Zaznacz cały
document[imgName].src = eval(imgName + "o.src");
document[imgName].src = eval(imgName + "f.src");
myślałem, że już przestano rozpowszechniać takie skrypty :-|
Kod: Zaznacz cały
function act(imgid) {
document.getElementById(imgid).src = imgid + 'o.src';
}

function inact(imgid) {
if (document.images)
document.getElementById(imgid).src = imgid + 'f.src';
}
Opera, Firefox, Konqueror, IE>4
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek
Na górę

Postautor: MusK » 11 grudnia 2005, 10:54

Przeglądarka: Opera/9.0 (Windows NT 5.1; U; pl)

Dziękuję Zajec!!!

Już wszystko działa, z tym, że skrypt musiałem lekko zmodyfikować:
Kod: Zaznacz cały
function act(imgid) {
if (document.images)
document.getElementById(imgid).src = eval(imgid + 'o.src');
}

function inact(imgid) {
if (document.images)
document.getElementById(imgid).src = eval(imgid + 'f.src');
}

(musiałem wstawić eval i nawiasy)

Zajec pisze:myślałem, że już przestano rozpowszechniać takie skrypty :-|

Kiedyś (ponad rok temu) potrzebowałem prostego skryptu do zmiany obrazka po najechaniu na niego kursorem myszki. Wszystko działało poprawnie w każdej przeglądarce, nie było z tym żadnych problemów, więc nie zagłębiałem się w tematykę tego skryptu (i w ogóle JS). Problem pojawił się, gdy zachciało mi się stosować "id" zamiast "name"... W każdym razie jeszcze raz dziękuję!

Pozdrawiam,
MusK
MusK
 
Posty: 249
Z nami od: 13 lutego 2004, 01:08
Na górę

Postautor: Zajec » 11 grudnia 2005, 15:09

Przeglądarka: Opera/8.10 (X11; Linux i686; U; pl)

Hm, myślałem, że zadziała jak wyrzucę eval.

Tylko usuń może jeszcze
Kod: Zaznacz cały
if (document.images)
bo w tej chwili jest to nieco bez sensu :-)

Serwujesz kod nie wymagający document.images tylko tym przeglądarkom, które obsługują document.images :-)
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek
Na górę

Postautor: MusK » 12 grudnia 2005, 04:00

Przeglądarka: Opera/9.0 (Windows NT 5.1; U; pl)

Rzeczywiście wpis
Kod: Zaznacz cały
if (document.images)
jest niepotrzebny :) . Natomiast próbowałem usuwać eval (zostawiałem same nawiasy), ale efekt było podobny jak w przypadku
Kod: Zaznacz cały
document.getElementById(imgid).src = imgid + 'f.src';

Bez eval skrypt działa tylko pod Firefoksem 1.5. Natomiast w przypadku Internet Explorer 6SP2 oraz Opery 9 po najechaniu myszką na miejsce, któego dotyczy ten JS, obrazek znika (wyświetla się atrybut "alt" obrazka).

Pozdrawiam,
MusK
MusK
 
Posty: 249
Z nami od: 13 lutego 2004, 01:08
Na górę

Postautor: at » 17 grudnia 2005, 10:33

Przeglądarka: Opera/8.02 (Windows NT 5.1; U; en)

Moze ktoś napisze ktory skrypt jest ostateczna ( prawidlowa ) wersja i jak go zaimplementowac ( poprawnie )
at
 
Na górę

Postautor: MusK » 17 grudnia 2005, 17:34

Przeglądarka: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; pl) Opera 9.0

W sekcji <head> dokumentu wstawiasz coś takiego (jeśli JS jest w pliku HTML):
Kod: Zaznacz cały
<script type="text/javascript">
//<![CDATA[

<!--
  if (document.images) {
var obrazekf = new Image();
obrazekf.src = "img/obrazekm.png";
var obrazeko = new Image();
obrazeko.src = "img/obrazek.png";
}

function act(imgid) {
document.getElementById(imgid).src = eval(imgid + 'o.src');
}

function inact(imgid) {
document.getElementById(imgid).src = eval(imgid + 'f.src');
}

// -->
//]]>
</script>

Następnie do atrybutów obrazka, którego ma dotyczyć ten JS dodajesz (w tym wypadku):
Kod: Zaznacz cały
onmouseout="act('obrazek')" onmouseover="inact('obrazek')" id="obrazek"


Jeśli chciałbyś dodać więcej niż jeden obrazek, musisz dodać w nagłówku:

Kod: Zaznacz cały
<script type="text/javascript">
//<![CDATA[

<!--
  if (document.images) {
var obrazekf = new Image();
obrazekf.src = "img/obrazekm.png";
var obrazeko = new Image();
obrazeko.src = "img/obrazek.png";
var obrazek_numer-2f = new Image();
obrazek_numer-2f.src = "img/obrazek_numer-2m.png";
var obrazek_numer-2o = new Image();
obrazek_numer-2o.src = "img/obrazek_numer-2.png";
}

function act(imgid) {
document.getElementById(imgid).src = eval(imgid + 'o.src');
}

function inact(imgid) {
document.getElementById(imgid).src = eval(imgid + 'f.src');
}

// -->
//]]>
</script>

(funkcje pozostają bez zmian)
Następnie dodajesz odpowiednie wartości onmouseout, onmouseover oraz id dla kolejnego obrazka.

Pozdrawiam,
MusK
MusK
 
Posty: 249
Z nami od: 13 lutego 2004, 01:08
Na górę
Odpowiedz

Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Google [Bot]

Powered by phpBB® Forum Software © phpBB Group
Przejdź do powiązanej strony

Nawigacja:

Stopka: