Changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne [Résolu]

lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 24 nov. 2011 à 23:05 - Dernière réponse : lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention
- 26 nov. 2011 à 00:46
bonjour à toutes et à tous.

je suis handicapé dans une application par un petit problème:
j'ai un tableau généré dynamiquement (par un foreach php)contenant n cellules
dans la dernière cellule j'ai une image sur laquelle j'ai réussi à faire appliquer un rollover lorsqu'on passe la souris sur l'image(rien de bien compliqué enfait)
mais je voudrais que lorsqu'on passe la souris sur une ligne du tableau, le rollover précédemment cité s'exécute.
cela fait deux jours que j'ai tout essayé sans résultat. quelqu'un pourrait-il m'aider?
merci!


Lez-J
Afficher la suite 

Votre réponse

9 réponses

Meilleure réponse
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 25 nov. 2011 à 09:54
3
Merci
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:
<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]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de Zobibol
Meilleure réponse
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 13:17
3
Merci
bonjour,

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>

Merci camillagaiaschicherie 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de camillagaiaschicherie
Meilleure réponse
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 14:05
3
Merci
bonjour,

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>

Merci camillagaiaschicherie 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de camillagaiaschicherie
camillagaiaschicherie 58 Messages postés vendredi 23 mai 2008Date d'inscription 28 février 2012 Dernière intervention - 25 nov. 2011 à 02:26
0
Merci
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>
Commenter la réponse de camillagaiaschicherie
lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 25 nov. 2011 à 09:07
0
Merci
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.

<?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
Commenter la réponse de lezj
BunoCS 14176 Messages postés lundi 11 juillet 2005Date d'inscription 19 octobre 2018 Dernière intervention - 25 nov. 2011 à 09:19
0
Merci
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...
Commenter la réponse de BunoCS
lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 25 nov. 2011 à 09:29
0
Merci
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
Commenter la réponse de lezj
lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 25 nov. 2011 à 14:47
0
Merci
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
Commenter la réponse de lezj
lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 26 nov. 2011 à 00:46
0
Merci
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
Commenter la réponse de lezj

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.