begin process at 2012 05 29 02:17:21
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Cnager d'image avec onmouseover dans un tableau

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Cnager d'image avec onmouseover dans un tableau

jeudi 1 avril 2010 à 12:21:51 | Cnager d'image avec onmouseover dans un tableau

Pesselles
Bonjour à toutes et tous,

Lien pour visualiser le sujet à traiter: http://www.adaefe.net/bambou/mere-grand.php

Objectif à réaliser: en passant la souris sur un texte, il faut que la photo correspondant à ce texte s'affiche dans la cellule d'à-côté.
Exemple: en passant la souris sur "Taie d'oreiller", l'image de gauche (celle du lit) change et fait apparaitre l'image liée à "Taie d'oreiller".
Cerise sur le gâteau, en cliquant sur "Taie d'oreiller", on ouvre la page "Taie d'oreiller".

Pour des raisons de compréhension de langage (je comprends un peu le CSS et pas du tout le JS), je voudrais pouvoir n'utiliser que du CSS.

Dans un premier temps, j'avais ce code:
[code=js]
<script type="texte/javascript">
function aff(zon)
{
cible=document.getElementById('cible')
cible.innerHTML=zon; }
</script>

<body>
<table>
<tr>
<td onmousover="aff('img src=\image.jpg\'/>'); "onmouseout="aff('<img src=\image2.jpg\'/>');">Taie d'oreiller</td>
<td id="cible"></td>
</tr>
</table>
</body>
[code=js]

seulement, je voudrais que le onmouseover s'applique au texte et pas à toute la cellule du tableau (tout le mode suit ?).

Merci aux bonnes volontés qui se pencheront sur mon cas pour bien vouloir m'aider.

Cordialement,
Pesselles
jeudi 1 avril 2010 à 13:44:12 | Re : Cnager d'image avec onmouseover dans un tableau

Zobibol

Membre Club
Bonjour à toi.
En utilisant uniquement le CSS, ça risque d'être un peu galère.
En utilisant le javascript, ça va tout de suite mieux:
voilà pour faire l'affichage de l'image uniquement lorsque l'on survole le texte, le plus simple est de le placé dans un span.
Ensuite quelques petites erreurs dans le script d'origine:
Code HTML :
<script type="texte/javascript">

devient:
Code HTML :
<script type="text/javascript">
(text sans E)
Code HTML :
onmousover

devient :
Code HTML :
onmouseover
(cette fois ci avec un E )

et au final, on obtient:

Code HTML :
<html>
<head>
	<script type="text/javascript">
		/**
		* Affichage d'une image (mouseover/mouseout)
		*
		* @param _urlPict url de l'image à afficher.
		* @param _targetId identifiant de la cellule qui va contenir l'image.
		*/
		function aff(_urlPict, _targetId)
			{
				var _target =document.getElementById(_targetId);
				_target.innerHTML="<img src=\""+_urlPict+"\" alt='"+_urlPict+"' />"; 
			}
	</script>
</head>
<body>
<table>
<tr>
<td ><span onmouseover="aff('image.jpg', 'cible');" onmouseout="aff('image2.jpg', 'cible');">Taie d'oreiller</span></td><td id="cible"></td>
</tr>
<tr>
<td ><span onmouseover="aff('image5.jpg', 'cibleDP');" onmouseout="aff('image3.jpg', 'cibleDP');">Drap plat</span></td><td id="cibleDP"></td>
</tr>
</table>
</body> 
</html>


j'ai "ouvert" la méthode aff : maintenant, elle accepte deux paramètres: le premier est l'url de l'image et le second l'identifiant de la cellule qui contiendra l'image. Cela permet de n'utiliser qu'une seule méthode pour les 4 affichages que tu as sur ton site.

Voilà bon courage.


[o-_-o]
jeudi 1 avril 2010 à 13:48:03 | Re : Cnager d'image avec onmouseover dans un tableau

croftman
Code Javascript :
<a href="#" onmousover="aff('img src=\image.jpg\'/>');" onmouseout="aff('<img src=\image2.jpg\'/>');">Le texte</a>
jeudi 1 avril 2010 à 15:38:45 | Re : Cnager d'image avec onmouseover dans un tableau

Pesselles
Merci pour vos premières participations.

Je vais piocher les bonnes idées et les adapter à ce que j'ai déjà fais de mon côté (ouais, je bosse aussi):

Code Javascript :
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function aff(zon)
{
cible=document.getElementById('cible')
cible.innerHTML=zon; }
</script>
</HEAD>
<body>
<table border="1">
<tr>
<td rowspan="2" id="cible"><img src="r_4_1.jpg"></td>
<td onmouseover="aff('<img src=\'r_3_1.jpg\'/>');"onmouseout="aff('<img src=\'r_3_1.jpg\'>);">taie d'oreiller</td></tr>
<tr>
<td onmouseover="aff('<img src=\'r_2_1.jpg\'/>');"onmouseout="aff('<img src=\'r_2_1.jpg\'>);">drap plat</td>
</tr></table>
</BODY>
</HTML>


