»  Pagina principala  »  JavaScript »  Elemente de pagina (partea 3)

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

Cristian Bozeanu

Free Mini Games

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php