noldi
Użytkownik
Reputacja: 3
 Offline
Płeć: 
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
 
|
 |
« : 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: .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');} 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) |
|
|
|
|
Zapisane
|
|
|
|
noss
Użytkownik
Reputacja: 41
Offline
Płeć:
GIMP: 2.8 + GAP
Licencja: Copyright
Wiadomości: 1 384 Galeria Użytkownika
|
|
« Odpowiedz #1 : 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".
|
|
|
|
|
Zapisane
|
|
|
|
noldi
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #2 : 30.07.2007, 20:41:33 » |
|
Szukałem w Internecie i znalazłem przykłady jakoby hover odnosił się również do div. <aniolek>
|
|
|
|
|
Zapisane
|
|
|
|
|
Kapitan_hak1995
Gość
|
|
« Odpowiedz #3 : 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.
|
|
|
|
|
Zapisane
|
|
|
|
marrek13
Użytkownik
Reputacja: 8
Offline
Płeć:
GIMP: 2.4
JID: marrek13@jabber.hostingcenter.pl
Licencja: CC-NC-BY-SA
Wiadomości: 55 Galeria Użytkownika
Pogromca uciśnionych
|
|
« Odpowiedz #4 : 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ę.
|
|
|
|
|
Zapisane
|
|
|
|
noldi
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #5 : 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 <html>
<body>
<center>
<div class="table">
<div class="wiersz1"> </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> |
|
|
|
|
Zapisane
|
|
|
|
noss
Użytkownik
Reputacja: 41
Offline
Płeć:
GIMP: 2.8 + GAP
Licencja: Copyright
Wiadomości: 1 384 Galeria Użytkownika
|
|
« Odpowiedz #6 : 30.07.2007, 21:14:07 » |
|
A ten styl to gdzie jest podpięty?
|
|
|
|
|
Zapisane
|
|
|
|
marecki_
Użytkownik
Reputacja: 4
Offline
Płeć:
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180 Galeria Użytkownika
|
|
« Odpowiedz #7 : 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/ |
|
|
|
|
Zapisane
|
|
|
|
noldi
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #8 : 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ł  |
|
|
|
|
Zapisane
|
|
|
|
dejw
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44 Galeria Użytkownika
|
|
« Odpowiedz #9 : 31.07.2007, 08:17:14 » |
|
a czy koniecznie musisz uzywac znacznika <div>? ja zrobil bym to tak: <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 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><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" |
|
|
|
|
Zapisane
|
|
|
|
noldi
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #10 : 31.07.2007, 21:49:27 » |
|
dave, przepraszam ale widzę że nie masz o tym pojęcia...  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ń... |
|
|
|
|
Zapisane
|
|
|
|
dejw
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44 Galeria Użytkownika
|
|
« Odpowiedz #11 : 31.07.2007, 22:15:38 » |
|
dave, przepraszam ale widzę że nie masz o tym pojęcia... 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ń... nie przepraszaj, bo skoro tak mowisz to, ja przepraszam (  ) ale chyba Ty nie masz pojecia  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 this.src = 'normalne_zdjecie.jpg' nalezy wstawic odpowiedni znacznik css odpowiadajacy za np. kolor tla i to wszystko. |
|
|
|
|
Zapisane
|
|
|
|
noss
Użytkownik
Reputacja: 41
Offline
Płeć:
GIMP: 2.8 + GAP
Licencja: Copyright
Wiadomości: 1 384 Galeria Użytkownika
|
|
« Odpowiedz #12 : 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.
|
|
|
|
|
Zapisane
|
|
|
|
noldi
Użytkownik
Reputacja: 3
Offline
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #13 : 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)...  |
|
|
|
|
Zapisane
|
|
|
|
noss
Użytkownik
Reputacja: 41
Offline
Płeć:
GIMP: 2.8 + GAP
Licencja: Copyright
Wiadomości: 1 384 Galeria Użytkownika
|
|
« 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
Płeć:
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44 Galeria Użytkownika
|
|
« 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 to mowiles cos o odnosniku...  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)... dave, przepraszam ale widzę że nie masz o tym pojęcia... 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ń... 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: onmouseover="this.clsss ='div_podswietlony'"
onmouseover="this.clsss ='div_nie_podswietlony'" nigdy tak nie probowalem wiec nie jestem pewien czy to zadziala 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 ): <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!!! chce Ci dac wedke a nie od razu rybke |
|
|
|
|
Zapisane
|
|
|
|
marecki_
Użytkownik
Reputacja: 4
Offline
Płeć:
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180 Galeria Użytkownika
|
|
« 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ć I wtedy rollover ładnie zaimplementować |
|
|
|
|
Zapisane
|
|
|
|
dejw
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44 Galeria Użytkownika
|
|
« 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 ) 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 Zawsze można zrobić pusty, niewidoczny odnośnik. Metoda nieelegancka, ale trzeba czasem takiej użyć I wtedy rollover ładnie zaimplementować ale wiesz... dave, przepraszam ale widzę że nie masz o tym pojęcia... 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ń... ... nie "chcemy" robic zadnych odnosnikow...TYLKO zmieniajace sie desenie 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
Płeć:
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180 Galeria Użytkownika
|
|
« Odpowiedz #18 : 01.08.2007, 23:29:20 » |
|
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 Niech wstawi TYLKO zmieniające się desenie, bez żadnego kodu |
|
|
|
|
Zapisane
|
|
|
|
dejw
Użytkownik
Reputacja: 2
Offline
Płeć:
GIMP: 2.4 + GAP
JID: dejw@jabber.org
Licencja: Copyright
Wiadomości: 44 Galeria Użytkownika
|
|
« Odpowiedz #19 : 02.08.2007, 07:23:08 » |
|
Java to nie JavaScript, nie zapominaj oczywisice nie zapominam ( na marginesie sam ani w jednym ani drugim pisac nie umiem 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
Płeć:
GIMP: 2.4
Licencja: Copyright
Wiadomości: 24 Galeria Użytkownika
Mam Zenita 11 i nie zawacham się go użyć
|
|
« 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.htmlOd siebie dodam jeszcze że warto używać go w następujący sposób: <!--[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 |
|
|
mch
Nowicjusz
Reputacja: 2
Offline
Wiadomości: 8 Galeria Użytkownika
|
|
« 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 : .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 .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
Płeć:
GIMP: 2.2
Wiadomości: 45 Galeria Użytkownika
|
|
« Odpowiedz #22 : 12.08.2007, 22:43:20 » |
|
Nie działa |
|
|
|
|
Zapisane
|
|
|
|
marecki_
Użytkownik
Reputacja: 4
Offline
Płeć:
GIMP: 2.6
JID: lethal2@jabster.pl
Licencja: Copyright
Wiadomości: 180 Galeria Użytkownika
|
|
« 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 : .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 .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 |
|
|
|
|
Zapisane
|
|
|
|
koziolek
Użytkownik
Reputacja: 4
Offline
Płeć:
GIMP: 2.4
Licencja: Copyright
Wiadomości: 24 Galeria Użytkownika
Mam Zenita 11 i nie zawacham się go użyć
|
|
« 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 |
|
|
Ogólne dyskusje
