Światowy Dzień Uśmiechu już wkrótce, bo w pierwszy piątek października. 11 raz na świecie...w Polsce...hm.. piąty... chociaż i tak mało kto o nim wie. Warto dodać, że za świętem stoi nie kto inny jak Harvey Ball, czyli ten, który wymyślił najpopularniejszą ikonę na świecie. Popularnego jeszcze w czasach przedinternetowych żółtego Smiley'a. Można powiedzieć z rozmachem - ojca Smiley'ów (nazywanych często mylnie emoticonami!), czyli żółtych, okrągłych - ostatnio coraz częściej animowanych - buziek, wyrażających emocje.
Po wielu latach przerwy - dzisiejszej nocy wróciłem do zabaw w JavaScripcie. Efekt:
DzieńUśmiechu.konieckropka.eu (Zainteresowanych zapraszam do wsparcia akcji) oraz maleńki skrypcik "mrugający" ukrytymi kawałkami tekstu. Nie mogłem sobie poradzić niestety z jedną współzależnością pomiędzy JavaScriptowym
getElementById().style.background a CSS'owym
:hover
Gdyby ktoś znający się lepiej na tym, łaskawie zechciałby rzucić okiem i powiedzieć, czy coś takiego jest możliwe, bardzo byłbym wdzięczny.
Google nie pomógł.
fragment CSS:
span#happyBox {
background: none;
opacity: 1.0;
}
span#happyBox:hover {
background: green;
opacity: 0.5;
}
fragment JavaScript:
document.getElementById(happyBox).style.background = 'white';
setTimeout("document.getElementById(happyBox).style.background = 'none';", 1000);
Dla formalności fragment HTML:
<span id="happyBox">TEKST</span>
Opis: Tło span
id="happyBox"przy załadowaniu strony jest przezroczyste. Po najechaniu kursorem - zmienia się na zielone. Wywołanie odpowiedniej funkcji JavaScript ustawia kolor tła elementu na biały następnie po sekundzie znów zmienia je na nieprzezroczyste (efekt mrugnięcia).
Niestety od tej pory CSS dotyczący "
span:hover" niejako znika! Ale tylko fragment użyty w JavaScriptcie:
opacity (niezmienione przez
getElementById()) po najechaniu kursorem zmienia się na 0.5, jednak tło
background nie zmienia się już na zielone.
Inwazja JavaScriptu w DOM w tym przypadku jest zbyt duża. Jak zmienić
:hover uzywając
getElementById() ?
Komentarze do wpisu
"2010-09-06 Wpis 365 - Światowy Dzień Uśmiechu i problem z JS":
06 września 2010, 11:56:03
WTF? http://wroclaw.naszemiasto.pl/serwisy/konkursy/*** i "Dziękujemy za ocenę."...
Zupelnie Tobie odwalilo?
EDYTA
"<iframe src="http://wroclaw.naszemiasto.pl/serwisy/konkursy/****" style="width: 70px; height: 80px;" frameborder="0" scrolling="no" seamless></iframe>" No tak...
06 września 2010, 11:58:05
WTF? Jeb*** reklamy. Już usunąłem. Dzięki za info.
06 września 2010, 11:59:08
Samo sie nie dodalo...
06 września 2010, 11:59:51
Wcześniej było bezinwazyjne... Przekierowanie się samo zrobiło... Dziesięć minut temu było wporządku.
06 września 2010, 12:48:17
Nie wiem, jak to ma działać, ale… Ten liniowy styl, który nadajesz w JS, ma prawdopodobnie wyższy priorytet od tego w arkuszu CSS.
Zamiast
style.background = 'none'spróbujstyle.background = '', albo przełączaj klasy na elementach.Ale to tak na ślepo ;)
06 września 2010, 12:49:26
Ekhm... "ma wyższy priorytet"? "przełączaj klasy na elementach" ? .. .a jakoś prościej...? Link dokądś, albo przykład? :/
06 września 2010, 12:53:34
"Ten liniowy styl, który nadajesz w JS, ma prawdopodobnie wyższy priorytet od tego w arkuszu CSS" no oczywiście, że ma, bo jest wykonywany - nadawany po załadowaniu się strony (np. body onload=""). Hm.. A nadanie @important coś by dało? Czy po prostu skrypt wtedy w ogole by niczego nie zmieniał, nawet na chwilę?
06 września 2010, 12:55:01
Jeżeli nadasz elementowi styl przez style="" ma on wyższy priorytet niż nadanie go w CSS.
Np. robisz sobie:
a {
color: red;
}
a potem <a href="#" style="color: blue">link</a> to link będzie niebieski a nie czerwony.
Zamiast (...).style.background='none' rób tak jak zasugerował Wasacz (...).style.background = '';
Albo zamiast bawić się ze style zmieniaj klasę elementu (getElementById('X').className = 'nowaKlasa';).
06 września 2010, 12:56:37
@BTM, dzięki... Ale tego z "style="color:blue" nie musiałeś pisać, naprawdę ;) :D
Spróbuję waszych porad. .className nie znałem wcześniej :D może się kiedyś przydać. Dzięki.
05 października 2010, 17:34:15
Dzięki, fajnie to wygląda :)
Dodaj komentarz: