rollover css per barra di navigazione basata su immagini

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
Ciao ragazzi,
c'è qualcuno che potrebbe aiutarmi a a dissipare un dubbio? Vorrei cambiare la barra di navigazione realizzata usando javascript con una basata su i css. Primo si può fare, facendo in modo che ogni voce della barra sia associata ad una immagine diversa? Ho trovato questo codice che ho in parte adattato ma mi sono fermato qui...sapete dirmi come fare...mille grazie in anticipo. ciao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barra di navigazione a 3 stati con immagini</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-family: Verdana, sans-serif;
background-color:#e5e5e5;
text-align:center;
}
h1{color:#333; font:1.2em Verdana,sans-serif;}

div#barranav{
width:85%;
margin-top:70px auto;
/*border:1px solid #000;*/
padding-top:0;
height:70px;
}

div#barranav ul{
list-style-type:none;
margin:0;
padding:0;
}

div#barranav li{
float:left;
margin:0 2px 0 0;
padding:0;
}

div#barranav a{
display:block;
width:91px;
height:70px;
line-height:35px;
text-decoration:none;
background:url("img/home.jpg") no-repeat top center;
color:#fff;
font-variant:small-caps;
font-size:.8em;
font-weight:bold;
}
div#barranav a:hover{
background: url("img/home_on.jpg") no-repeat top center;
color:#336;
}

div#barranav li#active{
width:91px;
height:70px;
line-height:35px;
background:url("img/home_on.jpg") no-repeat top center;
color: #fff;
text-indent:11px;
font-size:.8em;
font-weight:bold;
font-variant:small-caps;
}

</style>

</head>

<body>
<h1>Barra di navigazione con CSS e immagini </h1>
<div id="barranav">
<ul>
<li id="active">Home</li>
<li><a href="pag_asp.htm">ASP</a></li>
<li><a href="pag_js.htm">Javascript</a></li>
<li><a href="pag_css.htm">CSS</a></li>
<li><a href="pag_xml.htm">Corso XML</a></li>
<li><a href="pag_guest.htm">GuestBook</a></li>
</ul>

</div>

<h1>Questa è la Home Page</h1>

</body>
</html>
 

lukeonweb

Utente Attivo
5 Mar 2003
5.177
10
38
42
Napoli
www.lucaruggiero.it
Puoi creare n classi per ogni link, o magari usi gli id che ha piu' senso.

Esempio

<a href="a.html" id="a">a</a>
<a href="b.html" id="b">b</a>
<a href="c.html" id="c">c</a>

#a
{
background-image: url(a1.gif);
}
#a:hover
{
background-image: url(a2.gif);
}

e lo stesso per b c.

E' scomodo... Javascript serve a questo, facilitarela vita in certi casi!

:byebye:
 

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
grazie per l'aiuto

grazie per l'aiuto...ora ci provo, pensavo che nn fosse possibile. io sono nuovo di css. mille grazie


wutangrob
 

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
grazie a lukeonweb

Ciao,
volevo ringraziarti anche se a distanza di tempo per il prezioso consiglio, sulla barra css e immagini, dopo un po' riesco a ricollegarmi e lo faccio per dire grazie. A breve, posto come ho risolto affinchè possa essere utile a chiunque lo ritenga opportuno. ciao ed ora nanna...:dormo: :dormo: