Changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
Résolu
lezj
Messages postés
66
Date d'inscription
samedi 14 août 2004
Statut
Membre
Dernière intervention
5 juillet 2013
-
24 nov. 2011 à 23:05
lezj Messages postés 66 Date d'inscription samedi 14 août 2004 Statut Membre Dernière intervention 5 juillet 2013 - 26 nov. 2011 à 00:46
lezj Messages postés 66 Date d'inscription samedi 14 août 2004 Statut Membre Dernière intervention 5 juillet 2013 - 26 nov. 2011 à 00:46
A voir également:
- Changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
- Afficher un tableau en php - Conseils pratiques -PHP
- Comment changer une image jpg en tiff ✓ - Forum C# / .NET
- Roue de la chance en ligne - Forum Flash
- Une image .tiff repose sur une palette de 256 000 couleurs. - Forum C / C++ / C++.NET
- Créer une palette personalisée de 256 couleurs (couleurs sur 8 bits) - Forum C / C++ / C++.NET
9 réponses
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
25 nov. 2011 à 09:54
25 nov. 2011 à 09:54
Bien le bonjour, en fait le problème est d'atteindre la dernière colonne de la table.
Du coup il faut effectivement positionner l'événement mouseover et mouseout sur le tr.
et voilà ce que j'ai obtenu:
ce code est valable quelque soit le nombre de colonne dans la table (d’où l’essai avec deux tables) à exploitée et à la condition que la dernière cellule contienne bien une image, sinon, une alerte sera levée.
[o-_-o]
Du coup il faut effectivement positionner l'événement mouseover et mouseout sur le tr.
et voilà ce que j'ai obtenu:
<html>
<head>
<script type="text/javascript">
/**
* Changement d'image au survol
*
* @param _url
* Url de l'image à atteindre.
* @param _tr
* Ligne de la table sur laquelle on se trouve.
*/
function changePic(_url, _tr){
// récupération de la dernière colonne du tr.
var lastCell = _tr.cells[_tr.cells.length-1];
// Récupération de l'image au sein de cette cellule.
var img = lastCell.getElementsByTagName("img");
// Si image non trouvée, alors, on alerte et on stoppe les traitements.
if (!img){
alert(" la dernière cellule ne comporte pas d'image");
return;
}
// L'image est donc, à la position 0 de l'enregistrement.
img[0].src = _url;
}
</script>
</head>
<!-- Premier essais -->
colonne 1 |
colonne 2 |
colonne 3 |
----
Texte colonne 1,
Texte colonne 2,
,
----
Texte 1 colonne 1,
Texte 2 colonne 2,
<!-- avec une colonne en plus ? -->
colonne 1 |
colonne 2 |
colonne 3 |
colonne 4 |
----
Texte colonne 1,
Texte colonne 2,
Texte colonne 3,
,
----
Texte 1 colonne 1,
Texte 2 colonne 2,
Texte 2 colonne 3,
</html>
ce code est valable quelque soit le nombre de colonne dans la table (d’où l’essai avec deux tables) à exploitée et à la condition que la dernière cellule contienne bien une image, sinon, une alerte sera levée.
[o-_-o]
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012
25 nov. 2011 à 13:17
25 nov. 2011 à 13:17
bonjour,
c etait juste pour que tu t en inspire maintenant un peu plus pousse et toujours en css :
c etait juste pour que tu t en inspire maintenant un peu plus pousse et toujours en css :
<html lang="fr">
<head>
<style type="text/css">
td {
height:75px;
width:100px;
}
tr:hover > td:last-child img {
display:none;
}
tr:hover > td.row1:last-child:before {
content:url(2.png)' ';
}
tr:hover > td.row2:last-child:before {
content:url(3.png)' ';
}
tr:hover > td.row3:last-child:before {
content:url(4.png)' ';
}
</style>
</head>
,
----
,
,
----
,
</html>
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012
25 nov. 2011 à 14:05
25 nov. 2011 à 14:05
bonjour,
ou alors avec jquery :
ou alors avec jquery :
<html lang="fr">
<head>
<style type="text/css">
td {
height:75px;
width:100px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
var imgSource;
$("tr").mouseover(function() {
imgSource = $(this).find("td:last-child").find("img").attr("src");
var imgRollover = $(this).find("td:last-child").find("img").attr("rollover");
$(this).find("td:last-child").find("img").attr("src",imgRollover);
});
$("tr").mouseout(function() {
$(this).find("td:last-child").find("img").attr("src",imgSource);
});
});
</script>
</head>
,
----
,
,
----
,
</html>
camillagaiaschicherie
Messages postés
58
Date d'inscription
vendredi 23 mai 2008
Statut
Membre
Dernière intervention
28 février 2012
25 nov. 2011 à 02:26
25 nov. 2011 à 02:26
bonjour,
peut etre un truc comme ca :
<html>
<head>
<style type="text/css">
td {
height:25px;
width:100px;
}
tr:hover > td:last-child {
background:#900;
}
</style>
</head>
</html>
peut etre un truc comme ca :
<html>
<head>
<style type="text/css">
td {
height:25px;
width:100px;
}
tr:hover > td:last-child {
background:#900;
}
</style>
</head>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
lezj
Messages postés
66
Date d'inscription
samedi 14 août 2004
Statut
Membre
Dernière intervention
5 juillet 2013
25 nov. 2011 à 09:07
25 nov. 2011 à 09:07
bonjour camilla
il ne s'agit pas simplement de changer la couleur de fond d'une cellule mais de changer l'image qui est contenu dans la dernière cellule.
Lez-J
il ne s'agit pas simplement de changer la couleur de fond d'une cellule mais de changer l'image qui est contenu dans la dernière cellule.
<?php foreach($this->oResults as $r)
{ ?>
<tr onmouseover="this.bgColor='#ADD8E6';" onmouseout="this.bgColor='#FCFAE1';">
<td width="15%"> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td></tr>
voilà je voudrais que lorsque je passe la souris sur le "tr" le rollover contenu dans "img" se déclenche en plus du rollover contenu dans "tr" sachant que le rollover du "tr" est un sur-lignage de la ligne du tableau. Le but étant qu'au moment où la ligne passe en sur-lignage, l'image dans la dernière cellule change.
Je pense que maintenant vous comprendrez pourquoi je bloque depuis deux jours. surtout que je ne suis pas un spécialiste du javascript.
merci pour la réponse précédente et celles à venir
Lez-J
BunoCS
Messages postés
15485
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
2 septembre 2024
103
25 nov. 2011 à 09:19
25 nov. 2011 à 09:19
Hello,
Je n'ai pas testé, mais au lieu de mettre les onmouseover/out sur l'image, tu peux essayer de les mettre sur ta td. Ensuite, dans le code javascript, tu pourra changer l'image voulue (en rajoutant peut-être un id ou un name dans ta balise img pour mieux la retrouver)...
@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Je n'ai pas testé, mais au lieu de mettre les onmouseover/out sur l'image, tu peux essayer de les mettre sur ta td. Ensuite, dans le code javascript, tu pourra changer l'image voulue (en rajoutant peut-être un id ou un name dans ta balise img pour mieux la retrouver)...
@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
lezj
Messages postés
66
Date d'inscription
samedi 14 août 2004
Statut
Membre
Dernière intervention
5 juillet 2013
25 nov. 2011 à 09:29
25 nov. 2011 à 09:29
bonjour buno
en fait j'ai surtout besoin de savoir comment atteindre de manière sure l'image qui est dans la dernière cellule à partir du "tr" car tout ce que j'ai essayé ne fonctionne pas. et si je dois rajouter un id comme tu le suggères l'id risque de ne plus etre unique et ce serait embetant.
merci pour ta piste.
Lez-J
en fait j'ai surtout besoin de savoir comment atteindre de manière sure l'image qui est dans la dernière cellule à partir du "tr" car tout ce que j'ai essayé ne fonctionne pas. et si je dois rajouter un id comme tu le suggères l'id risque de ne plus etre unique et ce serait embetant.
merci pour ta piste.
Lez-J
lezj
Messages postés
66
Date d'inscription
samedi 14 août 2004
Statut
Membre
Dernière intervention
5 juillet 2013
25 nov. 2011 à 14:47
25 nov. 2011 à 14:47
re-bonjour à tous,
Merci pour cette participation massive, je vais tester chacune de vos propositions et déterminer celle qu'il m'est la plus optimale à utiliser.
Je vous tiens au courant.
bon début d'après midi!
Lez-J
Merci pour cette participation massive, je vais tester chacune de vos propositions et déterminer celle qu'il m'est la plus optimale à utiliser.
Je vous tiens au courant.
bon début d'après midi!
Lez-J
lezj
Messages postés
66
Date d'inscription
samedi 14 août 2004
Statut
Membre
Dernière intervention
5 juillet 2013
26 nov. 2011 à 00:46
26 nov. 2011 à 00:46
Bonsoir,
je sais qu'il est tard mais je tiens vraiment à vous dire merci car chacune de vos solutions était bonne alors je les ai toutes retenues mais j'ai choisi d'utiliser celle de Zobibol car elle est moins longue à implémenter.
Merci à tous.
bonne journée!
Lez-J
je sais qu'il est tard mais je tiens vraiment à vous dire merci car chacune de vos solutions était bonne alors je les ai toutes retenues mais j'ai choisi d'utiliser celle de Zobibol car elle est moins longue à implémenter.
Merci à tous.
bonne journée!
Lez-J