Onmouseover dans une cellule tableau
Résolu/Fermé
ced3c
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
-
Modifié par ced3c le 26/04/2011 à 15:46
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 26 avril 2011 à 17:09
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 26 avril 2011 à 17:09
A voir également:
- Onmouseover dans une cellule tableau
- Tableau croisé dynamique - Guide
- Aller à la ligne dans une cellule excel - Guide
- Tableau ascii - Guide
- Tableau word - Guide
- Verrouiller cellule excel - Guide
4 réponses
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
26 avril 2011 à 15:47
26 avril 2011 à 15:47
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 ! ;-)
ced3c
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
5
26 avril 2011 à 15:57
26 avril 2011 à 15:57
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
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
26 avril 2011 à 16:06
26 avril 2011 à 16:06
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 !
ced3c
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
5
26 avril 2011 à 16:20
26 avril 2011 à 16:20
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
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
26 avril 2011 à 16:27
26 avril 2011 à 16:27
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.
ced3c
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
5
26 avril 2011 à 16:30
26 avril 2011 à 16:30
ok je vais m en tenir a ta premiere solution alors :)
merci beaucoup d avoir pris le temps de me repondre en tout cas
j ai vu les autres post, tu es une vrai machine a repondre ^^
heureusement que sur ce site on est bien epaulé nous autres debutants
merci et bonne journee a toi
merci beaucoup d avoir pris le temps de me repondre en tout cas
j ai vu les autres post, tu es une vrai machine a repondre ^^
heureusement que sur ce site on est bien epaulé nous autres debutants
merci et bonne journee a toi
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
26 avril 2011 à 17:09
26 avril 2011 à 17:09
Merci et bonne journée à toi aussi !!!
