[Cstrike-Comunity]->We Are Crowing Every Day!!!
 
AcasaPortalCalendarFAQCautareMembriGrupuriInregistrareConectare
banner3 EvolutionGaming!

Distribuiţi | 
 

 Elemente de Pagina (Part 3)

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
moris

avatar

Mesaje : 3
Puncte : 9
Reputatie : 0
Data de inscriere : 18/07/2011

MesajSubiect: Elemente de Pagina (Part 3)   Joi Aug 04, 2011 6:48 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:

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 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>
Sus In jos
Vezi profilul utilizatorului
dani2153
Admin
avatar

Mesaje : 103
Puncte : 111
Reputatie : 0
Data de inscriere : 16/09/2011
Varsta : 23
Localizare : Bucuresti

MesajSubiect: Re: Elemente de Pagina (Part 3)   Sam Sept 17, 2011 8:04 pm

Buna Treaba -tpc -tpc
Sus In jos
Vezi profilul utilizatorului
 
Elemente de Pagina (Part 3)
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
We Are Crowing Every Day! -> Suntem in crestere in fiecare zi! :: Cstrike # Tutoriale Web :: ..: Tutoriale CSS ::..-
Mergi direct la:  
Forumgratuit.ro | © phpBB | Forum gratuit de suport | Contact | Semnaleaza un abuz | Creeaza-ti un blog