cambio colore a passaggio mouse

08-02-2009, 22.59.31

ciao a tutti

se io ho questa tabella

Codice PHP:


<table width="450" border="0">

                          <tr>

                            <td bgcolor="#FF0000"><p align="center">ATTENZIONE!!!</p>

                                <p align="center">testo</p></td>

                          </tr>

                        </table>

come posso fare perchè al passaggio del mouse diventa lo sfondo #000000 ??

08-02-2009, 23.59.42

devi usare javascript di certo non php

09-02-2009, 00.25.24

infatti ho letto qui

http://forum.it.altervista.org/basi-...del-mouse.html

:D

solo che lui usa

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>

invece a me servono i colori:

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 "

09-02-2009, 01.05.53

Originalmente inviato da linuxmx

ovviamente anziche gli ' ho utilizzato "

cosa centra usare ' o " da lo stesso risultato
cmq sostituisci ".style.backgroundColor" con ".style.background" dovrebbe funzionare

ciao

09-02-2009, 01.26.01

devi usare le classi css.

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 */
}

**dreadnaut** · 09-02-2009, 14.57.14

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.

09-02-2009, 15.21.02

ci sto riuscendo allora ho inserito in testa alla pagina:

Codice PHP:


<SCRIPT TYPE="text/javascript">

<!--

function mouseover()

{

document.getElementById("thediv").style.background='#FF0000';

}

function mouseout()

{

document.getElementById("thediv").style.background='#333333';

}

//-->

</SCRIPT>

e poi ho fatto varie tabelle per i menu

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>

solo che purtroppo mi cambia colore solo al primo link... xke?????????

**seneca** · 09-02-2009, 15.26.23

Fai attenzione al colore del codice e vedrai una differenza

09-02-2009, 15.30.27

Originalmente inviato da seneca

Fai attenzione al colore del codice e vedrai una differenza

cioè? non capisco

**matt93** · 09-02-2009, 15.39.58

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>

09-02-2009, 15.43.20

mittico!!!!

09-02-2009, 16.01.09

Originalmente inviato da dreadnaut

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.

Mi scuso, ma non mi ero accorto proprio degli altri topic

10-10-2009, 15.46.09

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?

10-10-2009, 15.57.35

Codice:

elemento {
background: transparent;
}

elemento:hover {
background: url('img/titoloevid.png');
}

Poi ovviamente le proprietà dello sfondo le gestisci tu!

10-10-2009, 16.28.43

Originalmente inviato da biccheddu

Codice:

elemento {
background: transparent;
}

elemento:hover {
background: url('img/titoloevid.png');
}

Poi ovviamente le proprietà dello sfondo le gestisci tu!

io usavo:

Codice PHP:


<SCRIPT TYPE="text/javascript">

<!--

function mouseover(elem)

{



elem.style.background='#E52B50';

}

function mouseout(elem)

{

elem.style.background='#CEDCDC';

}

//-->

</SCRIPT>

ehm.... cosa devo modificare esattamente?

10-10-2009, 18.58.12

che bisogno c'è di usare javascript?

Ti ho postato la soluzione, se non dici precisamente a cosa/dove/come vuoi cambiare, è difficile aiutarti!

10-10-2009, 19.14.13

Originalmente inviato da biccheddu

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.php

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

10-10-2009, 19.19.08

Codice HTML:

a {
	display: block;
	background: none;
	text-align: center;
}

a:hover {
	background: url('img/titoloevid.png') no-repeat top center;
}

10-10-2009, 19.26.40

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>

**acsocmel** · 10-10-2009, 19.59.55

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

Codice:

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;
}

il tuo html è sbagliato, è meglio non usare mai la formattazione inline ma se è il caso le classi

Codice PHP:


<tr> 

              <td><div><a href="index.php#newsa">link 1</a></div></td> 

            </tr>

10-10-2009, 21.49.06

Almeno consigli bene, il tuo codice MAI funzionerà

**acsocmel** · 10-10-2009, 23.24.17

vero, bisogna fare così

Codice:

a:hover {
	background-image: url(tuaimmagine.png);
	background-position: center center;
}

10-10-2009, 23.32.13

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:

Codice:

background: transparent url(tuaimmagine.png) center center;

In questo modo si ripeterebbe nel caso si aumentassero i valori di default dle testo.

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;
}

11-10-2009, 01.13.13

Originalmente inviato da acsocmel

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

non ci avevo pensato

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?

**acsocmel** · 11-10-2009, 02.08.22

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>

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>

prova così

11-10-2009, 09.46.11

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 è

Codice:

a:link,
a:visited,
a:active {
color:#3366CC
}

a:hover {
color:#3366CC
}

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 iniziare

11-10-2009, 11.11.00

Ma non sarebbe più facile usare onmouseover e onmouseout?

11-10-2009, 11.33.18

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.

11-10-2009, 12.32.34

Originalmente inviato da linuxmx

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 è

Codice:

a:link,
a:visited,
a:active {
color:#3366CC
}

a:hover {
color:#3366CC
}

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 iniziare

mi potete dare una dritta? please..

11-10-2009, 12.39.25

http://www.makingart.org/cosa-sono-i...330.html#p1643

Qui spiego molto facilmente cosa sono i css e come utilizzarli.

Discussione: cambio colore a passaggio mouse

LinkBack

Strumenti discussione

Display

cambio colore a passaggio mouse

Regole di scrittura