Discussion :

[siegekhol]

Bonjour bonjour,

Voilà mon petit soucis, je cherche à mettre en place sur mon site une sorte de rollover entre un texte et une image décaler sur la droite.

Je cherche un code pour :

Lorsque je met la souris sur un des textes ci-dessous, un élément sur la photo qui se trouvera à droite bougera.

http://www.weebly.com/editor/uploads...?1412163836510


et mettre une petite animation sur le texte en rollover.

Je vous remercie par avance!

[01001111]

Bonjour,

Tu peux utiliser jquery pour faire ça, seulement weebly te laisse-t-il la possibilité d'importer du javascript externe? ou d'uploader un fichier js que tu relies à ta page?
après import de jquery via balise script ou s'il est déjà présent, tu peux faire ainsi:

nommer chaque élément de texte qui déclenchent quelquechose sur le survol avec l'attribut id
exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="texte_1">mon texte</span>

si tu veux qu'il y ait une main au survol qui remplace le curseur de la souris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" id="texte_1">mon texte</a>

si tu veux lancer une fonction sur le mouseover:
nommer les textes cible avec par exemple id="t_1", id="t_2", etc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$("[id^='texte_']").mousover(function() { $("#t_"+this.id.match(/[0-9]+/)).stop().animate({ left:"50px" }, 250) });
$("[id^='texte_']").mouseout(function() { $("#t_"+this.id.match(/[0-9]+/)).stop().animate({ left:"0px" }, 250) });

Ici un mouvement de 50 pixels vers la droite sera effectif à chaque mouseover.
si tu veux que les autres reviennent à gauche quand l'un va vers la droite fais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$("[id^='texte_']").mousover(function() { 
      $("#t_"+this.id.match(/[0-9]+/)).stop().animate({ left:"50px" }, 250);
      var otherTargets=$("[id^='t_']");
      for (var t in otherTargets) {
             if (otherTargets[t].id.match(/[0-9]+/)!==this.id.match(/[0-9]+/) && otherTargets[t].offsetLeft>0) {
                   otherTargets[t].stop().animate({ left:"0px" }, 250);
             }
      } 
});
$("[id^='texte_']").mouseout(function() { $("#t_"+this.id.match(/[0-9]+/)).stop().animate({ left:"0px" }, 250); });

en espérant t'avoir aidé.

[NoSmoking]

Bonjour,
cela est jouable en CSS mais pour les animations "sophistiquées" il te faudra un navigateur compatible CSS3.

[siegekhol]

Bonjour! et merci pour les infos même si j'ai pas tout compris^^. Trop débutant..

En fait, je sais pas si c'est ce que tu as compris mais je pensais qu'il y avait une méthode plus simple.

Je voudrais que :
- lorsque je met la souris sur le texte 1, l'image 1 s'affiche à droite
- lorsque je met la souris sur le texte 2, l'image 2 remplace l'image 1 et ainsi de suite.

Voilà, je sais pas si tu avais compris cela. En tout cas je te remercie pour ton aide.

[01001111]

Ok, alors pour une image c'est ainsi

nommer chaque élément de texte qui déclenchent quelquechose sur le survol avec l'attribut id
exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="texte_1">mon texte</span>

si tu veux qu'il y ait une main au survol qui remplace le curseur de la souris:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" id="texte_1">mon texte</a>

si tu veux lancer une fonction sur le mouseover:
mettre les sources d'images dans un tableau javascript

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var imgs=[
    "/chemin/vers/image.jpg",
    "/chemin/vers/autreimage.jpg"
];[]

Tu fais un conteneur censé recevoir les images ainsi par exemple, stylisé en css comme il faut pour qu'il ait la bonne position:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="conteneur_image"></div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("[id^='texte_']").mousover(function() { 
      $("#conteneur_image").html('<img src="'+imgs[parseInt(this.id.match(/[0-9]+/),10)-1]+'" style="width:100%; height: auto;"/>');
});

en espérant t'avoir aidé.

[siegekhol]

Je te remercie encore une fois, je ne comprend pas tout en java je suis carrément débutant dans le codage. Mais je pense après navigation sur google qu'il faut que je le fasse en CSS, j'ai réussi à changer l'image au passage de la souris. En gros ils appellent ça un rollover à distance. Donc je vais aller voir sur le forum CSS. Merci encore!

[siegekhol]

Bon j'ai pas réussi, j'arrive pas à faire le lien entre les textes et les images et je n'arrive pas à superposer les images les unes sur les autres.

Excusez moi pour code qui va suivre mais je débute vraiment ^^ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<HTML><style type="text/css">
.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid; 
  text-align: center;
}
</style>
<script>
<!-- 
var imgs=[
    "http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412255321218",
    "http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyntranslation.gif?1412255336003"
"http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn+-.gif?1412255995798"
];[] 
 
$("[id^='1']").mousover(function() { 
      $("#conteneur_image").html('<img src="'+imgs[parseInt(this.id.match(/[0-9]+/),10)-1]+'" style="width:100%; height: auto;"/>');
}); 
-->
</script>
<li><span id="1">• Montée et descente de l'assise par vérin à gaz. </span></li>
<li><span id="2">• Translation d'assise.</span></li>
<li><span id="3">• Déblocage / blocage dossier pour l'avoir en contact permanent avec le dos.</span></li>
 
<div id="conteneur_image"><img src=http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412255321218 alt=Image />
<img src=http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyntranslation.gif?1412255336003 alt=Image/>
<img src=http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn+-.gif?1412255995798 alt=Image/></div> 
</HTML>

Si vous pouviez m'aider encore un peu svp^^

Au final il me faudrait cela :

http://www.weebly.com/editor/uploads...?1412257663554

[01001111]

tu as oublié le préfixe sur id, et n'as pas compris comment fonctionne ^= (ça veut dire qu'un attribut commence par la chaine qui suit entre guillemets.
de plus j'ai noté d'autres erreurs...
donc:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<HTML>
<head>
<style type="text/css">
.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid; 
  text-align: center;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var imgs=[
    "http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412255321218",
    "http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyntranslation.gif?1412255336003",
"http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn+-.gif?1412255995798"
];[] 
 
$("[id^='span_']").mousover(function() { 
      $("#conteneur_image").html('<img src="'+imgs[parseInt(this.id.match(/[0-9]+/),10)-1]+'" style="width:100%; height: auto;"/>');
}); 
</script>
</head>
<body>
<li><span id="span_1">• Montée et descente de l'assise par vérin à gaz. </span></li>
<li><span id="span_2">• Translation d'assise.</span></li>
<li><span id="span_3">• Déblocage / blocage dossier pour l'avoir en contact permanent avec le dos.</span></li>
 
<div id="conteneur_image"></div> 
</body>
</HTML>

[siegekhol]

Ok merci pour ta réponse, y'a un autre truc que je comprend pas c'est le conteneur d'image à la fin?! Ca fonctionne comment? Merci!

[01001111]

De rien, jquery cible le conteneur image et y met une balise img avec la bonne source, laquelle est immédiatement interprétée par le navigateur.

[NoSmoking]

Une petite coquille s'est glissée dans le code, il manque un e $("[id^='span_']").mouseover(function(), mais jQuery pour si peu !!!

cela est jouable en CSS ...

voir la réponse faite sur Demande pour Rollover à distance en CSS et HTML.

[siegekhol]

Merci Nosmoking!!! (t'es un dieu pour moi ) pile poil ce que je voulais.

Par contre le jQuery j'y comprend rien pour le moment je suis en petite formation html + css. Donc ce que tu m'as trouvé sur le fofo CSS est parfait!

Merci encore à tout le monde.