Rollover cellule en CSS Comment fait-on ce genre de chose ?

Le 19/05/2006 14:08, thierry@francecom.com a écrit :

Sur la page http://www.ibm.com/us/ il y a des rollover sur les
cellules,

Par exemple « Resources for / Industries » ? C'est du JavaScript.

comment fait-on en css pour appliquer ce genre de chose ?

En CSS, il y a par exemple :
http://www.meyerweb.com/eric/css/edge/menus/demo.html [en]

ou bien :
http://openweb.eu.org/articles/menu_universel/ [fr]

--
Olivier Miakinen
Troll du plus sage chez les conviviaux : le nouveau venu, avec
son clan, s'infiltre dans les groupes de nouvelles. (3 c.)

thierry@francecom.com a écrit :

Bonjour,

Sur la page http://www.ibm.com/us/ il y a des rollover sur les
cellules, comment fait-on en css pour appliquer ce genre de chose ?
Merci d'avance.

Thierry

un tutoriel assez détaillé :
http://css-astuces.batraciens.net/bouton-1.htm

--
-> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur
l'élevage et la maintenance des batraciens, aquatiques ou terrestres.
Petites annonces.
-> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces
de codage CSS pour enrichir vos pages Web.
-> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF
d'occasion.

thierry@francecom.com a écrit :

Bonjour,

Sur la page http://www.ibm.com/us/ il y a des rollover sur les
cellules, comment fait-on en css pour appliquer ce genre de chose ?
Merci d'avance.

Thierry

le roll-over en css est assez simple :

td { background: #ffc; }
td:hover { background: #ff6; }

mais IE n'est pas au parfum de l'astuce
Avec IE ça ne fonctionne qu'avec des liens
il faut donc lui prévoir une béquille en javascript

<script type="text/javascript">
var IEúlse; /*@cc_on IE=true; @*/
function roll(quoi) {
quoi.className = quoi.className==''? 'ie' : '';
}
onload = function() { if(IE) {
var T = document.getElementsByTagName('td');
for(var i=0;i<T.length;i++) {
T[i].onmouseover = function() { roll(this); };
T[i].onmouseout = function() { roll(this); };
}
}
}
</script>
<style type="text/css">
table { width: 80% }
td { background: #ffc; text-align: center; }
td:hover, td.ie { background: #ff6; }
</style>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

--
Stephane Moriaux et son [moins] vieux Mac