Vorrei un menù fatto con immagini, che quando passa il cursore sopra esce la scritta tipo come ce le ha habbocean.com .... come devo fare?
Thread obsoleto Menù
- Autore discussione Impaziente
- Data d'inizio
Delux ex xmaionx
Utente Master
@Impaziente , basta utilizzare la proprietà Hover dei css , questa permetta quando si passa "sopra" con mouse di cambiare lo stato del tag
TUOTAG:hover
{
background-IMAGE("URL");
}
TUOTAG:hover
{
background-IMAGE("URL");
}
mi spieghi come faccio ad applicarlo ?
Ecco la parte di codice che comprende il menù su cui vorrei svolgere l'operazione:
PHP:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Delux ex xmaionx
Utente Master
inserisci ad ogni a href un: id="nomeid" (ad ognuno diverso ovviamente)
poi fai così :
#tuotag:hover
{
background
}
poi fai così :
#tuotag:hover
{
background
}
Ecco il risultato, il gattino è il tasto:
ho fatto così:
PHP:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Delux ex xmaionx
Utente Master
ma che ne so come si chiama, mi pare tooltip... mi date una guida come crearlo?
@#Xmaionx-Style comunque niente da fare... dammi il codice già fatto così imparo da quello, comunque ecco come ho fatto ancora:
PHP:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
IProxy
Utente Assiduo
Delux ex xmaionx
Utente Master
<style>
#Home:hover
{
background-image:url('l'immaginechevuoichecompaia');
}
</style>
<a href="home.php"><img style="margin-right:35px; margin-left:35px;" src="/forum/menu/home.png" id="Home"></a>
ora dovrebbe andare.
- - - Aggiornato - - -
Se non ti funziona , ecco tutta la documentazione :
http://www.w3schools.com/CSSref/sel_hover.asp
e questo è un codice completamente funzionante:
<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
#Home:hover
{
background-image:url('l'immaginechevuoichecompaia');
}
</style>
<a href="home.php"><img style="margin-right:35px; margin-left:35px;" src="/forum/menu/home.png" id="Home"></a>
ora dovrebbe andare.
- - - Aggiornato - - -
Se non ti funziona , ecco tutta la documentazione :
http://www.w3schools.com/CSSref/sel_hover.asp
e questo è un codice completamente funzionante:
<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
io ti ho detto mi dici come crearlo? non ti ho detto mettimi un codice davanti che non abbia nemmeno idea di cosa ci debba fare
FoxySeta
Utente Senior
io ti ho detto mi dici come crearlo? non ti ho detto mettimi un codice davanti che non abbia nemmeno idea di cosa ci debba fare
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Delux ex xmaionx
Utente Master
Eccoti un'altra spiegazione sulle funzioni di hover :
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, quì trovi tutti i codici e gli esempi per capire al meglio.