Forum PC Town

Strona Główna     FAQFAQ  SzukajSzukaj  UżytkownicyUżytkownicy  GrupyGrupy


Forum komputerowe PC Town Strona Główna » Kompiradło » Webmaster » [css] Zmiana koloru po najściu myszką na div'a Poprzedni temat :: Następny temat
[css] Zmiana koloru po najściu myszką na div'a
Autor Wiadomość
markoll 

Pomógł: 7 razy
Wysłany: 2006-02-13, 19:05   [css] Zmiana koloru po najściu myszką na div'a
re. ;]
Robię styl do stronki i pojawiły się pierwsze kłopoty. Kolor diva to jasny niebieski. Chciałbym, aby po najściu myszką na tego div'a zmienił się kolor (tylko tła). Jak to zrobić? Bo z css dopiero zaczynam zabawe..
 
   
qwas

Pomógł: 3 razy
Wysłany: 2006-02-13, 19:50   
np.
Kod:
.klasadiva:hover {
  background-color: black;
}

Od razu zaznaczam, ze w IE nie dziala.
 
   
crooleeck 
Wymiata!


Pomógł: 25 razy
Skąd: Miedziana Dzioora...
Wysłany: 2006-02-15, 14:20   
Ja mam podobny problem. Mam ramke, w niej są przyciski. Chce żeby po najechaniu na przycisk, on robił sie inny (przycisk to obraz 1.jpg, a po najechaniu nich się z nigo zrobi 2.jpg). Tu jest fragment kodu z całą tabelą:
Kod:
<TABLE>
<TR>
<TD CLASS="menu">
<P><A HREF="1.html"><IMG SRC="1.jpg"></A>
<A HREF="2.html"><IMG SRC="1.jpg"></A>
<A HREF="3.html"><IMG SRC="1.jpg"></A>
<A HREF="nowy.html"><IMG SRC="1.jpg"></A></P>
</TD>
<TD CLASS="reszta">
to sobie będę pisal co mi się zachce
</TD>

Do tego dałem taki css:
Kod:
body  {
    font-family: Comic Sans MS;
    font-size: 12pt;
    background-image: url(pliki/tlo.jpg);
}

P {
    font-weight: bold;
}

a:link {
    color: Black;
    text-decoration: underline;
    background-color: #FF8C00;
}
a:visited {
    color: Black;
    text-decoration: underline;
    background-color: #FF8C00;
}
a:hover {
    color: White;
    text-decoration: none;
    background-color: Red;
}
td.menu {
    border-bottom-width: medium;
    text-align: left;
    border: medium groove Black;
    width: 10%;
    vertical-align: top;
}
td.reszta {
    text-align: center;
    font-family: Comic Sans MS;
    font-size: 10pt;
}
td.menu:hover {
    background-image: url(2.jpg);
}

I nic mi z tego nie wyszło... Nie wiem jak zmusić te przyciski żeby się robiły inne...

Edit: właśnie to sprawdziłem w FF... lol trzeba css poprawić... Ale problem dalej pozostaje...
_________________
#pctown.pl @ PolNet
http://crooleeck.jogger.pl/
 
 
   
qwas

Pomógł: 3 razy
Wysłany: 2006-02-15, 15:44   
Tlo pewnie sie zmienia, ale ty dodajesz obrazek ktory zaslania to tlo (moje przypuszczenia, bo nie chce mi sie sprawdzac). Nie jestem pewien czy da sie zrobic to o co ci chodzi w css (przynajmniej dopoki nie wejdzie xhtml 2.0 w ktorym podobno do kazdego elementu bedzie mozna dodac href). Na twoim miejscu wklepalbym w google "onmouseover image" i google napewno znajdzie cos co ci pomoze. Jesli cie dobrze zrozumialem to cos co moze ci pomoc jest chociazby na tej stronie.
 
   
crooleeck 
Wymiata!


Pomógł: 25 razy
Skąd: Miedziana Dzioora...
Wysłany: 2006-02-15, 17:03   
qwas napisał/a:
Tlo pewnie sie zmienia, ale ty dodajesz obrazek ktory zaslania to tlo (moje przypuszczenia, bo nie chce mi sie sprawdzac).

Tak, na FF było to dobrze widać...

Co do linku, który podałeś - sprawdzam to właśnie, jeśli zadzała to wyedytuje posta i powiem, jak nie to przeszukam google i napisze co i jak.

Skrypt z linku, który mi podał qwas działa tak jak to sobie wymyśliłem. Dzieki wielkie za pomoc, teraz sobie ustawiam to w kodzie w odpowiednim miejcu. Jeszcze raz dzięki. Markoll jak mozesz to kliknij pomógł na poście qwas'a.


Edit: Coś to nie działa do końca tak jak chciałem - gdzieś jest bład...

Tu macie link jak to wygląda.

Coś jest nie tak. tu macie kod z moimi zmianami w skrypcie:

