[HTML/CSS][Problem] Podświetlane menu

[Fugazi]

Witam wszystkich!

Mam problem ze stworzeniem podświetlanego menu (menu, w ktorym obrazki odnosnikow zmienija sie po najechaniu na nie myszka) w htmlu. Posiłkowalem sie tutorialem umieszczonym na webinside.pl ( http://www.webinside.pl/html/tutoriale/88 ) ale tak stworzone menu nie dziala jak powinno... W Operze po wybraniu odnosnika i powrocie do menu glownego podswietlanie przestaje dzialac a w IE albo przy kazdym odnosniku wystepuje na dole czarny pasek albo obrazki w ogole sie nie zmieniaja po umieszczeniu na nich myszki. Moze ktos moglby mi cos poradzic? Wskazac co robie zle, odeslac mnie do jakiegos miejsca w sieci gdzie moge znalezc pomoc? Mecze sie z tym od rana i bylbym bardzo wdzieczny za pomoc.

Oto fragment kodu, ktory jest odpowiedzialny za to menu:

Kod: Zaznacz cały

</table> 

<table CELLSPACING="0" CELLPADDING="0" BORDER="1" width="700" height="20" 
align="center" valign="bottom"> 
<tr> 

<td CELLSPACING="0" CELLPADDING="0" VALIGN="bottom" align="center" height="20" width="40"> 
<a href="adres do strony" onMouseOver="document.obrazek.src='news2.jpg'" onMouseOut="document.obrazek.src='news.jpg'"> 
<img src="news.jpg" width="47" height="25" name="obrazek" border="0"></a> 
</td> 

<td CELLSPACING="0" CELLPADDING="0" BORDER="1" VALIGN="bottom" align="center" height="20" width="40"> 
<a href="adres do strony" onMouseOver="document.obrazek1.src='sklad2.jpg'" onMouseOut="document.obrazek1.src='sklad.jpg'"> 
<img src="sklad.jpg" width="58" height="25" name="obrazek1" border="0"></a> 
</td> 

Pozdrawiam

[Stig]

Fakt jest taki, że tego typu efekt lepiej stworzyć przy pomocy css'owej pseudoklasy :hover. Odsyłam do specyfikacji.

[beno]

Lub utwórz w ImageReady efekt rollover; program sam Ci napisze kod ;]

[Fugazi]

Dzieki za odpowiedz.

Przeczytalem specyfikacje i tutoriala na stronie, jest tam opisane jak zmieniac wlasciwosci tekstu reprezentujacego linki, ale nadal nie wiem jak uzyc tego zeby zmianic obrazek reprezentujacy odsylacz.
Na swojej stronie chcialbym stworzyc 10 odsylaczy, kazdy reprezntowany przez 2 obrazki (jeden zwykly i drugi rozjasniony w photoshopie, ktory zalaczy sie po najechanie na odsylacz myszka).
Moglby ktos cos poradzic albo odeslac w jakies pomocne miejsce w sieci?

Z gory bardzo dziekuje

[Fugazi]

ImageReady? Moglbys napisac cos wiecej?

[Stig]

Przeczytalem specyfikacje i tutoriala na stronie, jest tam opisane jak zmieniac wlasciwosci tekstu reprezentujacego linki, ale nadal nie wiem jak uzyc tego zeby zmianic obrazek reprezentujacy odsylacz.

Wystarczy owe obrazki, za pomocą atrybutu background-image, ustawić jako tło linka. Przykład kodu CSS:

Kod: Zaznacz cały

a.news, a.sklad {
display: block;
width: 100px;
height: 20px;
}
a.news {
background-image: url("news.jpg");
}
a.sklad {
background-image: url("sklad.jpg");
}
a.news:hover {
background-image: url("news2.jpg");
}
a.sklad:hover {
background-image: url("sklad2.jpg");
}
a span {
display: none;
}

Przykład markup'a:

Kod: Zaznacz cały

<a href="#" class="news" title="News"><span>News</span></a><br /><a href="#" class="sklad" title="Skład"><span>Skład</span></a>

BTW, lepszym formatem od JPEG dla tego typu grafik jest chociażby PNG.

[Fugazi]

Pieknie dziekuje!!!

[Fugazi]

Pojawil mi sie jeszcze jeden problem.

W IE menu dziala wysmienicie jednak w Operze obrazki laduja sie z duzym opoznienim, a czasem przy wyborze odnosnika z menu i nastepnie powrocie, niektore obrazki nie chca sie wcale ladowac i jak najezdzam na odnosnik widac tylko czarne tlo. Nie wiem o co z tym chodzi. Gdzies wyczytalem ze trzeba uzyc skryptu, ktory wczyta wszystkie wykorzystywane w menu obrazki do pamieci. Czy o to chodzi i to pomoze? Jesli tak, to czy moglby mi ktos podac jak powinien wygladac taki skrypt, zeby ladowal obrazki do menu, ktorego wzor podal Stig?

Pozdrawiam

[Stig]

Faktycznie, w Operze występują pewne problemy z wyświetlaniem się tła dla pseudoklady :hover. Mimo wszystko istnieje na to pewne rozwiązanie.
Otóż, najlepiej połączyć ze sobą (np. jedna pod drugą) obie grafiki odpowiadające za wyświetlanie tła danego linku na dwa sposoby (czyli w tym przypadku np. news.jpg i news2.jpg łączymy w jedną całość i nadajemy nazwę news.jpg). Następnie w pseudoklasie :hover atrybut odpowiadający za ustawianie nowego tła (background-image) należy zamienić na atrybut ustawiający pozycję tła (background-position) tak, aby tłem była druga-dolna część obrazka (a więc wartość "przesunięca" wzdlędem górnej krawędzi obrazka będzie równa wysokości połowy obrazka ustawianego jako tło). Przykładowo: przed scaleniem obrazki news.jpg i news2.jpg miały wysokość po 20px. Po scaleniu wspólny obraz news.jpg ma wysokość 40px. A więc wartość "przesunięcia" równa jest 20px.
Przykład kodu CSS dla pseudoklasy :hover:

Kod: Zaznacz cały

a.news:hover { background-position: 0 20px; }

I to tyle .

[Fugazi]

Jeszcze raz pieknie dziekuje

[bercik007]

Witam
Też miałem ten sam problem i zrobiłem tak jak pisaliście i rzeczywiście wszystko działa tyle że wyświetla mi to w kolumnie jeden pod drugim a ja chciałbym żeby było to wyświetlane w poziomej lini. Może mi ktoś powiedzieć jak to zrobić?

[Stig]

Podstawą jest stworzenie w markup'ie odpowiedniej listy. Przykład:

Kod: Zaznacz cały

<ul>
<li><a href="#" title="tytuł">nazwa</a></li>
<li><a href="#" title="tytuł">nazwa</a></li>
<li><a href="#" title="tytuł">nazwa</a></li>
<li><a href="#" title="tytuł">nazwa</a></li>
</ul>

W arkuszu stylów samo wyświetlanie w poziomie można uzyskać dzięki odpowiedniemu zastosowaniu atrybotów float i display. Przykład:

Kod: Zaznacz cały

ul {
padding: 0;
margin: 0;
}
ul li {
display: block;
float: left;
}

I to właściwie tyle.

Więcej informacji o listach znajdziesz na CSS MaxDesign.