Onclick + onmouseover + onmouseout w jednym elemencie

0

Witam serdecznie,

chciałbym zrobić, aby po kliknięciu, najechaniu oraz przesunięciu kursora z na określonego elementu, zmieniało się źródło obrazka innego.

Aktualnie posiadam taki kod:

echo("<TD onclick=\"document.getElementById('intel').src = 'img/1.png'; document.getElementById('nissan').src = 'img/2.png'\" onmouseover=\"document.getElementById('intel').src = 'img/1.png'; document.getElementById('nissan').src = 'img/2.png'\" onmouseout=\"document.getElementById('intel').src = 'img/1cb.png'; document.getElementById('nissan').src = 'img/2cb.png'\">");

Działa tylko onmouseover i onmouseout.

Jak "uaktywnić" onclick?

Z góry dziękuję i pozdrawiam,
badyllek1993

0

W sumie mi działa jak sobie dorobiłem resztę kodu :D

Wyświetl coś więcej kodu!

Chociaż skoro piszesz, że tylko "onClick" nie działa to bardzo dziwne.

0

@dzek69 - link wymoderowano: złośliwe oprogramowanie

Podany wyżej kod dotyczy pól w kalendarzu, które są oznaczone czerwoną obwódką. Po najechaniu na takie pole, określone logo powinno się podświetlać (zmiana "src"). Po kliknięciu na określoną datę ma się wysuwać etykieta (co jest zrobione) i loga mają się podświetlać.

0

Teraz to obserwuję i skąd wiesz, że onClick nie działa, skoro w twoim przypadku onmouseover daje ten sam rezultat?

0

Faktycznie tak może być, że onclick działa, ale onmouseout ustawia obrazki pierwotne. W takim razie jak zrobić, żeby po kliknięciu loga firm się zapalały i świeciły do tego momentu, aż nie zamknie się wysuwającej się etykiety?

1

Po pierwsze - usuń syfy ze swojego komputera, potem zmień hasło do wszystkich ftp i serwisów do których ostatnio się logowałeś, a przede wszystkim używałeś w jakichś programach opcji "zapamiętaj hasło".

Po drugie - totalnie źle się za to bierzesz.
Nie ładuj do każdego td tyle kodu.
Zrób coś takiego:

<td onclick="setActive(this, 1);" onmouseover="setHighlight(this, 1);" onmouseout="setHighlight(this, 0);" data-active-img="/sciezka/do/obrazka.jpg" data-inactive-img="/sciezka/do/nieaktywnego.jpg" data-image-id="nissan">...</td>

a w pliku z javascriptem:

function setActive(obj, state) {
  obj.setAttribute('data-active', state); // ustawiasz atrybyt "data-active" dla TD który pomoże rozpoznać czy trzeba coś podświetlać
}

function setHighlight(obj, state) {
  var isActive = obj.getAttribute('data-active'); // czy jest aktywny
  var id = obj.getAttribute('data-image-id'); // pobierasz id obrazka do którego się odwołujesz
  if (state==1 || (state==0 && isActive!=='0') { // wybieramy odpowiedni obrazek jeżeli najechano myszą, bądź odsunięto mysz ORAZ element nie jest aktywny
    var src;
    if (state==1) { // jeżeli najechano wybieramy ścieżkę do obrazka po najechaniu
      src = obj.getAttribute('data-active-img');
    }
    else { // albo tę drugą ścieżkę, gdy odsunięto mysz
      src = obj.getAttribute('data-inactive-img');
    }
    document.getElementById(id).src=src; // przypisujemy do obrazka wartość
  }
}

Gdybyś użył jQuery (da się i bez tego, ale już nie komplikujmy) to dodatkowo cały kod mógłby wyglądać zdecydowanie krócej, jeżeli obrazek, którego ścieżkę chcesz zmienić zawiera się w tym <td> to jeszcze lepiej - można go odszukać skryptem, zamiast podawać jego ID. I w kodzie HTML byłoby tylko np.:

<td data-active="0">
<img src="/jakas sciezka" data-active-img="/sciezka.jpg" data-inactive-img="/sciezka2.jpg" />
</td>

i ... tyle po stronie HTML.

Rozdzielenie kodu JS i HTML pozwala na:

  • krótszy kod
  • czytelniejszy kod
  • mniejsze utrudnienia we wstawianiu miliona zmiennych w php

Cóż, moim zdaniem naturalna kolejność nauki webmasteringu (z php) to: HTML, potem CSS, potem JS, potem dopiero kiedy wszystko ładnie ogarniasz - PHP.

0

Ze względu na "złośliwe oprogramowanie", całość przeniosłem tutaj:
http://test.turisticus.pl/hotels/wyszukiwarka/kalendarz2

Edit:
No niestety nie potrafię sobie z tym poradzić. Dodałem kod jaki podał kolega wyżej, wstawiłem odpowiednie odnośniki do obrazków i nic.

Poprawiłem nawet linijkę:
if (state==1 || (state==0 && isActive!=='0')
i zamknąłem nawias, ale dalej nic. Teraz ani się nie podświetla przy najechaniu, ani po kliknięciu...

0

wrzuć tylko ISTOTNY kod na jsbin.com (nie całą stronę, a tylko to, co jest istotą problemu), będziemy coś radzić.

1 użytkowników online, w tym zalogowanych: 0, gości: 1