-
1. Data: 2009-06-22 11:00:22
Temat: OnMouseOver w IE
Od: serotoninka <s...@v...pl>
Witam. Na wstępie chciałabym baaaardzo przeprosić jeśli moja wiadomość
pojawi się drugi raz - coś mi się pokopało z możliwością wyświetlania
grup i pisaniem do nich, nie wiem czy udało mi się właściwie zwalczyć
problem.
A teraz ad rem. Otóż zrobiłam sobie buttony w jakimś darmowym
generatorze online - sprawa prosta,
po najechaniu myszą obrazek ma się zmienić na taki z jaśniejszym tłem,
po
zabraniu myszy ma wrócić do poprzedniego koloru. I wszystko jest ok w
firefox-sie. A w IE dupa. Jak poprawić, zmienić kod żeby efekt
rozjaśnienia
pojawił się także w IE?
Generator wygenerował mi taki kod:
<A HREF="onas.html" TARGET="opisy">
<img src="onas1.png" onmouseover="this.src='onas2.png';"
onmouseout="this.src='onas1.png';" />
</A>
Szperając w googlach znalazłam jeszcze taką wersję:
<a href="onas.html" onMouseOver='rollover.src="onas2.png"'
onMouseOut='rollover.src="onas1.png"'>
<img src="onas1.png" name="rollover" border="0"></a>
W obu przypadkach w Firefoksie jest super, a w IE wyświetla się tylko
obrazek onas1.png i po najechaniu myszą nic się z nim nie dzieje (po
kliknięciu jest ok - przenosi tam gdzie trzeba). Z góry wielkie dzięki
za pomoc - to pewnie banalna sprawa, ale ja jestem baardzo
początkująca w stronach www ;)
Z góry dziękuję za pomoc!
Ola
-
2. Data: 2009-06-22 12:15:34
Temat: Re: OnMouseOver w IE
Od: Grzesiek <f...@i...tld>
http://grabun.com/teksty/przyklady/css-rollover/
-
3. Data: 2009-06-22 12:57:48
Temat: Re: OnMouseOver w IE
Od: serotoninka <s...@v...pl>
On 22 Cze, 14:15, Grzesiek <f...@i...tld> wrote:
> http://grabun.com/teksty/przyklady/css-rollover/
Dziękuję, tylko... pisałam, że jestem laikiem :-( Ten kod to dla mnie
raczej magia, ale chyba tam chodzi o coś innego: obrazek jest jako
tło, a nie jako link, w ogóle to jest jeden obrazek, jakoś podzielony
na pół, a nie dwa tak jak u mnie... Nie umiem tamtego kodu przerobić
tak, żeby u mnie działało :-(
No a poza tym ten kod, który ja podałam (dwie wersje) u mnie działa
pod FF, a nie działa pod IE... Dlaczego? Jak go poprawić?
-
4. Data: 2009-06-22 13:17:01
Temat: Re: OnMouseOver w IE
Od: Grzesiek <f...@i...tld>
serotoninka pisze:
> Dziękuję, tylko... pisałam, że jestem laikiem :-( Ten kod to dla mnie
> raczej magia, ale chyba tam chodzi o coś innego: obrazek jest jako
> tło, a nie jako link, w ogóle to jest jeden obrazek, jakoś podzielony
> na pół, a nie dwa tak jak u mnie... Nie umiem tamtego kodu przerobić
> tak, żeby u mnie działało :-(
Może inny link: http://www.elated.com/articles/css-rollover-buttons/
Genralnie chodzi o to żebyś utworzyła ten obrazek właśnie jako jeden,
wstaw ten button dla obu stanów jeden pod drugi po czym w css przestaw
pozycję tła (background-position) tak, aby po najechaniu myszą obrazek
przesunął się do stanu 2. Wiem że na początek czarna magia ale jest to
naprawdę łatwe jak tylko więcej poczytasz. I może zacznij lekturę od
http://kurs.browsehappy.pl/ , przynajmniej poznasz podstawy.
> No a poza tym ten kod, który ja podałam (dwie wersje) u mnie działa
> pod FF, a nie działa pod IE... Dlaczego? Jak go poprawić?
Tym kodem nawet sobie głowy nie zawracaj. Tak się już nie robi od czasów
starożytnych.
-
5. Data: 2009-06-22 13:51:54
Temat: Re: OnMouseOver w IE
Od: serotoninka <s...@v...pl>
On 22 Cze, 15:17, Grzesiek <f...@i...tld> wrote:
> Może inny link:http://www.elated.com/articles/css-rollover-but
tons/
Jeszcze większa chińska magia ;) Ale powoli rozgryzam...
> Genralnie chodzi o to żebyś utworzyła ten obrazek właśnie jako jeden,
> wstaw ten button dla obu stanów jeden pod drugi
mam, właśnie zrobiłam.
po czym w css przestaw
> pozycję tła (background-position) tak, aby po najechaniu myszą obrazek
> przesunął się do stanu 2.
No z tym przestawieniem to pewnie dam radę - mój obrazek ma 108 px,
dwa razy po 54, spokojnie to sobie ustawię.
Ale co to znaczy "przestaw w css"? W css czyli gdzie? Rozumiem, że w
tym kodzie, który podali na stronie. Ale w ogóle dlaczego mam tam dwa
różne kody, jeden dla html, drugi dla css? One mają być w jednym
pliku? czy w dwóch? jakimi ramami ograniczone?
Ja naprawdę początkuję... Mam póki co tylko jeden plik, z
rozszerzeniem html, w nim sekcję head i body. Czy mam stworzyć drugi
plik z rozszerzeniem .css?
>I może zacznij lekturę odhttp://kurs.browsehappy.pl/, przynajmniej poznasz podstawy.
Dobrze - będę się uczyć, obiecuję.
> Tym kodem nawet sobie głowy nie zawracaj. Tak się już nie robi od czasów
> starożytnych.
Taaaa, ale to było takie proste ;) Wstawiałam to obie w BODY i
działało. Dlaczego nowsze rozwiązania są bardziej skomplikowane? ;-)
Tak czy inaczej wielkie dzięki za pomoc ;) Ja na co dzień uczę
studentów i wiem jak to jest pomagać takim głąbom ;)
-
6. Data: 2009-06-22 14:17:18
Temat: Re: OnMouseOver w IE
Od: Grzesiek <f...@i...tld>
serotoninka pisze:
> Ale co to znaczy "przestaw w css"? W css czyli gdzie? Rozumiem, że w
> tym kodzie, który podali na stronie. Ale w ogóle dlaczego mam tam dwa
> różne kody, jeden dla html, drugi dla css? One mają być w jednym
> pliku? czy w dwóch? jakimi ramami ograniczone?
W dokumencie html masz strukturę
<html>
<head></head>
<body></body>
</html>
Wstaw do niego
<head><link rel="stylesheet" type="text/css" href="twojplik.css"></head>
i utwórz jakiś plik w przykładzie twojplik.css. Jest to zewnętrzny
arkusz stylów czyli plik opisujący wygląd dokumentu (CSS). W przykładzie
który dałem http://www.elated.com/css/common.css - dzięki temu opisowi
cała strona wygląda tak jak ją widzisz. Gdyby się nie wczytał
zobaczyłabyś czysty tekst, jakieś nagłówki, listy, paragrafy (możesz to
podejrzeć instalując rozszerzenie webdeveloper toolbar do firefoksa i
ctrl+shift+s).
Dalej jest #emailUs. Oznacza to (#) identyfikator - może występować
jeden w dokumencie o takiej nazwie. Jest to właśnie CSS. Przez
identyfikator wiążesz element, w tym wypadku, <a id="emailUs"> z opisem
wyglądu. Dalej w sumie sobie poradzisz. Jakby coś to pisz. Możesz też
rzucić okiem na opis podobnego wykonania od podstaw
http://tworzenie-stron-www.org/strony-www/artykuly/2
/opracowanie_witryny_internetowej_-_palmark
Tak sobie myślę że chyba pora na jakiś nowy artykuł o html :)
-
7. Data: 2009-06-22 15:56:04
Temat: Re: OnMouseOver w IE
Od: serotoninka <s...@v...pl>
On 22 Cze, 16:17, Grzesiek <f...@i...tld> wrote:
> Dalej w sumie sobie poradzisz.
Ano poradziłam sobie! Baaaaaardzo dziękuję! Jednak dobry nauczyciel to
podstawa, no i podał wędkę a nie rybę ;) Jeszcze raz wielkie dzięki!
Właśnie stworzyłam 7 podwójnych butonów i 7 plików css i mam właśnie
przed sobą piękne podświetlające się menu ;)
>Jakby coś to pisz.
A jak jeszcze mogę to skorzystam.W pliku html mam te znaczniki <a
id...></a>, kilka ich jest (7) no bo i guzików w menu jest tyle. Nie
mam żadnych <BR> tam pomiędzy, a mimo to, kolejne przyciski ustawiają
się jeden pod drugim. Co powinnam zrobić, jeśli chciałabym by były w
rządku obok siebie, a nie w kolumnie?
-
8. Data: 2009-06-22 16:28:45
Temat: Re: OnMouseOver w IE
Od: Grzesiek <f...@i...tld>
serotoninka pisze:
> Ano poradziłam sobie! Baaaaaardzo dziękuję! Jednak dobry nauczyciel to
> podstawa, no i podał wędkę a nie rybę ;) Jeszcze raz wielkie dzięki!
> Właśnie stworzyłam 7 podwójnych butonów i 7 plików css i mam właśnie
> przed sobą piękne podświetlające się menu ;)
A czemu 7 a nie jeden? Możesz (a wręcz musisz) to wszystko wrzucić do
jednego pliku css.
> A jak jeszcze mogę to skorzystam.W pliku html mam te znaczniki <a
> id...></a>, kilka ich jest (7) no bo i guzików w menu jest tyle. Nie
> mam żadnych <BR> tam pomiędzy, a mimo to, kolejne przyciski ustawiają
> się jeden pod drugim. Co powinnam zrobić, jeśli chciałabym by były w
> rządku obok siebie, a nie w kolumnie?
>
To już będzie trochę bardziej skomplikowane ze względu na błędy w
przeglądarkach (poznaj zalety kodowania :) ).
Skoro menu to na początek:
<ul>
<li><a id="cos1">item 1</a></li>
<li><a id="cos2">item 2</a></li> (x7)
</ul>
Elementy są pod sobą ze względu na display: block,
http://kurs.browsehappy.pl/Krok/MenuCSS użyj metodę z float z tym że
gdy to zrobisz element "straci wymiar" (zauważ notkę o clear). Do tego
gdybyś nadała margines aby odsunąć je od siebie IE6 go podwoi (trzeba
hackować przez display:inline i najlepiej komentarze warunkowe dla IE).
No :) Jest w sieci pełno przykładów, znajdź odpowiedni i skopiuj. Szukaj
css menu itp.
-
9. Data: 2009-06-22 16:32:47
Temat: Re: OnMouseOver w IE
Od: Grzesiek <f...@i...tld>
Na dobrą sprawę to masz generator
http://www.cssmenumaker.com/horizontal_css_menu.php
-
10. Data: 2009-06-22 17:52:17
Temat: Re: OnMouseOver w IE
Od: serotoninka <s...@v...pl>
On 22 Cze, 18:32, Grzesiek <f...@i...tld> wrote:
> Na dobrą sprawę to masz generatorhttp://www.cssmenumaker.com/horizontal_css_
menu.php
Phi, generator ;) Dałam jakoś radę bez niego, choć przyznam że
namęczyłam się z tym poziomowaniem... ;-) Ale działa! No i już mam
wszystko w jednym pliku css! Potem jak już miałam poziome menu to mi
się ono chyba przez to float:left nie chciało wyśrodkować jako całość.
Ale gdzieś w necie znalazłam sposób, że trzeba wstawić w css do ul
taki fragment:
ul {
width: 500px;
margin:0 auto;
}
No to wstawiłam na próbę i zadziałało. To dobry sposób? Dlaczego
szerokość akurat 500? W innych rozdzielczościach też będzie na
środku?
Nie no, ale poważnie, jesteś moim Bogiem internetu - wielkie dzięki za
wszystko - powoli zaczyna mi się to cholernie podobać ;)