Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: 1 [2]  Wszystkie
DrukujPobierz PDF
Autor Wątek: [Css] hover  (Przeczytany 11872 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
noss
Użytkownik

Reputacja: 41 Offline Offline

Płeć: Mężczyzna
GIMP: 2.8 + GAP
Licencja: Copyright
Wiadomości: 1 384
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #14 : 31.07.2007, 23:39:50 »

przy divie w js wystarczy dodać jedynie kolor po najechaniu, pozostałe dane umieszczasz w css tak jak podałeś na początku.
Zapisane

dejw
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44
Galeria Użytkownika

dejw


Zobacz profil
« Odpowiedz #15 : 01.08.2007, 07:35:26 »

Powtórzę się, ale ciągle wydaje mi się, że zdarzenie "hover" działa wyłącznie ze znacznikiem "a".
Onmouseover powinno działać jak najbardziej.
... przeciez mowilem ze dziala  Mrugnięcie to mowiles cos o odnosniku...  Co?
Tak tak ... wiem że tak zadziała ale nie chcę przy każdym divie dodawać tych stylów (w pliku index.htm)... więc pytam czy da się to do pliku ze stylami wywalić...(wywalić do pliku style.css)... Duży uśmiech

dave, przepraszam ale widzę że nie masz o tym pojęcia...  laugh ja nie chcę utworzyć żadnego odnośnika tylko chcę aby tło zmieniało swój kolor po najechaniu... w zasadzie to kolor i fakture.. znaczy się deseń... Język

i sam to przyznales ze wiesz ze zadziala wiec o co chodzi? kto nie ma pojecia?!? poszedles po rozum do glowy? nie wiem czy to cos ta, ale mam nadzieje ze mozna w skrypcie do onmouseover umiescic zmiane klasy danego obiektu? dla przykladu:
Kod:
onmouseover="this.clsss ='div_podswietlony'"
onmouseover="this.clsss ='div_nie_podswietlony'"
nigdy tak nie probowalem wiec nie jestem pewien czy to zadziala  Język

to moze byc jednym ze sposobow wrzucenia tego do stylow. drugim sposobem ( ale nie wrzucenia do pliku stylow ) jest umieszczenie osobnej, tylko jednej,funkcji javy, na poczatku Twojego kodu ( podam caly maly przykladowy kod strony ):

Kod:
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="podswietlenie.gif"
}
function mouseOut()
{
document.b1.src ="nie_podswietlenie.gif"
}
</script>
</head>

<body>
<a href="adresik" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="bla bla bla"
src="nie_podswietlenie.gif" name="b1" /></a>
</body>
</html>

w tym przypadku wszystko piszesz jeden raz i nazywasz swoje div "b1". dodajesz im tylko odpowiednie funcje do onmouseover itp. tylko nie mow ze nie chcesz zrobic odnosnikow bo to jest przyklad!!!  Duży uśmiech chce Ci dac wedke a nie od razu rybke  Język
Zapisane
marecki_
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180
Galeria Użytkownika

marecki_


Zobacz profil
« Odpowiedz #16 : 01.08.2007, 11:04:33 »

Gdzie tam JS, pfff

Zawsze można zrobić pusty, niewidoczny odnośnik. Metoda nieelegancka, ale trzeba czasem takiej użyć Uśmiech
I wtedy rollover ładnie zaimplementować
Zapisane
dejw
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44
Galeria Użytkownika

dejw


Zobacz profil
« Odpowiedz #17 : 01.08.2007, 22:41:22 »

Gdzie tam JS, pfff
jest to jakies rozwiazanie, ale zawsze java jest czytelna ( mozemy jej nie lubiec i nie umiec - ja nie umiem, ale korzystac mozna  Język) rollover bedzie dzialac, moze "nielelegancko" ale to przeciez nie wybory miss swiata - chodzi o samo dzialanie a nie o piekno ( tak mysle w tym wypadku ), chyba ze mamy do czynienia z ortoksyjnymi purystami html'a   Duży uśmiech

Zawsze można zrobić pusty, niewidoczny odnośnik. Metoda nieelegancka, ale trzeba czasem takiej użyć Uśmiech
I wtedy rollover ładnie zaimplementować
ale wiesz...
dave, przepraszam ale widzę że nie masz o tym pojęcia...  laugh ja nie chcę utworzyć żadnego odnośnika tylko chcę aby tło zmieniało swój kolor po najechaniu... w zasadzie to kolor i fakture.. znaczy się deseń... Język
... nie "chcemy" robic zadnych odnosnikow...TYLKO zmieniajace sie desenie  Duży uśmiech ja bym tam zaniechal samego dib i robil na tebeli, bo mnie tak latwiej ( to tylko moje zdanie )
Zapisane
marecki_
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180
Galeria Użytkownika

marecki_


Zobacz profil
« Odpowiedz #18 : 01.08.2007, 23:29:20 »

jest to jakies rozwiazanie, ale zawsze java jest czytelna

Java to nie JavaScript, nie zapominaj Uśmiech

