Elemente de pagina (partea 3)
In meniurile clasice nu este nici estetic si nici nu este suficient spatiu pentru a da un nume suficient de mare care sa explice continutul paginilor din spatele link-urilor.
Acest tip de meniu ofera posibilitatea de a atasa o descriere scurta, sau chiar o imagine, link-urior pe care le cuprinde, aceasta descriere fiind afisata in locul pe care-l doriti, atunci cand trec cu mouse-ul peste butoanele meniului.
Pentru a realiza acest meniu trebuie sa folosim HTML, CSS si Javascript. Pentru ca nu este un cod foarte mare, nu vom folosi fisiere javascript si css externe. Il vom pune intr-un singur fisier HTML. Eu i-am zis Meniu.html .
Vom lucra cu id-uri css, iar id-ul css pentru elementul html va fi folosit de javascript pentru a afisa descrierea link-ului.
Codul este urmatorul:
| <style type="text/css"> #meniu{ border: 1px solid black; width: 156px; background-color: #663399; } #meniu a{ font: bold 13px arial; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; } html>body #meniu a{ width: auto; } #meniu a:hover{ background-color: black; color: white; } #descriere{ padding: 2px; color: #FF0000; } </style> <script type="text/javascript"> function showtext(descrierea){ if (!document.getElementById) return document.getElementById("descriere").innerHTML=descrierea } function sterge() { document.getElementById("descriere").innerHTML="" } </script> <div id="meniu"> <a href="http://www,etutoriale.ro" onMouseover="showtext('Tutoriale Web Design Gratuite')" onMouseout="sterge()">Tutoriale Web Design</a> <a href="http://www.etutoriale.ro" onMouseover="showtext('Tutorial complet JavaScript si alte scripturi utile')" onMouseout="sterge()">Tutoriale JavaScript</a> <a href="http://www.etutoriale.ro" onMouseover="showtext('Tutoriale si scripturi PHP Gratuite')" onMouseout="sterge()">Tutoriale PHP</a> <a href="http://www.tutorialehtml.com" onMouseover="showtext('<img src=imagine1.jpg width=156 height=90>')" onMouseout="sterge()">Imagine proba 1</a> <a href="http://www.tutorialehtml.com" onMouseover="showtext('<img src=imagine2.jpg width=156 height=90>')" onMouseout="sterge()">imagine proba 2</a> </div> <p id="descriere"></p> |
Exemplu
Descrierile, cele scrise cu alb, vor fi afisate intr-un paragraf. Puteti sa afisati in orice obiect html atata timp cat acesta are id-ul descriere. In locul descrierilor text puteti sa folositi o imagine. Trebuie doar sa introduceti tag-ul pentru imagine si calea acesteia, asa cum am facut la ultimele doua link-uri din meniu.
Am folosit doua functii javascript:
- una este chemata atunci cand mouse-ul este peste un element din meniu ( showtext() ) si afiseaza textul dintre paranteze acolo unde intalneste id-ul descriere.
- a doua functie este chemata atunci cand mouse-ul nu mai este peste meniu ( sterge() ) si sterge text-ul afisat de prima.
Acest articol face parte dintr-o serie de 3 articole:
» Elemente de pagina (partea 1)
» Elemente de pagina (partea 2)
» Elemente de pagina (partea 3)
Articole asemanatoare
» Elemente de pagina (partea 1)
» Elemente de pagina (partea 2)
» Bara reprezentare procent - PHP + CSS
