C3dRy2K
Administrator
Data inscrierii: 30/Dec/2008
Mesaje: 97
|
|
Meniu Rollover cu descrierea linkurilor
[url=http://www.99poze.ro/p/54774aed5af3bb12bfbda403e013b194.jpg] [/url]
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 probabilitatea 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 solitar fisier HTML. Eu i-am zis Meniu.html .
Vom lucra cu id-uri css, iar id-ul css pentru elementul html va fi întrebuințat de javascript pentru a afisa descrierea link-ului.
Codul este urmatorul:
| Citat: |
<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 Estetică 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 [url=http://etutoriale.ro/exemple/meniu-descriere/index2.html] clic aici [/url]
|
 |