A co do tematu: autor dostał kilka możliwych rozwiązań, niech robi co chce Język Niech wstawi TYLKO zmieniające się desenie, bez żadnego kodu Uśmiech
Zapisane
dejw
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44
Galeria Użytkownika

dejw


Zobacz profil
« Odpowiedz #19 : 02.08.2007, 07:23:08 »

Java to nie JavaScript, nie zapominaj Uśmiech

 Chichot oczywisice nie zapominam ( na marginesie sam ani w jednym ani drugim pisac nie umiem  Język ha ha ), a tutaj prosze jeszcze jedna strona z zastosowaniem efektu rollover ( dla samego tekstu nawet jest ): http://webmade.org/porady/efekt-rollover-tekst-js.php
Zapisane
koziolek
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 24
Galeria Użytkownika

koziolek

Mam Zenita 11 i nie zawacham się go użyć


Zobacz profil
« Odpowiedz #20 : 07.08.2007, 09:04:14 »

Jest pewno rozwiązanie, które nie wymaga używania JS. Pseudoelement :hover może być używany przez większość znaczników (wszędzie gdzie ma sens a nie np w przypadku <form /> czy <br />) Jednakże IE6 nie obsługuje tego poprawnie. Dlatego też powstał taki mały plik zachowań IE co się nazywa hover.htc. Artykuł o tym co i jak:
http://www.xs4all.nl/~peterned/csshover.html

Od siebie dodam jeszcze że warto używać go w następujący sposób:
Kod:
<!--[if IE 6]>
<style type="text/css">
element { behavior:url(hover.htc) }
</style>
<![endif]-->

komentarze warunkowe zapewniają iż całość będzie ładnie się walidowała.
Zapisane

Lepiej pomyśleć dwa razy i zacząć programować
niż dwa razy programować i potem zacząć myśleć:)

Webmaster, programista... uczę się grafiki Uśmiech
mch
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 8
Galeria Użytkownika

mch


Zobacz profil
« Odpowiedz #21 : 12.08.2007, 22:25:16 »

Ekhem.

Nie żebym coś mówił, ale problem jest tak banalny, że aż śmieszny.

To co "spłodzil " noldi :
Kod:
.news    {background-image: url('grafika/tlo_2.gif');
           
            width: 540px;
            height: auto;
            min-height: 70px;           
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 5px

            }
.news:hover {background-image: url('grafika/tlo_3.gif');}

Poprawka na
Kod:
.news    {

            background: url(grafika/tlo_2.gif);
           
            width: 540px;
            height: auto;
            min-height: 70px;           
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 5px

            }
.news:hover {
background: url(grafika/tlo_3.gif);
}

Spróbuj. W Firefoxie i Operze powinno pomóc, co do IE pewien nie jestem
Zapisane
noldi
Użytkownik

Reputacja: 3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Wiadomości: 45
Galeria Użytkownika



Zobacz profil
« Odpowiedz #22 : 12.08.2007, 22:43:20 »

Nie działa  Duży uśmiech
Zapisane
marecki_
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180
Galeria Użytkownika

marecki_


Zobacz profil
« Odpowiedz #23 : 12.08.2007, 22:55:45 »

Ekhem.

Nie żebym coś mówił, ale problem jest tak banalny, że aż śmieszny.

To co "spłodzil " noldi :
Kod:
.news    {background-image: url('grafika/tlo_2.gif');
           
            width: 540px;
            height: auto;
            min-height: 70px;           
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 5px

            }
.news:hover {background-image: url('grafika/tlo_3.gif');}

Poprawka na
Kod:
.news    {

            background: url(grafika/tlo_2.gif);
           
            width: 540px;
            height: auto;
            min-height: 70px;           
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 5px

            }
.news:hover {
background: url(grafika/tlo_3.gif);
}

Spróbuj. W Firefoxie i Operze powinno pomóc, co do IE pewien nie jestem


Nie żebym coś mówił, ale to jest właśnie nasza pozycja wyjściowa. To w takiej postaci nie zadziała Uśmiech
Zapisane
koziolek
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 24
Galeria Użytkownika

koziolek

Mam Zenita 11 i nie zawacham się go użyć


Zobacz profil
« Odpowiedz #24 : 22.08.2007, 15:11:29 »

lethal2, nie zadziała pod IE bo ten obsługuje :hover TYLKO dla <a />. Pisałem o .htc użycie tego rozwiązania uznaje się za podstawowe. Co do JS to można spróbować wybrać elementy po className i następnie dodać do nich odpowiedni event. Ta metoda jednak nie jest do końca ładna (w najprostszej wersji) ponieważ można przez przypadek zamazać inne zdarzenia związane z elementem.
Zapisane

Lepiej pomyśleć dwa razy i zacząć programować
niż dwa razy programować i potem zacząć myśleć:)

Webmaster, programista... uczę się grafiki Uśmiech
Strony: 1 [2]  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aOgólne dyskusjeDyskusjeWebmastering & WebdesignJęzyki InternetuWątek: [Css] hover
Skocz do: