Onmouseover dans une cellule tableau
Résolu
ced3c
Messages postés
237
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J aimerai savoir s il est possible de faire apparaitre une image au passage de la souris dans une cellule (type onmouseover)
exemple
<td><img src="image.jpg" alt="image"/>texte descriptif</td>
j aimerai que l image2.jpg apparaisse a la place de l image1.jpg ET du texte descriptif.
cela est il possible en xhtml/css car je ne connais pas les autres langages ?
merci d avance
J aimerai savoir s il est possible de faire apparaitre une image au passage de la souris dans une cellule (type onmouseover)
exemple
<td><img src="image.jpg" alt="image"/>texte descriptif</td>
j aimerai que l image2.jpg apparaisse a la place de l image1.jpg ET du texte descriptif.
cela est il possible en xhtml/css car je ne connais pas les autres langages ?
merci d avance
A voir également:
- Onmouseover dans une cellule tableau
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Imprimer tableau excel sur une page - Guide
- Aller à la ligne dans une cellule excel - Guide
4 réponses
Salut !
Oui, très possible. Tu commences par avoir ta balise :
Puis le CSS :
Aussi simple que ça ! ;-)
Oui, très possible. Tu commences par avoir ta balise :
<td class="test">...</td>
Puis le CSS :
td.test {
background-image:url("chemin/vers/image/au/repos.jpg");
}
td.test:hover {
background-image:url("chemin/vers/image/au/mouseover.jpg");
}
Aussi simple que ça ! ;-)
merci beaucoup pour ta reponse rapide coeus
serait il possible de tout mettre dans une seule ligne ?
en fait j aurai pas mal de cellule a faire de cette facon et si je dois creer une ligne html puis des lignes css ca va vite etre le foutoir au vu du nombre de cellule.
Or si je peux mettre le css dans le html ca serais plus "lisible" pour moi (ayant l habitude de toujours separer le css du html, des que je dois mettre les 2 en meme temps je suis vite perdu)
en tout cas c est vrai que c etais pas bien compliqué mais je n y avais pas pensé du tout :)
encore merci
serait il possible de tout mettre dans une seule ligne ?
en fait j aurai pas mal de cellule a faire de cette facon et si je dois creer une ligne html puis des lignes css ca va vite etre le foutoir au vu du nombre de cellule.
Or si je peux mettre le css dans le html ca serais plus "lisible" pour moi (ayant l habitude de toujours separer le css du html, des que je dois mettre les 2 en meme temps je suis vite perdu)
en tout cas c est vrai que c etais pas bien compliqué mais je n y avais pas pensé du tout :)
encore merci
Salut !
Si je comprends bien, tu veux que plusieurs cellules aient le même style ?
Pas de problème !
Crée ta table :
Et le CSS qui va avec :
J'espère que tu vois un peu la logique qui va derrière ce code ?
Dis-moi si ça répond à tes besoins !
Si je comprends bien, tu veux que plusieurs cellules aient le même style ?
Pas de problème !
Crée ta table :
<table class="test"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
Et le CSS qui va avec :
table.test tr td {
background-image:url("chemin/vers/image/au/repos.jpg");
}
table.test tr td:hover {
background-image:url("chemin/vers/image/au/mouseover.jpg");
}
J'espère que tu vois un peu la logique qui va derrière ce code ?
Dis-moi si ça répond à tes besoins !
desole, je me suis mal exprimé
en fait chaque cellule du tableau comporte a la fois une image et un texte different
Pour chaque cellule viendras au survol de la souris s affiche une image elle aussi differente a chaque fois
ex
<table>
<tr>
<td>image1 + blabla</td> (au survol: afficher image10)
<td>image2 + blabla</td> (au survol: afficher image11)
<td>image3 + blabla</td> (au survol: afficher image15)
</tr>
<tr>
<td>image4 + blabla</td> (au survol: afficher image16)
<td>image5 + blabla</td> (au survol: afficher image28)
<td>image6 + blabla</td> (au survol: afficher image32)
</tr>
</table>
le but est d avoir une image onmouseover(ou :hover) differente a chaque fois
ta premier solution est tres bonne, mais le fait de coder a la fois la page html et la page css pour chaque cellule risque d etre lourd
la methode que je te demandais etais si on pouvais mettre dans
<td>image1 + blabla</td>
le css afin de faire en gros :
<td Css avec :hover>image1 + blabla</td>
qui au final serais plus lisible pour moi pour mon tableau (juste la page html a modifier pour chaque cellule)
merci
en fait chaque cellule du tableau comporte a la fois une image et un texte different
Pour chaque cellule viendras au survol de la souris s affiche une image elle aussi differente a chaque fois
ex
<table>
<tr>
<td>image1 + blabla</td> (au survol: afficher image10)
<td>image2 + blabla</td> (au survol: afficher image11)
<td>image3 + blabla</td> (au survol: afficher image15)
</tr>
<tr>
<td>image4 + blabla</td> (au survol: afficher image16)
<td>image5 + blabla</td> (au survol: afficher image28)
<td>image6 + blabla</td> (au survol: afficher image32)
</tr>
</table>
le but est d avoir une image onmouseover(ou :hover) differente a chaque fois
ta premier solution est tres bonne, mais le fait de coder a la fois la page html et la page css pour chaque cellule risque d etre lourd
la methode que je te demandais etais si on pouvais mettre dans
<td>image1 + blabla</td>
le css afin de faire en gros :
<td Css avec :hover>image1 + blabla</td>
qui au final serais plus lisible pour moi pour mon tableau (juste la page html a modifier pour chaque cellule)
merci
Ok je comprends ton problème.
Malheureusement, avec seulement HTML/CSS, tu es dans une impasse.
Ta seule solution serait d'avoir recours à PHP ou à Javascript. Dans PHP tu pourrait faire une boucle qui s'occuperait de ton code répétitif en assez peu de lignes...
Mais le HTML n'est pas tellement fait pour être non-répétitif. Il est fait pour être précis, clair, et bien organisé. Sans aide extérieure d'un autre langage... Va falloir que tu prennes le temps ! :-(
Cependant, rassure-toi, le code sera lourd, mais pas le poids de la page. Tout au plus, ça rajoutera quelques Ko au poids du fichier, autant dire rien du tout, même avec un très gros tableau.
Malheureusement, avec seulement HTML/CSS, tu es dans une impasse.
Ta seule solution serait d'avoir recours à PHP ou à Javascript. Dans PHP tu pourrait faire une boucle qui s'occuperait de ton code répétitif en assez peu de lignes...
Mais le HTML n'est pas tellement fait pour être non-répétitif. Il est fait pour être précis, clair, et bien organisé. Sans aide extérieure d'un autre langage... Va falloir que tu prennes le temps ! :-(
Cependant, rassure-toi, le code sera lourd, mais pas le poids de la page. Tout au plus, ça rajoutera quelques Ko au poids du fichier, autant dire rien du tout, même avec un très gros tableau.
