Cnager d'image avec onmouseover dans un tableau

Signaler
Messages postés
22
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
28 septembre 2013
-
Messages postés
22
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
28 septembre 2013
-
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

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
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]
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

[# ');" onmouseout="aff('');">Le texte]
Messages postés
22
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
28 septembre 2013

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.
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

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 :)
Messages postés
22
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
28 septembre 2013

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 ?
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

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
Messages postés
22
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
28 septembre 2013

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).