AcasaportalCalendarGalerieFAQCautareMembriGrupuriInregistrareConectare




//
Distribuiţi|

[JavaScript]Elemente de pagina

Vezi subiectul anterior Vezi subiectul urmator In jos
AutorMesaj
Fondator
avatar

Rank: Fondator
Mesaje : 545
Multumiri : 6
Data de inscriere : 14/02/2012
Varsta : 22
MesajSubiect: [JavaScript]Elemente de pagina Sam Iul 28, 2012 11:12 pm

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:
<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
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
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.
Sus In jos
Vezi profilul utilizatorului http://x-metin.forumer.ro
Administrator
avatar

Rank: Administrator
Mesaje : 123
Multumiri : 0
Data de inscriere : 17/02/2013
MesajSubiect: Re: [JavaScript]Elemente de pagina Lun Feb 18, 2013 4:59 pm

Frumos, Tutorialul !
Sus In jos
Vezi profilul utilizatorului

[JavaScript]Elemente de pagina

Vezi subiectul anterior Vezi subiectul urmator Sus
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Scripting Web Metin2 :: Scripturi si tutoriale HTML-