Accueil > Forum > > > > changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
 changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
jeudi 24 novembre 2011 à 23:05:08 |
changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
lezj
|
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 |
|
vendredi 25 novembre 2011 à 02:26:40 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
camillagaiaschicherie
|
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>
<body>
<table border=1>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
|
|
vendredi 25 novembre 2011 à 09:07:01 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
lezj
|
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.
Code HTML : <?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><img src="image1.png" onmouseout="javascript:this.src='image1.png';" onmouseover="javascript:this.src='image2.png';"/></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 |
|
vendredi 25 novembre 2011 à 09:19:32 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
buno
|
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...
|
|
vendredi 25 novembre 2011 à 09:29:43 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
lezj
|
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
|
|
vendredi 25 novembre 2011 à 09:54:20 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
Zobibol
|
Réponse acceptée !
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:
Code HTML : <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>
<body>
<!-- Premier essais -->
<table>
<tr >
<th>colonne 1</th>
<th>colonne 2</th>
<th>colonne 3</th>
<tr onmouseover="changePic('3.png', this)" onmouseout ="changePic('1.png', this)" >
<td>Texte colonne 1</td>
<td>Texte colonne 2</td>
<td><img src="1.png" /></td>
</tr>
<tr onmouseover="changePic('4.png', this)" onmouseout ="changePic('2.png', this)" >
<td>Texte 1 colonne 1</td>
<td>Texte 2 colonne 2</td>
<td><img src="2.png" /></td>
</tr>
</table>
<!-- avec une colonne en plus ? -->
<table>
<tr >
<th>colonne 1</th>
<th>colonne 2</th>
<th>colonne 3</th>
<th>colonne 4</th>
<tr onmouseover="changePic('3.png', this)" onmouseout ="changePic('1.png', this)" >
<td>Texte colonne 1</td>
<td>Texte colonne 2</td>
<td>Texte colonne 3</td>
<td><img src="1.png" /></td>
</tr>
<tr onmouseover="changePic('4.png', this)" onmouseout ="changePic('2.png', this)" >
<td>Texte 1 colonne 1</td>
<td>Texte 2 colonne 2</td>
<td>Texte 2 colonne 3</td>
<td><img src="2.png" /></td>
</tr>
</table>
</body>
</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]
|
|
vendredi 25 novembre 2011 à 13:17:37 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
camillagaiaschicherie
|
Réponse acceptée !
bonjour,
c etait juste pour que tu t en inspire maintenant un peu plus pousse et toujours en css :
Code HTML : <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>
<body>
<table border=1>
<tr>
<td> </td>
<td class="row1"><img src="1.png" /></td>
</tr>
<tr>
<td> </td>
<td class="row2"><img src="1.png" /></td>
</tr>
<tr>
<td> </td>
<td class="row3"><img src="1.png" /></td>
</tr>
</table>
</body>
</html>
|
|
vendredi 25 novembre 2011 à 14:05:25 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
camillagaiaschicherie
|
Réponse acceptée !
bonjour,
ou alors avec jquery :
Code HTML : <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>
<body>
<table border="1">
<tr>
<td> </td>
<td><img src="1.png" rollover="2.png" onclick="alert('pouet');" /></td>
</tr>
<tr>
<td> </td>
<td><img src="1.png" rollover="3.png" /></td>
</tr>
<tr>
<td> </td>
<td><img src="1.png" rollover="4.png" /></td>
</tr>
</table>
</body>
</html>
|
|
vendredi 25 novembre 2011 à 14:47:51 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
lezj
|
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
|
|
samedi 26 novembre 2011 à 00:46:30 |
Re : changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne
lezj
|
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
|
|
Cette discussion est classée dans : ligne, image, tableau, cellule, souris
 Répondre à ce message
 Sujets en rapport avec ce message
faire apparaitre une image en selectionnant une cellule d'un tableau [ par magouya ]
bonjour à tous! Je sollicite votre aide concernant un site que je dois creer (c'est la première fois que l'on me propose de faire un site), j'ai un p
Récupérer le numero d'une ligne dans un tableau sur passage de la souris [ par Prototype51 ]
Bonjour, J'aimerais savoir comment récupérer un numéro dans un tableau sur passage de la souris. Exemple : xyz Comment récupérer le nombre x ou y o
lister Element dans la cellule d'un tableau [ par milo2009 ]
Salut,utilisant un script java, je fais glisser des images dans une cellule de mon tableau tabVis.Tout fonctionne, cependant, je voudrais savoir si la
Problème d'affichage tableau dynamique sous FF [ par DMK04 ]
Bonjour,Est-ce que quelqu'un pourrait me dire si il y a une erreur quelconque qui pourrait causer des problèmes d'affichage sous FireFox (alors que so
verifier le contenu d'une cellule dans un tableau [ par oppossom ]
bonjour tous je vais entrer directement dans le vif du sujet mon soucis est :est que la ligne et la cellule d'un tableau sont des objets javascript ?e
Créer cellule td dans un tableau html [ par mike1310 ]
Bonjour,J'ai un probleme de compatibilité entre IE et Mozilla (le truc super rare !!! ).Mon probleme lors d'un clic, sur un bouton, je dois pouvoir aj
Numéro de ligne et de colonne dans u tableau [ par MGD ]
Bonjour,Pour calculer la distance entre la position de la souris et les bords d'une cellule de tableau, j'ai besoin de calculer la position de cette c
Scrollbar et déplacement d'une image avec la souris [ par cepekinio ]
Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une
onmouseover+map+javascript? [ par fulltrip ]
Bonjour, Voilà mon idée était de de changer une image au passage de la souris. J'ai réalisé ceci a l'aide de la fonction onmouseover, mais j'ai voulu
HTML : changer image arriere plan tableau au passage souris [ par ju0123456789 ]
Bonjour,Je voudrais savoir comment peut-on faire changer l'image d'arrière plan d'un tableau (page HTML) au passage de la souris n'importe où sur le
 Livres en rapport
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|