changement de page à la molette

**badmanner** · 10/03/2008, 14h15

Bonjour à tous,
je me renseigne depuis quelque temps sur l'événement onscroll.
J'ai vu que l'on pouvait par exemple faire ça :

Code :

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

1
2
3
4
5
6
7
 
<html>
<body onscroll="alert('The user is scrolling the document')">
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     Reduce the size of your browser to see a scroll bar
</body>
</html>

D'ailleurs peut-être n'est-ce pas onscroll mais onmousewheel qu'il faudrait utiliser...

Ce que je souhaite faire pour ma part est de changer de page html à chaque cran de molette de la souris, ceci dans le but de faire défiler des images d'anatomie.
Ex : je suis sur page3.html, j'avance la molette d'un cran j'arrive sur page4.html, je recule de 2 crans je suis sur page2.html...
Est-ce possible?
Je vous remercie de votre aide.

**le_chomeur** · 10/03/2008, 14h32

Oui cela est possible via les évènements :

IE6, opéra : onmousewheel
Firefox : DOMMouseScroll

Mais qu'elle est l'utilité ?
si l'utilisateur n'a que 2 boutons ???

**simoryl** · 10/03/2008, 14h35

onMouseWheel & DOMMouseScroll plutôt, cf ce thread intéréssant : http://www.developpez.net/forums/sho...d.php?t=349176

Sinon, pourquoi recharger la page s'il s'agit d'image? changes simplement ton image.src, ce sera plus simple : tu fais un tableau d'image et quand ça "wheel", tu bouges dans ton tableau et tu affiches l'images correspondant à la cellule du tableau.

En espérant avoir pu t'aider :-)

Simo'

**badmanner** · 10/03/2008, 14h47

Tout d'abord, merci pour vos réponses rapides.
Pour vous éclairer, voici ce que j'ai fait.

http://www.guilloz-anatomy.com/Eaxneut1.htm.

L'intérêt pour moi serait de ne pas avoir à cliquer sur "suivant" pour "descendre" dans le membre, en sachant que la version que je prépare a plus de 700 images...
Je voudrais que l'on puisse monter et descendre à la molette de la souris, ca serait plus rapide, plus aisé et plus naturel pour le monde médical.
Je vous remercie

**simoryl** · 10/03/2008, 15h06

Pourquoi ne pas faire carrément un p'tit coup d'Ajax couplé avec un ch'tiot php et une tiote base mysql plutôt que mon idée de tableau qui serait un peu lourd avec 700 images...
Avantage : tu pourrais te faire un backoffice pour ajouter et modifier tes images, histoire que ce soit plus facile à gérer :-)

Simo'

**badmanner** · 10/03/2008, 15h27

Pourquoi ne pas faire carrément un p'tit coup d'Ajax couplé avec un ch'tiot php et une tiote base mysql plutôt que mon idée de tableau qui serait un peu lourd avec 700 images...
Avantage : tu pourrais te faire un backoffice pour ajouter et modifier tes images, histoire que ce soit plus facile à gérer :-)

Complètement d'accord avec toi, je suis même parti pour tout refaire en flash, je suis en train de me former.

Mais ma question portait essentiellement sur le changement de page par l'action de la molette, c'est le problème que je dois régler le plus rapidement.
Je pense que c'est possible, mais toutes les syntaxes que j'ai pu utliser ne fonctionnent pas.
Quelqu'un aurait-il un exemple de code qui me ferait passer de la page1.html à la page2.html par la molette?
Je vous remercie d'avance

**badmanner** · 10/03/2008, 16h15

j'ai trouvé ceci sur le msdn, cela permet de zoomer une image avec la molette de la souris, en javascript.
Je me dis donc que cela doit être possible de changer de page :

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
 
<html>
 
<head>
<script type="text/javascript">
var count = 10;
function Picture()
{
    if (event.wheelDelta >= 120)
        Resize(++count);
    else if (event.wheelDelta <= -120)
        Resize(--count);   
 
    return false;
}
function Resize(c){    
    oImage.style.zoom = c + '0%';
}
</script>
</head>
 
<body>
 
<img id="oImage" src="Sample.jpg" alt="sample "onmousewheel="Picture()">
 
</body>
 
</html>

Exemple ici : http://samples.msdn.microsoft.com/wo...usewheelEX.htm

J'ai beau essayer d'adapter le code, ça ne marche pas.
ce que je veux juste faire finalement c'est faire rentrer mon <a href="page2.html"> </a> apres mon onmousewheel ou DOMMouseScroll.

Allez, j'y retourne, si vous avez une idée, je vous remercie

**simoryl** · 10/03/2008, 16h31

voici une piste pour un debut en modifiant ton code pris sur msdn :

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
<html>
<head>
<script type="text/javascript">
var tabLocation=new Array('./images/image01.jpg',
'./images/image02.jpg',
'./images/image03.jpg',
'./images/image04.jpg',
'./images/image05.jpg');
var imageEnCours=0;
function Picture() {
    if (event.wheelDelta >= 120) {
        document.getElementById('oImage').src=tabLocation[imageEnCours+1];
        imageEnCours++;
    } else if (event.wheelDelta <= -120) {
        document.getElementById('oImage').src=tabLocation[imageEnCours-1];
        imageEnCours--;
    }
    return false;
}
</script>
</head>
<body>
<img id="oImage" src="./images/image01.jpg" alt="sample" onmousewheel="Picture()">
</body>
</html>