Dans ce code, j'ai utilisé un rowsapn pour fusionner les cellules de la ligne. Cela me permet d'avoir une image à gauche et les lignes de textes dans des cellules à droite. On passe sur le texte (taie d'oreiller) l'image change........ mais cela ne fonctionne plus pour la seconde cellule (drap plat, dans mon exemple).
Autre point: je ne comprends pas pourquoi l'image change lors de l'événement onmouseout (j'ai bien indiqué les mêmes images pourtant).

@ Zobibol: je testerai ton code un peu plus tard et te tiendrai au courant du résultat obtenu. Merci pour la correction des erreurs.

jeudi 1 avril 2010 à 16:18:00 | Re : Cnager d'image avec onmouseover dans un tableau

croftman
Mmm tu pourrais déjà mettre un espace après la fin de ton onmouseover, juste comme ça ^^

Ensuite pourquoi ne pas attribuer l'id à ton image et ensuite faire :

Code HTML :
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function aff(src,img)
{
cible=document.getElementById(img)
cible.src=src; }
</script>
</HEAD>
<body>
<table border="1">
<tr>
<td rowspan="2"><img id="first" src="r_4_1.jpg"></td>
<td onmouseover="aff('r_3_1.jpg', 'first');" onmouseout="aff('r_3_1.jpg', 'first');">taie d'oreiller</td></tr>
<tr>
<td onmouseover="aff('r_2 _1.jpg', 'first');" onmouseout="aff('r_2_1.jpg', 'first');">drap plat</td>
</tr></table>
</BODY>
</HTML>


Je trouve cela plus propre :)
jeudi 1 avril 2010 à 19:38:03 | Re : Cnager d'image avec onmouseover dans un tableau

Pesselles
c'est pas faux ^^

Merci à toi pour ton aide.


Avec ce type de code, je vais être obligé de créer 4 tableaux (un par catégorie) que je positionnerai avec le CSS.

Je constate un léger retard à l'affichage des images, quand je fais un test. selon vous, ça vient de quoi ?
vendredi 2 avril 2010 à 09:02:00 | Re : Cnager d'image avec onmouseover dans un tableau

croftman
Heu ben soit du chargement des images soit du client c'est à dire du pc qui exécute le code mais bon ça me parait bizarre pour le chargement d'une photo...

Sinon pour ce genre d'affichage tu devrais plutôt passer par des div au lieu des tableaux
vendredi 2 avril 2010 à 09:11:00 | Re : Cnager d'image avec onmouseover dans un tableau

Pesselles
Tu as complètement raison, je vais être tôt ou tard bloqué avec ces tableaux, alors qu'avec des <div> et du bon CSS, ça devrait être plus "lisible" (côté machine).

Pour les photos, je vais les précharger avec un p'tit JS, au besoin.

A suivre (et merci pour tes réponses et conseils).


Cette discussion est classée dans : image, tableau, onmouseover, taie, oreiller

Répondre à ce message

Sujets en rapport avec ce message

Aïe Problème Visu d'Image [ par esdtechnologie ] Bonjour à toutes et à tous.Voilà j'ai un problème, je crée un tableau en dynamique à partir d'une requête SQL.La première colonne de mon tableau corre changer background image onmouseover [ par fcdconnect ] bonjour comment changer le background image d'une td onmouseoveraparrament le onMouseOver='this.style.background ne fonctionne pas merci d'avance OnMouseOver???? urgent besoin d'aide [ par vince_ballad ] bonjour je suis debutant, je voudrais faire un truc tres simplej'ai une image, et lorsque je passe dessus avec le curseur je vourdais qu'elle soit rem affichage d'image avec onmouseover [ par Atorina ] Bonjour,J'aimerai afficher une image quand on passe sur un texte.Par exemple dans un talbeau, j'ai 2 colonnes.Dans la premiere je veux mettre du texte Image + Tableau... [ par MAsterC ] Salut à tous!Exist-il un moyen de faire un étirement avec une image en Background dans un tableau?Merci d'avance MAsterC - Power Of Dream. <img src=/i Cellule change couleur onMouseOver ... [ par Hector78 ] Hello !J'ai un problème concernant la mise en forme conditionnelle de tableaux, en javascript.Je voudrais réaliser un tableau me permettant de mettre Deplacement d'une image [ par missceline33 ] Bonjour, j'ai un petit problème. J'ai un tableau contenant une image et je souhaite pouvoir déplacer cette image de manière assez fluide (cet outil e OnMouseOver : traiter le cas pour une centaine d'image [ par Tibabou ] Bonjour/soir,J'ai une centaine d'images (img1, img2, img3...) dans ma page et je voudrais afficher une image différente lorsque la souris passe au des Ajout d'un trait ou courbe ou autre dessin sur une image existante avec un onmouseover sur un lien texte. [ par lipompier ] Bonjour, je vous présente mon projet. Je suis entrain de bosser sur l'optimisation de la lecture de plans de municipalité. J'ai d'un coté le plan de rollover ->image agrandie dans une autre cellule d'un tableau [ par poucinette51 ] Bonjour,Voilà, j'ai un tableau du style :        blabla        <br /


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Beautiful El Capitan Yosemite National Park
Photo Herbstwald im Gegenlicht 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,406 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)