Insérer une sorte de rollover sur site weebly

Version imprimable

01/10/2014, 14h31
siegekhol

Insérer une sorte de rollover sur site weebly

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!

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:

<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:

<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:

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:

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

01/10/2014, 18h58
NoSmoking

Bonjour,
cela est jouable en CSS mais pour les animations "sophistiquées" il te faudra un navigateur compatible CSS3.
02/10/2014, 08h34
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.
02/10/2014, 09h28
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:

<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:

<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:

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:

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

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é.
02/10/2014, 10h40
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!

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:

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

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:

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>

02/10/2014, 15h59
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!
02/10/2014, 20h05
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.
02/10/2014, 21h39
NoSmoking

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

Citation:

cela est jouable en CSS ...

voir la réponse faite sur Demande pour Rollover à distance en CSS et HTML.
03/10/2014, 08h26
siegekhol

Merci Nosmoking!!! (t'es un dieu pour moi :oops:) 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.