Drukuj stronę - [Css] hover

Tytuł: [Css] hover
Wiadomość wysłana przez: noldi on 30.07.2007, 19:22:56

Mam problem. Nie wiem czy to dobry dział, z góry przepraszam jeśli nie. Problem jest nastęujący:

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');}

.news to div

kod miał za zadanie po najechaniu zmienić tło diva czyli pola z newsem, ale nie działa, a ja nie moge znaleźć błędu. Pomocy 8)

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noss on 30.07.2007, 20:34:22

Z tego co pamiętam, to "hover" odnosi się do odnośników czyli znacznika "a", a nie "div".

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 30.07.2007, 20:41:33

Szukałem w Internecie i znalazłem przykłady jakoby hover odnosił się również do div. <aniolek>

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: Kapitan_hak1995 on 30.07.2007, 20:55:57

Testujesz w internet explorerze czy w przeglądarce? Czy grafiki są na swoim miejscu? Czy ten div ma ustawioną KLASE(<div class="news">) news? Pokaż ten kod gdzie ten div jest.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: marrek13 on 30.07.2007, 21:01:56

Pseudoklasa hover, na IE, działa poprawnie tylko przy wykorzystaniu znacznika A, stąd nierzadko trzeba stosować tzw. hacki. Napisz, na czym testujesz, i daj kawałek kodu html, w którym wykorzystujesz tą klasę.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 30.07.2007, 21:04:23

Więc tak: testowałem w firefoxie, operze i internet explorerze, grafiki są na swoim miejscu, bo są wyświetlane ...znaczy ta która ma być na stałe.. kiedy najadę na diva nic się nie dzieje (pod żadną z tych przeglądarek), div ma ustawioną klasę xD

Kod:

<html>
<body>
    <center>
     <div class="table">

              <div class="wiersz1">&nbsp;</div>
  
              <div class="wiersz2">



                      <div class="tresc">


                        <div class="news">news1</div>
                        <div class="news">news2</div>
                        <div class="news">news3</div>

                      </div>

                      <div class="menu"></div>
                
                                                     
              </div>
              <div class="wiersz3"><br>Copyright 2007 by noldi.<br></div>
     
   
    </div>

 </center>
</body>
</html>

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noss on 30.07.2007, 21:14:07

A ten styl to gdzie jest podpięty?

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: marecki_ on 30.07.2007, 21:45:14

Powinieneś użyć efektu rollover. Ma wiele zalet (drugi obrazek nie musi się doładowywać, bo jest ładowany od razu; jest kompatybilny z tymi trzema podstawowymi przeglądarkami) http://grabun.com/teksty/przyklady/css-rollover/

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 30.07.2007, 21:45:45

Znaczy styl jest podpięty.. ale trochę skróciłem kod.. więc wygląda jak by nie był :P

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: dejw on 31.07.2007, 08:17:14

a czy koniecznie musisz uzywac znacznika <div>?

ja zrobil bym to tak:

Kod:

<a href="adres"><img src="normalne_zdjecie.jpg" alt="Tekst alternatywny" title="Tekst alternatywny dla firefoxa" border="0"
onmouseover="this.src = 'podswietlone_zdjecie.jpg'" onmouseout="this.src = 'normalne_zdjecie.jpg'"/></a>

i wszystko gra ale

Cytat: lethal2 on 30.07.2007, 21:45:14

problem wlasnie tkwi w doladowaniu, wiec jesli nie chcesz zeby obrazy ladowaly sie dopiero po ich "uaktywnieniu", ale od razu przystarcie strony, wystarczy dodac kilka linijek w znaczniku <head>

Kod:

<script type="text/javascript">
// <![CDATA[
new Image().src = 'obrazek_podswietlony.gif';
new Image().src = 'obrazek_klikniety.gif';
// ]]>
</script>

wystarczy dopisac sciezki do zdjec, kazda w osobnej linijce.
pamietaj tez ze sa ladowane na wyrost wiec jesli ktos ich nie uzyje po prostu pamiec zostanie "zmarnowana"

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 31.07.2007, 21:49:27

dave, przepraszam ale widzę że nie masz o tym pojęcia... <lol> 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ń... :P

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: dejw on 31.07.2007, 22:15:38

Cytat: noldi on 31.07.2007, 21:49:27

nie przepraszaj, bo skoro tak mowisz to, ja przepraszam ( ;) ) ale chyba Ty nie masz pojecia :D skoro chcesz zrobic tylko zmieniajacy sie kolor to wywal kotwice!! znaczniki onmouseover itp dzialaja do wszystkiego div'ow, tablelek itp. wiec nie gadaj glopot :) tylko sprobuj ;) zamiast

Kod:

this.src = 'normalne_zdjecie.jpg'

nalezy wstawic odpowiedni znacznik css odpowiadajacy za np. kolor tla i to wszystko.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noss on 31.07.2007, 23:21:56

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.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 31.07.2007, 23:33:44

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)... ;D

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noss on 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.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: dejw on 01.08.2007, 07:35:26

Cytat: noss on 31.07.2007, 23:21:56

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 ;) to mowiles cos o odnosniku... ???

Cytat: noldi on 31.07.2007, 23:33:44

Cytat: noldi on 31.07.2007, 21:49:27

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 :P

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!!! ;D chce Ci dac wedke a nie od razu rybke :P

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: marecki_ on 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ć :)
I wtedy rollover ładnie zaimplementować

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: dejw on 01.08.2007, 22:41:22

Cytat: lethal2 on 01.08.2007, 11:04:33

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 :P) 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 ;D

Cytat: lethal2 on 01.08.2007, 11:04:33

Zawsze można zrobić pusty, niewidoczny odnośnik. Metoda nieelegancka, ale trzeba czasem takiej użyć :)
I wtedy rollover ładnie zaimplementować

ale wiesz...

Cytat: noldi on 31.07.2007, 21:49:27

... nie "chcemy" robic zadnych odnosnikow...TYLKO zmieniajace sie desenie ;D ja bym tam zaniechal samego dib i robil na tebeli, bo mnie tak latwiej ( to tylko moje zdanie )

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: marecki_ on 01.08.2007, 23:29:20

Cytat: dave on 01.08.2007, 22:41:22

jest to jakies rozwiazanie, ale zawsze java jest czytelna

Java to nie JavaScript, nie zapominaj :)

A co do tematu: autor dostał kilka możliwych rozwiązań, niech robi co chce :P Niech wstawi TYLKO zmieniające się desenie, bez żadnego kodu :)

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: dejw on 02.08.2007, 07:23:08

Cytat: lethal2 on 01.08.2007, 23:29:20

Java to nie JavaScript, nie zapominaj :)

:D oczywisice nie zapominam ( na marginesie sam ani w jednym ani drugim pisac nie umiem :P 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 (http://webmade.org/porady/efekt-rollover-tekst-js.php)

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: koziolek on 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.

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: mch on 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

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: noldi on 12.08.2007, 22:43:20

Nie działa ;D

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: marecki_ on 12.08.2007, 22:55:45

Cytat: mch on 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

Nie żebym coś mówił, ale to jest właśnie nasza pozycja wyjściowa. To w takiej postaci nie zadziała :)

Tytuł: Odp: [Css] hover
Wiadomość wysłana przez: koziolek on 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.

Polskie Forum Użytkowników GIMP-a

Ogólne dyskusje => Języki Internetu => Wątek zaczęty przez: noldi on 30.07.2007, 19:22:56