phpBB2 by Przemo

[Phantom]

Witam,

Chciałbym się dowiedzieć jak zrobić nawigację obrazkową za pomocą funkcji <div="">,
której nigdy w życiu nie stosowałem
Wyjaśnię dokładnie o co chodzi...
Powiedzmy, że mamy obrazek nr1 a gdy najedziemy na niego pokaże nam się obrazek nr2
Chciałbym wiedzieć co trzeba wpisać do pliku css i jak to wszystko użyć/zakodować w pliku overall_header.tpl

Próbowałem coś tam zrobić ale nie wychodzi..
w pliku css wpisałem

Kod:

#faq1 {     background: url("templates/subSliver/images/nav/faq.png") no-repeat; } #faq1:hover {     background: url("templates/subSliver/images/nav/faq2.png") no-repeat; }

a w overall_header.tpl:

Kod:

<table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url('templates/subSliver/images/tlo_nawigacji.png'); background-position: center; background-repeat: repeat-x"> <tr><td> <a href="{U_FAQ}" id="faq1"></a><td></tr>

i żaden obrazek się nie pokazał
Mógłby mi ktoś wyjaśnić jak to zrobić ?

[Gadatliwa Kasia]

[Tavaro]

Cytat:

w pliku css wpisałem

Po co się męczyć z deklaracją zewnętrzną dla dwóch linijek?

Kod:

< ... style="background-image: url(adres_obrazka_przed_najechaniem); background-repeat: no-repeat; (reszta stylu)" onmouseover="this.style.background='url(adres_obrazka_po_najechaniu)';" onmouseout="this.style.background='url(adres_obrazka_po_zdjęciu_kursora_z_elementu)';" onclick="location.href='docelowy_url_dla_linka';" ... >

Div to nie funkcja, to tag.

Przykład:

Cytat:

<div style="background-image: url(images/nohover.gif); background-repeat: no-repeat;" onmouseover="this.style.background='url(images/hover.gif)';" onmouseout="this.style.background='url(images/nohover.gif)';" onclick="location.href='faq.php';">

Ściągawkę masz też na moim www

[Phantom]

Zdaje mi się, że przy użyciu takiej metody jaką podałeś obrazki zmieniają się z dużym opóźnieniem, chociaż jej nie stosowałem ... jest bardzo podobna do tej, która mam aktualnie w nawigacji:

Kod:

<img src="templates/subSilver/images/nav/home.png" onmouseover="src='templates/subSilver/images/nav/home2.png'" onmouseout="src='templates/subSilver/images/nav/home.png'" border="0" width="58" height="37" style="vertical-align: bottom;">

Więc chciałbym się także dowiedzieć czy te obrazki rzeczywiście ładują się z opóźnieniem przy kodzie jakiego używam, być może z twoim sposobem będzie inaczej, sprawdzimy
aha, o co chodzi z tym ;P

[Tavaro]

[Phantom]

Tavaro, umieściłem jeden obrazek z twoim sposobem jaki mi podałeś, i jest mały problem
Obrazek jest wyświetlany po całej ciągłości nawigacji, po prostu się powtarza
próbowałem zrobić tak

Kod:

onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';"

zamieniałem na:

Kod:

onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)'; background-repeat: no-repeat;"

ale wtedy obrazek się nie wyświetla
Jakaś rada ?

[Tavaro]

Spróbuj tak:

Kod:

<!-- wczytanie obrazków dla hover --> <img src="templates/subSilver/images/nav/home2.png" width="0" height="0" style="width: 0px; height:0px;" alt=""> <!-- div najeżdżalny --> <div style="background-image: url(templates/subSilver/images/nav/home.png)" background-repeat: no-repeat; width: 50px; height: 37px;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='http://blablabla.pl';"></div>

No i wypozycjonuj div-a za pomocą

Kod:

position: ...

W praktyce: klik -> źródło.

[Phantom]

Właśnie chodzi o to, że brakuje tam kodu, który uniemożliwi obrazkowi powtarzanie się po całej tabeli
Nie mam pojęcia jaki to jest kod (te co próbowałem nie działają) i gdzie go umieścić

