1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Cnager d'image avec onmouseover dans un tableau

Pesselles Messages postés 22 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 28 septembre 2013 - 1 avril 2010 à 12:21
Pesselles Messages postés 22 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 28 septembre 2013 - 2 avril 2010 à 09:11
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>


'); "onmouseout="aff('');">Taie d'oreiller


[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

7 réponses

Réponse 1 / 7
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
1 avril 2010 à 13:44
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: 
<script type="texte/javascript">

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

devient : 
onmouseover
(cette fois ci avec un E )

et au final, on obtient: 

<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=""; 
}
</script>
</head>

Taie d'oreiller, ,

----

Drap plat

 
</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]
0
Réponse 2 / 7
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
1 avril 2010 à 13:48 
[# ');" onmouseout="aff('');">Le texte]
0
Réponse 3 / 7
Pesselles Messages postés 22 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 28 septembre 2013
1 avril 2010 à 15:38
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): 

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function aff(zon)
{
cible=document.getElementById('cible')
cible.innerHTML=zon; }
</script>
</HEAD>

,
');"onmouseout="aff(');">taie d'oreiller,
----

');"onmouseout="aff(');">drap plat


</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.
0
Réponse 4 / 7
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
1 avril 2010 à 16:18
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 : 

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function aff(src,img)
{
cible=document.getElementById(img)
cible.src=src; }
</script>
</HEAD>

,
taie d'oreiller,
----

drap plat


</HTML>


Je trouve cela plus propre :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Pesselles Messages postés 22 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 28 septembre 2013
1 avril 2010 à 19:38
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 ?
0
Réponse 6 / 7
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 09:02
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
0
Réponse 7 / 7
Pesselles Messages postés 22 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 28 septembre 2013
2 avril 2010 à 09:11
Tu as complètement raison, je vais être tôt ou tard bloqué avec ces tableaux, alors qu'avec des
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).
0
Rejoignez-nous