przyciemnione tło ale działający przycisk Opcje

[miccom]

Witam.
Szukam sposobu na wykonanie "poradnika" dla nowych użytkowników...
Myślę nad czymś takim, aby po kliknięciu przycisku PORADNIK strona przyciemniła się, wtedy chciałbym pokazać okienko z instrukcją i odsłonić tylko część strony, np. konkretny przycisk czy link (IMG:style_emoticons/default/smile.gif) , po kliknięciu w ten link, przyciemniam kolejną stronę, wyświetlam okienko z kolejną instrukcją...i tak aż do zamierzonego celu.
Jak wykonać takie zadanie?
Proszę o pomoc i propozycje.
Pozdrawiam.
miccom

[Crozin]

1. Pobierasz sobie lokalizację elementu względem początku dokumentu oraz jego wymiary. To będzie obszar, który będzie miał pozostać nieprzyciemniony, z możliwością kliknięcia w niego.
2. Tworzysz sobie cztery elementy DIV, z półprzeźroczystym tłem, które będą miały pozycjonowanie absolutne (CSS: position: absolute).
3. Dla każdego z czterech DIV-ów ustalasz odpowiednią wysokość, szerokość oraz lokalizację.
4. Powinieneś całą procedurę powtórzyć w przypadku zmiany rozmiaru dokumentu/okna przeglądarki.

(IMG:http://i49.tinypic.com/2vbap8n.png)

[miccom]

O widzisz... o tym nie pomyślałem (IMG:style_emoticons/default/smile.gif)
Ma ktoś jeszcze jakieś pomysły/propozycje?

[kamil4u]

Ew. mógłbyś używać odpowiednio z-index*, ale to nie jest najlepszy sposób. Pomysł Crozin-a wydaje się lepszy, gdyż nie musisz ingerować w CSS danej strony, poza tym jest to wbrew pozorom łatwe do zrobienia (IMG:style_emoticons/default/smile.gif)

*W skrócie masz warstwę przyciemnioną z małym z-indexem. Konkretnemu elementowi( np. link ) zmieniasz odpowiednio styl( zIndex i ew. position ), dzięki czemu jest on wyżej. Jak chcesz, żeby miał odpowiednią obwódkę( prostokątną ) zmieniasz jeszcze HTML, to jest opakowujesz dany element w div-a.

Ten post edytował kamil4u 7.08.2012, 10:49:59