Reste plus qu'à adapter pour être compatible Firefox et à faire les vérification nécessaire pour ne pas dépasser des limites de ton tableau.
J'ai pas tester mon code mais l'idée y est.

Simo'

**badmanner** · 11/03/2008, 08h08

Bonjour à tous,
merci pour cette aide précieuse.
Je vais tester le code tout à l'heure.
Je me demande juste à ce niveau là :

Code :

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

.src=tabLocation[imageEnCours+1];

Je ne pourrai pas faire comme ça partout.
En effet mes images sont nommées de manière incrémentielle mais lorsque je change de région anatomique (ex de la cuisse au genou), les noms des images changent (c12.jpg -> g1.jpg).

Comment dois-je donc écrire lorsque je veux spécifier une image particulière?

Code :

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

.src=tabLocation[image12.jpg];

Comme ça?

Merci encore, j'avance beaucoup

**simoryl** · 11/03/2008, 09h23

tabLocation est un tableau qui contient l'emplacement de tes images

Code :

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

1
2
3
4
5
var tabLocation=new Array('./images/image01.jpg',
'./images/image02.jpg',
'./images/image03.jpg',
'./images/image04.jpg',
'./images/image05.jpg');

Ici les images sont dans un dossier nommé images et elles portent comme nom : image01.jpg, image02.jpg, etc. mais elles pourraient très bien se nommer truc.jpg, machin.gif : cela n'a aucune importance.

Code :

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

document.getElementById('oImage').src=tabLocation[imageEnCours-1];

Là, je change la source de l'image ayant pour identifiant oImage. Je lui affecte comme nouvelle image celle qui se trouve à "imageEnCours-1" dans mon tableau.

Simo'

**badmanner** · 11/03/2008, 17h32

ok en bidouillant un peu ta solution marche, merci beaucoup
Au final, j'ai une page et des images.
Mais il me reste un problème.
Comme dans ma première version j'ai des div qui s'affichent au survol des légendes des muscles.
voir ici (survol du muscle deltoîde par exemple)
http://www.guilloz-anatomy.com/Baxneut1.htm

En effet, j'avais crée sur chaque page des zones réactives sur l'image et quand on survolait ces zones, ça affichait la div correspondante.
Seulement, avec la solution de scroll, je ne peux plus faire ça, puisque dans ma page j'ai des images que j'appelerais "aléatoires".
J'espère me faire comprendre.
Peut-être est-ce que les div ne sont pas la bonne solution pour ça.

Encore une petite chose :
N'est-il pas possible de faire du code flash-actionscript et l'intégrer dans ma page pour prendre en code la molette, je sais que flash gère bien ce genre de choses.
Je vous remercie encore pour cette aide précieuse.

**Matthieu2000** · 11/03/2008, 17h45

Envoyé par badmanner

je suis sur page3.html, j'avance la molette d'un cran j'arrive sur page4.html, je recule de 2 crans je suis sur page2.html...
Est-ce possible?

appuie sur le bouton shit!

**simoryl** · 12/03/2008, 09h27

Envoyé par Matthieu2000

appuie sur le bouton shit!

Je pense que tu as voulu dire shift... lol

Le souci avec ton raccord de bout de tuyau c'est que tu ne peux pas aller sur une page qui n'a encore jamais été consultée...

Sinon, pour les zones survolées, tu peux aussi le faire avec des tableaux mais à plusieurs dimensions et toujours à l'aide d'index pour les parcourir.

Le mieux c'est quand même de passer à Ajax pour que cela soit plus gérable.
Si Ajax te parais trop compliqué, tu peux retourner ta veste comme ceci :
tu fais un php qui selon la variable qu'il reçoit change le contenu de la page et les div en passant et quand l'internaute wheel, tu change l'url en incremantant une variable ou en decrémantant (document.location.href= en Javascript).

Sinon en flash il n'y a aucun souci pour le wheel et avantage, tu pourras passer en plein écran pour immerger ton internaute dans le sujet :-)

Simo'

**le_chomeur** · 12/03/2008, 09h46

+1 pour ajax ... de plus tu devrais également permettre la consultation de page par numéro , car si comme tu nous l'a dit tu as 700 page ... ça en fait des coup de molette ...

**badmanner** · 12/03/2008, 10h33

Bonjour à tous,

Sinon en flash il n'y a aucun souci pour le wheel et avantage, tu pourras passer en plein écran pour immerger ton internaute dans le sujet :-)

Je ne connais pas bien flash mais j'ai du temps alors pourquoi pas, le plein écran, c'est aussi quelquechose qui me plairait bien.
Mais puis-je juste inclure du code action script dans ma page ou dois-je tout refaire en flash?

si comme tu nous l'a dit tu as 700 page ... ça en fait des coup de molette

Oui c'est vrai, mais si tu regardes bien sur la gauche, tu peux passer directement de l'épaule au poignet...

Désolé pour toutes ces questions mais je pense qu'avant de se lancer dans la bataille le temps passé à réflechir et à entrevoir toutes les possibilités n'est pas du temps perdu.

**simoryl** · 13/03/2008, 09h29

Envoyé par badmanner

Mais puis-je juste inclure du code action script dans ma page ou dois-je tout refaire en flash?

Tu ne peux pas intégrer de l'ActionScript dans de l'html. C'est un langage de programmation pour ajouter de l'interactivité aux animations Flash et leurs permettre de communiquer avec un serveur.
Actionscript est indissociable de Flash et Flex (un autre truc de chez Adobe).

changement de page à la molette

JavaScript

Discussions similaires

Partager

Partager