Descriere:ELEMENTE DE PAGINA (PARTEA 3)
Download:
Autor:
Sursa (Link-ul oficial): Propria parere:Enjoy!
Tutorialul:
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:
Cod: Selectaţi tot
<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>