[Tavaro]

Może inaczej: pokaż mi ten kod.

[Phantom]

Ok, z tym już sobie poradziłem dodałem

Kod:

position: relative; width: 58px; height: 37px;

i pomogło

[Tavaro]

Cytat:

<img src="templates/subSilver/images/nav/home2.png" width="0" height="0" style="width: 0px; height:0px;" alt=""> <img [img2] > <img [img3] > ...i tak dalej <table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url(templates/subSilver/images/tlo_nawigacji.png); background-position: center; background-repeat: repeat-x"> <tr> <td width="100%" height="29" align="left" valign="center" style="background-image: url('templates/subSilver/images/p_c.png');"> <div style="margin: 0; background-image: url(templates/subSilver/images/nav/home.png)" background-repeat: no-repeat; width: 50px; height: 37px; position: ... ;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='http://faq.php';"></div> <div dla img2... ></div> <div dla img3... ></div> ...i tak dalej. </td> </tr> </table>

"Ogranicznikiem" są rozmiary div-a (kolor czerwony), jedyne, co trzeba ustawić (metodą prób i błędów - najlepiej najpierw zakodować wszystkie div-y w html-u, a dopiero potem ustawiać przez position: relative), to położenie tych div-ów (kolor niebieski). Oczywiście rozmiary div-a muszą równać się rozmiarowi obrazków.

Chociaż, będąc na Twoim miejscu, nie babrałbym się w tym przypadku z tabelami i zrobił to wszystko na div-ach.

Edit:

Cytat:

Ok, z tym już sobie poradziłem dodałem

No przecież podawałem wcześniej w kodzie...

[Phantom]

Teraz jest inny problem bo obrazki nie są w lini tylko pod sobą się układają
Jak zrobić, żeby były w jednej lini ?

Kod:

<table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url('templates/subSilver/images/tlo_nawigacji.png'); background-position: center; background-repeat: repeat-x"> <tr> <td width="100%" height="29" align="left" valign="center" background="templates/subSilver/images/p_c.png"> <div style="position: relative; width: 58px; height: 37px; background-image: url(templates/subSilver/images/nav/home.png); background-repeat: no-repeat;" onmouseover="this.style.background='url(templatessubSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='faq.php';">&nbsp;</div> <img src="templates/subSilver/images/nav/sep.png" border="0" height="37" style="vertical-align: bottom;"> <div style="position: relative; width: 58px; height: 37px; background-image: url(templates/subSilver/images/nav/home.png); background-repeat: no-repeat;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='faq.php';">&nbsp;</div> </td> </tr>                 </table>

[Tavaro]

Cytat:

Jak zrobić, żeby były w jednej lini ?

Zamiast separatora w postaci obrazka (<img>) użyj div-a z tłem sep.png (pamiętaj o wymiarach), następnie wszystkim div-om wewnątrz <tr> (dotyczy także tych z tłem sep.png) dodaj do stylu

Kod:

display: table-cell;

albo

Kod:

display: inline;

[Phantom]

Tavaro, szacunek dla Ciebie za twoją pomoc

Wszystko śmiga, lata jak należy

Pozdrawiam

Edit:
Ostatnie pytanie
Gdy dodam kod

Kod:

display: table-cell;

wszystko jest pięknie ładnie pod przeglądarką mozilla i opera.
Pod przeglądarką IE wszystko się rozjeżdża
lecz gdy zamienie

Kod:

display: table-cell;

na

Kod:

display: inline;

pod przeglądrką IE jest wszystko ok ale inne przeglądarki nie wyświetlają obrazków

Jakaś rada na rozwiązanie tego typu problemu ?

[nike_00]

[Gadatliwa Kasia]

[Radek]

Phantom,
http://www.grabun.com/tek...y/css-rollover/
Poczytaj o Rollover w CSS i nie będzie trzeba korzystać z onmouseover i onmouseout, podświetlony i normalny przycisk jest w jednym obrazku, nie ma opóźnień między podświetlaniem.