Kod:
<HTML>
<HEAD>
<LINK REL="stylesheet"
HREF="style.css"
TYPE="text/css">
<META NAME="Description" CONTENT="Strona prywatna crooleeck">
<META NAME="Keywords" CONTENT="crooleeck tutaj są dane kontaktowe, a także opis jak się ze mną kontaktować">
<IMG SRC="pliki/logo.jpg"></IMG>
<script language="javascript">


browserName = navigator.appName;   
         browserVer = parseInt(navigator.appVersion);
             if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
             else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
             else browserVer = "2";

if (browserVer == 1) {
a1 = new Image(118,46);
a1.src = "przycisk.jpg";
a2 = new Image(118,46);
a2.src = "wcisniety.jpg";
b1 = new Image(118,46);
b1.src = "przycisk.jpg";
b2 = new Image(118,46);
b2.src = "wcisniety.jpg";
c1 = new Image(118,46);
c1.src = "c1.jpg";
c2 = new Image(118,46);
c2.src = "c2.jpg";
d1 = new Image(118,46);
d1.src = "d1.jpg";
d2 = new Image(118,46);
d2.src = "d2.jpg";
e1 = new Image(118,46);
e1.src = "e1.jpg";
e2 = new Image(118,46);
e2.src = "e2.jpg";
}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
    document.images[imgDocID].src = eval(imgObjName + ".src")
}}

</script>
</HEAD>
<BODY>
<BR>
<TABLE>
<TR>
<TD CLASS="menu">
<a href="1.html" onMouseOver="hiLite('img02','javascript2')" onMouseOut="hiLite('img02','javascript1')">
<img name="img02" src="javascript1.jpg" border=0 height=40 width=120></a>
<a href="java.html" onMouseOver="hiLite('img01','java2')" onMouseOut="hiLite('img01','java1')">
<img name="img01" src="java1.jpg" border=0 height=40 width=120></a>
<a href="vrml.html" onMouseOver="hiLite('img04','vrml2')" onMouseOut="hiLite('img04','vrml1')">
<img name="img04" src="vrml1.jpg" border=0 height=40 width=120></a>
<a href="delphi.html" onMouseOver="hiLite('img03','delphi2')" onMouseOut="hiLite('img03','delphi1')">
<img name="img03" src="delphi1.jpg" border=0 height=40 width=120></a>
</TD>
<TD CLASS="reszta">
to sobie będę pisal co mi się zachce
</TD>
</TABLE>
</BODY>
</HTML>

Jak chcecie wiedzieć jaki skrypt wyglądał originalnie to w linku qwasa znajdziecie...

Nie moge zlokalizować błędy, przez który ten znaczek jest wyświetlany na obrazku. Nie za dobry jestem z javy...
_________________
#pctown.pl @ PolNet
http://crooleeck.jogger.pl/
 
 
   
Thor 
Moderator



Pomógł: 57 razy
Wysłany: 2006-02-16, 19:51   
crooleeck - kiepski jestem w te klocki, ale taki znaczek oznacza brak obrazka. Popatrz czy ścieżki do obrazków dobrze są poustawiane.
 
   
Asdef 
Administrator



Pomógł: 33 razy
Skąd: Lodz
Wysłany: 2006-02-16, 20:04   
wystarczy podaj adres bezwzględny http///**** itd
_________________
PCT szuka ludzi dobrej woli, którzy jak mają ciekawe artykuły pisane z własnej ręki, to oczywiście można je nadsyłać nawet z gościa, po zatwierdzeniu przez moderatora…
http://www.pctown.pl/submitnews.php
lub wysyłać na asdef(malpa)o2.pl
http://img528.imageshack.us/img528/3311/dn9ar.png
 
   
crooleeck 
Wymiata!


Pomógł: 25 razy
Skąd: Miedziana Dzioora...
Wysłany: 2006-02-16, 21:36   
Thor napisał/a:
taki znaczek oznacza brak obrazka. Popatrz czy ścieżki do obrazków dobrze są poustawiane.


Heh... takie co tam są podane w ogole nie istnieją, a jak podam scieżki to obrazki się nie zmieniają jak się na nie najedzie... W ogóle tego nie rozumiem.

W którym miejscu musze podać ścieżke do obrazka, jak na przycisku nie jest kursor, a w którym do obrazka, jak już się najedzie myszką na ten przycisk??
_________________
#pctown.pl @ PolNet
http://crooleeck.jogger.pl/
 
 
   
Thor 
Moderator



Pomógł: 57 razy
Wysłany: 2006-02-16, 22:21   
Poprzednio myliłem się - problem nie leży w lokalizacji obrazków.

No więc spróbuję poprawić ;)

Kod:

<HTML>
<HEAD>
<LINK REL="stylesheet"
HREF="style.css"
TYPE="text/css">
<META NAME="Description" CONTENT="Strona prywatna crooleeck">
<META NAME="Keywords" CONTENT="crooleeck tutaj są dane kontaktowe, a także opis jak się ze mną kontaktować">
<IMG SRC="pliki/logo.jpg"></IMG>
<script language="javascript">


browserName = navigator.appName;   
         browserVer = parseInt(navigator.appVersion);
             if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
             else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
             else browserVer = "2";

