Printable View
ciao a tutti
se io ho questa tabella
come posso fare perchè al passaggio del mouse diventa lo sfondo #000000 ??Codice PHP:<table width="450" border="0">
<tr>
<td bgcolor="#FF0000"><p align="center">ATTENZIONE!!!</p>
<p align="center">testo</p></td>
</tr>
</table>
devi usare javascript di certo non php
infatti ho letto qui
http://forum.it.altervista.org/basi-...del-mouse.html
:D
solo che lui usa
invece a me servono i colori:Codice PHP:<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.backgroundColor='red';
}
function mouseout()
{
document.getElementById("thediv").style.backgroundColor='white';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style="width:200px;height:200px;border:solid thin black" id=thediv onmouseover="mouseover()" onmouseout="mouseout()">
<div>
</BODY>
</HTML>
finche son sopra col mause #ffffff
appena tolgo il mouse #333333
ho provato a metterli al posto di red e white ma non va
ovviamente anziche gli ' ho utilizzato "
cosa centra usare ' o " da lo stesso risultatoCitazione:
Originalmente inviato da linuxmx
cmq sostituisci ".style.backgroundColor" con ".style.background" dovrebbe funzionare
ciao
devi usare le classi css.
:wink:Codice:.classe {
background-color: #FF0000; /* Colore normale */
}
.classe:hover {
background-color: #000000; /* Colore se ci passi sopra, quindi in hover */
}
.classe:active {
background-color: #FFFFFF; /* Colore se ci clicchi, quindi in hover */
}
biccheddu, se avessi letto la discussione da lui citata, si parlava di inserire un hover su elementi che non sono <a>, che funzioni anche in IE6. Il css in questo caso non è sufficiente, ed era già stato suggerito in quel thread.
ci sto riuscendo allora ho inserito in testa alla pagina:
e poi ho fatto varie tabelle per i menuCodice PHP:<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.background='#FF0000';
}
function mouseout()
{
document.getElementById("thediv").style.background='#333333';
}
//-->
</SCRIPT>
solo che purtroppo mi cambia colore solo al primo link... xke?????????Codice PHP:<table width="150" border="0">
<tr>
<td height="35"><table height="35" width="150" border="1">
<tr>
<td align="center" valign="middle">Menù</td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" id=thediv onmouseover="mouseover()" onmouseout="mouseout()"><a href="http://linuxmx.altervista.org/guide/index/index.php">Guide</a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" id="thediv" onmouseover="mouseover()" onmouseout="mouseout()"><a href="http://linuxmx.altervista.org/guide/index/index.php">Forum</a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" id="thediv" onmouseover="mouseover()" onmouseout="mouseout()"><a href="http://linuxmx.altervista.org/guide/index/index.php">BlackMandriva</a></div></td>
</tr>
</table></td>
</tr>
</table>
<p>
Fai attenzione al colore del codice e vedrai una differenza :wink:
cioè? non capiscoCitazione:
Originalmente inviato da seneca
Non puoi usare più di 1 elemento con lo stesso attributo ID (Identifier)...
Codice PHP:<SCRIPT TYPE="text/javascript">
<!--
function mouseover(elem)
{
elem.style.background='#FF0000';
}
function mouseout(elem)
{
elem.style.background='#333333';
}
//-->
</SCRIPT>
Codice HTML:<table width="150" border="0">
<tr>
<td height="35"><table height="35" width="150" border="1">
<tr>
<td align="center" valign="middle">Menù</td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="http://linuxmx.altervista.org/guide/index/index.php">Guide</a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="http://linuxmx.altervista.org/guide/index/index.php">Forum</a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30"><table height="30" width="150" border="1">
<tr>
<td><div align="center" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="http://linuxmx.altervista.org/guide/index/index.php">BlackMandriva</a></div></td>
</tr>
</table></td>
</tr>
</table>
<p>
mittico!!!!:lol::lol::lol::lol:
Mi scuso, ma non mi ero accorto proprio degli altri topic :oops:Citazione:
Originalmente inviato da dreadnaut
rievoco questo topic...
ora, anzichè sfondi, devo cambiare immagini... o meglio:
se il mouse è sopra devo visualizzare l'immagine "img/titoloevid.png"
se il mouse non vi è sopra, o vi si sposta deve essere lo sfondo "trasparente"
come posso fare?
Poi ovviamente le proprietà dello sfondo le gestisci tu!Codice:elemento {
background: transparent;
}
elemento:hover {
background: url('img/titoloevid.png');
}
io usavo:Citazione:
Originalmente inviato da biccheddu
ehm.... cosa devo modificare esattamente?Codice PHP:<SCRIPT TYPE="text/javascript">
<!--
function mouseover(elem)
{
elem.style.background='#E52B50';
}
function mouseout(elem)
{
elem.style.background='#CEDCDC';
}
//-->
</SCRIPT>
che bisogno c'è di usare javascript?
Ti ho postato la soluzione, se non dici precisamente a cosa/dove/come vuoi cambiare, è difficile aiutarti!
http://linuxmx.altervista.org/xxxx/1.phpCitazione:
Originalmente inviato da biccheddu
ecco qui, vorrei che al passaggio del mouse sui link mi appaia l'immagine dei due palloni laterali...
sul link vedi cosa intendo...
sto riscrivendo il sito da zero
Codice HTML:a {
display: block;
background: none;
text-align: center;
}
a:hover {
background: url('img/titoloevid.png') no-repeat top center;
}
si ok ma come lo attivo???
ad esempio la tabella è
Codice PHP:<tr>
<td bgcolor="#CCCCCC"><div align="center"><a href="#">link 1 <a href="http://linuxmx.altervista.org/xxxx/index.php#newsa" target="_self"></a></div></td>
</tr>
l'idea dei due palloni laterali è veramente brutta
e sto parlando di codice e non della bellezza dei palloni
perchè a seconda del font sul computer di chi vede, il testo potrebbe accavallarsi all'immagine e/o ti costringerebbe a giocare col padding complicandoti la vita
detto questo per fare un link
il tuo html è sbagliato, è meglio non usare mai la formattazione inline ma se è il caso le classiCodice:a:link, a:visited, a:active {
display: block;
background-image: none;
outline: none;
text-align: center;
}
a:hover {
background-image: url("tuaimmagine.png") no-repeat center top;
}
Codice PHP:<tr>
<td><div><a href="index.php#newsa">link 1</a></div></td>
</tr>
Almeno consigli bene, il tuo codice MAI funzionerà :wink:
vero, bisogna fare così
Codice:a:hover {
background-image: url(tuaimmagine.png);
background-position: center center;
}
Ancora sbagliato...
il tag a, non è un elemento che ha il display: block; standard come potrebbe averlo un h* (ora no nricordo come si chiama come proprietà, che ha il div e altri tag), quindi lo sfondo non si vedrebbe.
Il codice che gli ho postato io è giusto in parte, in quanto manca l'attributo height che deve specificare in base allì'atezza dell'immagine, in questo modo i link andrebbero a capo da solo proprio per via del display: block;.
Quello che hai scritto nel secondo post può essere benissimo:
In questo modo si ripeterebbe nel caso si aumentassero i valori di default dle testo.Codice:background: transparent url(tuaimmagine.png) center center;
Prova questo codice:
Codice:a {
display: block;
background: none;
text-align: center;
height: 25px;
}
a:hover {
background: transparenturl('img/titolievid.png') no-repeat center center;
}
non ci avevo pensatoCitazione:
Originalmente inviato da acsocmel
http://linuxmx.altervista.org/xxxx/1.php
ho fatto un immagine allora
http://linuxmx.altervista.org/xxxx/img/menudx_news1.png
quando sono sopra deve diventare
http://linuxmx.altervista.org/xxxx/i..._news1over.png
come faccio?
ho pensato che visto che usi le png con trasparenza basta un'immagine come sfondo e le altre come titoli
quindi magari puoi togliere il testo dall'immagine coi palloni
Codice PHP:<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: none;
background-image: none;
line-height: 0px;
margin: 0px;
padding: 0px;
display: block;
}
a:hover {
background-image: url(http://linuxmx.altervista.org/xxxx/img/menudx_news1over.png);
}
a img {
border: none
}
-->
</style>
prova cosìCodice PHP:<table width="160" border="1" cellspacing="10" cellpadding="0">
<tr>
<td><a href="#" title="link 1"><img src="http://linuxmx.altervista.org/xxxx/img/menudx_news1.png" alt="1" /></a></td>
</tr>
<tr>
<td><a href="#" title="link 2"><img src="http://linuxmx.altervista.org/xxxx/img/menudx_news1.png" alt="1" /></a></td>
</tr>
<tr>
<td><a href="#" title="link 3"><img src="http://linuxmx.altervista.org/xxxx/img/menudx_news1.png" alt="1" /></a></td>
</tr>
<tr>
<td><a href="#" title="link 4"><img src="http://linuxmx.altervista.org/xxxx/img/menudx_news1.png" alt="1" /></a></td>
</tr>
<tr>
<td><a href="#" title="link 5"><img src="http://linuxmx.altervista.org/xxxx/img/menudx_news1.png" alt="1" /></a></td>
</tr>
</table>
fantastico funziona, ma:
1) è possibile cambiare il nome? xke inserito in una pagina dove ho Powered by PhpNeoGallery 1.2b mi spagina tutto... penso basti cambiare i nomi del css... ma non vorrei fare danni quindi vi chiedo consiglio
2) quel'è il comando che nella tabella dice di sovrapporre l'immagine al passaggio del mouse?
grazie mille per la disponibilità
== post edit
infatti nel css di phpneogallery vi è
questo non voglio modificarlo, mi toccherebbe mettere le mani su tutto il phpneogallery, credo sia piu facile sistemare il mio, ma non so da dove iniziareCodice:a:link,
a:visited,
a:active {
color:#3366CC
}
a:hover {
color:#3366CC
}
Ma non sarebbe più facile usare onmouseover e onmouseout?
zomer io ti consiglio di evitare l'abuso di Javascript e di utilizzarlo solo dove strattamente necessario. Non è una buona cosa usarlo solo perchè più semplice o quant'altro. Il sito non va ottimizzato solo per chi lo crera, ma per la maggior parte dell'utenza che sicuramente è diversa da te.
mi potete dare una dritta? please..Citazione:
Originalmente inviato da linuxmx
http://www.makingart.org/cosa-sono-i...330.html#p1643
Qui spiego molto facilmente cosa sono i css e come utilizzarli.