Adaptation d'un code source d'images défilantes
bonjour,
je copie ici un échange de MP. Ils sont classés par ordre chronologique.
Vous pouvez apporter votre contribution pour résoudre le problème
:merci: pour laurentSc
Pour information cf. cette discussion également :
http://www.developpez.net/forums/d78...lantes-pop-up/
1-
Citation:
Envoyé par laurentSc
Bonjour
une question à propos
du script d'images défilantes. Je voudrais savoir comment on peut définir les coordonnées de l'image défilante. Je me suis rappelé que ds le tps, j'avais utilisé cette fonction :
Code :
Code:
1
2
3
4
5
6
7
8
|
function afficher(objSpan,image)
{
objSpan.style.color = "#FF0000";
document.getElementById("conteneur"+image).style.visibility = "visible";
chrono = setTimeout(function(){deroule(image);},attente);
} |
qd je l'appelais sur un onmouseover, mais ds ce script, elle n'y est pas ; donc comment faire ?
2-
Citation:
Envoyé par Auteur
Les images sont placées dans un conteneur, un tableau dans le cas des images qui défilent horizontalement. Et ce tableau est inclus dans un div.
Comme ce tableau est plus grand que le div il y a un "overflow" (propriété CSS) et donc une barre de défilement horizontale qui est cachée.
Code:
1
2
3
4
5
6
|
.conteneur{
border: 5px #AAAAAA ridge; /* bordure du conteneur */
overflow: hidden; /* on cache les barres de défilement */
padding: 0px; /* pas de marge intérieure */
} |
Pour faire défiler il suffit simplement de déplacer la barre de défilement (fonction déroule)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function deroule()
{
var distance;
conteneur = document.getElementById("conteneur");
distance = conteneur.scrollWidth / tabImg.length;
if (conteneur.scrollLeft + distance >=conteneur.scrollWidth)
{
sens = -1;
}
if (conteneur.scrollLeft<distance)
{
sens = 1;
}
posFin = conteneur.scrollLeft + sens * distance;
chrono = setTimeout("defileImage()", tempo);
} |
Bon le plus dur est de savoir de combien de pixels il faut se déplacer :aie:
Donc si tu veux modifier les coordonnées des images, il faut t'attaquer au conteneur : le div
Code html :
Code:
1
2
3
| <div class="conteneur" id="conteneur">
</div> |
3-
Citation:
Envoyé par laurentSc
En fait, mon besoin est un peu différent : c'est le conteneur lui-même que je voudrais placer alors qu'aujourd'hui, on n'a pas le choix. Et d'autre part, je ne voudrais pas le faire apparaître sur un onmouseover (
Citation:
Code:
1
2
3
4
| <span onmouseover="afficher(this)"
style="font-weight: bold; color: rgb(0, 0, 255); cursor: pointer;">passez
la souris ici </span><br>
), mais tout le tps ; comment faire ? |