if (browserVer == 1) {
a1 = new Image(118,46);
a1.src = "przycisk.jpg";
a2 = new Image(118,46);
a2.src = "wcisniety.jpg";
b1 = new Image(118,46);
b1.src = "przycisk.jpg";
b2 = new Image(118,46);
b2.src = "wcisniety.jpg";
c1 = new Image(118,46);
c1.src = "c1.jpg";
c2 = new Image(118,46);
c2.src = "c2.jpg";
d1 = new Image(118,46);
d1.src = "d1.jpg";
d2 = new Image(118,46);
d2.src = "d2.jpg";
e1 = new Image(118,46);
e1.src = "e1.jpg";
e2 = new Image(118,46);
e2.src = "e2.jpg";
}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

</script>
</HEAD>
<BODY>
<BR>
<TABLE>
<TR>
<TD CLASS="menu">
<a href="1.html" onMouseOver="hiLite('img02','a2')" onMouseOut="hiLite('img02','a1')">
<img name="img02" src="wcisniety.jpg" border=0 height=40 width=120></a>
<a href="java.html" onMouseOver="hiLite('img01','b2')" onMouseOut="hiLite('img01','b1')">
<img name="img01" src="przycisk.jpg" border=0 height=40 width=120></a>
<a href="vrml.html" onMouseOver="hiLite('img04','c2')" onMouseOut="hiLite('img04','c1')">
<img name="img04" src="c1.jpg" border=0 height=40 width=120></a>
<a href="delphi.html" onMouseOver="hiLite('img03','d2')" onMouseOut="hiLite('img03','d1')">
<img name="img03" src="d1.jpg" border=0 height=40 width=120></a>
</TD>
<TD CLASS="reszta">
to sobie będę pisal co mi się zachce
</TD>
</TABLE>
</BODY>
</HTML>


Powinno zadziałać. Problem polegał na tym, że te tutorial jest niedobry - w jednej części operowano na nazwach a1, a2, b1, b2 a w drugiej na nazwach java1, java2, javascript1, javascript2 ...
Żeby zaskoczyło w katalogu muszą być obrazki o nazwach takich jak podano w a1, a2, b1, b2 ... oraz obrazki zdefiniowane przy img01, img02 ...

I jeszcze jedno - w przypadku tego kodu, przy czterech linkach/obrazkach definicja e1 i e2 jest zbędna. Nie wiem też czy w
Kod:
(browserName == "Microsoft Internet Explorer" && browserVer == 4)
nie powinno być browserVer >= 4 bo nie chciało mi się szukać ale wydaje mi się, że to zwraca wersję przeglądarki.
 
   
crooleeck 
Wymiata!


Pomógł: 25 razy
Skąd: Miedziana Dzioora...
Wysłany: 2006-02-16, 22:29   
Thor napisał/a:
Problem polegał na tym, że te tutorial jest niedobry - w jednej części operowano na nazwach a1, a2, b1, b2 a w drugiej na nazwach java1, java2, javascript1, javascript2 ...
Żeby zaskoczyło w katalogu muszą być obrazki o nazwach takich jak podano w a1, a2, b1, b2 ... oraz obrazki zdefiniowane przy img01, img02 ...

I jeszcze jedno - w przypadku tego kodu, przy czterech linkach/obrazkach definicja e1 i e2 jest zbędna. Nie wiem też czy w
Kod:
(browserName == "Microsoft Internet Explorer" && browserVer == 4)
nie powinno być browserVer >= 4 bo nie chciało mi się szukać ale wydaje mi się, że to zwraca wersję przeglądarki.

Pomogło!! Teraz jest już wszysko git. Dzięki bardzo. Co do e1 i e2, zostawie, jakbym chciał dodać jeszcze jakiś przycisk. Dzięki bardzo.
_________________
#pctown.pl @ PolNet
http://crooleeck.jogger.pl/
 
 
   
Wyświetl posty z ostatnich:   
Dodaj do: WypowiedÄ˝ dla Wykop  WypowiedÄ˝ dla Facebook  WypowiedÄ˝ dla Wyczaj.to  WypowiedÄ˝ dla Gwar  WypowiedÄ˝ dla Delicious  WypowiedÄ˝ dla Digg  WypowiedÄ˝ dla Furl  WypowiedÄ˝ dla Google  WypowiedÄ˝ dla Magnolia  WypowiedÄ˝ dla Reddit  WypowiedÄ˝ dla Simpy  WypowiedÄ˝ dla Slashdot  WypowiedÄ˝ dla Technorati  WypowiedÄ˝ dla YahooMyWeb
Forum komputerowe PC Town Strona Główna » Kompiradło » Webmaster » [css] Zmiana koloru po najściu myszką na div'a
Ten temat jest zablokowany bez możliwości zmiany postów lub pisania odpowiedzi
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
 Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB modified by Przemo © 2003 phpBB Group
system walidacji dla gości opracował Petermechanic
Forum komputerowe
Strona wygenerowana w 0,12 sekundy. Zapytań do SQL: 12