PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
r

Mouse over

Door rick op 15-10-2006 21:54
623 views
Beste Mensen

ik zit al enige tijd te zoeken naar een mouse over effect in een <td> tag
en als je met je muis erover de achtergrond kleur van de td zal veranderen.
de gewone code kon ik el via internet vinden maar ik wil via de css doen is dit mogelijk ?

Kan iemand mij hier misschien mee helpen ?

Groetjes rick :)
R
Robert Deiman
15-10-2006 22:03
Test dit maar eens

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
td:hover{
    background-color:red;
	}
</style>
</head>

<body>
<table width="75%" border="1">
  <tr>
    <td style>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>
L
Lasse
15-10-2006 22:05
Maar dat werkt helaas niet in MSIE
R
Robert Deiman
15-10-2006 22:14
deze (alleen de 1e td) werkt in IE en FF en Opera:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
td:hover{
    background-color:red;
	}
</style>
</head>

<body>
<table width="75%" border="1">
  <tr>
    <td onMouseOver="javascript:this.style.backgroundColor='red';" onMouseOut="javascript:this.style.backgroundColor='white';">&nbsp;</td>
	<td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>
r
rick
15-10-2006 22:20
Dankje :)

is ook mogelijk de java in een echo ""; van php te typen ?
Want hij moet iets selecteren uit een database en als je dus met je muis erover gaat licht hij op

Alvast bedankt zover
R
Robert Deiman
15-10-2006 22:23
Het kan dan ook zo rick:

<?php
//hier jou while lus
while($sqlvoorwaarde){
?>
<td onMouseOver="javascript:this.style.backgroundColor='red';" onMouseOut="javascript:this.style.backgroundColor='white';">
<?php
echo $row['kolomnaam'].'</td>';
?>


en in een echo:
<?php
echo '<td onMouseOver="javascript:this.style.backgroundColor=\'red\';" onMouseOut="javascript:this.style.backgroundColor=\'white\';">';
?>
K
Kalle P
15-10-2006 22:26
gebruik een behavior ipv de js. Die zorgt er voor dat hover in IE voor elk element werkt.

Al werkt het zo ook, maar je vroeg om CSS.
R
Robert Deiman
15-10-2006 22:29
Kalle schreef op 15.10.2006 22:26
gebruik een behavior ipv de js. Die zorgt er voor dat hover in IE voor elk element werkt.

Al werkt het zo ook, maar je vroeg om CSS.


Tjah, met td:hover{ werkt het alleen in FF, kan je een voorbedld geven met een behaviour, die hoor ik vaker voorbij komen de laatste tijd, maar ik ken het nog niet verder. Ben eigenlijk dus wel benieuwd.
r
rick
15-10-2006 22:31
Bedankt robert
ik zag de fout al in php ik doe meestal echo ""; en bij jou staat het echo '';
omdat ertussen de echo natuurlijk al "" staat ;)

en voor Kalle :dat is inderdaad ook wel een optie maar hij werkt zo opzich ook goed.

En om het in een css te zetten zal ik zelf ook nog eens een poging tot wijgen,of heeft 1 van jullie zo 123 enig idee ?

zoiets als dit wil ( is van phpmyadmin ;p )
http://img105.imageshack.us/img105/3948/ditlr0.png
R
Robert Deiman
15-10-2006 22:41
Ik heb wel een idee, maar weet niet of het kan. Misschien 1 van m'n collega's.

Is het mogelijk om in je mouseover, mouseout functie de id van een td te veranderen?
dan zet je die beiden in je .css, met een andere achtergrondkleur. Wil je dan voor de mouseover functie een andere kleur, dan hoef je alleen de kleur in die css weer aan te passen.

Reageren

Inloggen om te reageren