Sujet Précédent Sujet Suivant

Déplacement d'images

plough50 Messages postés 3 Date d'inscription jeudi 25 septembre 2008 Statut Membre Dernière intervention 5 juillet 2010 - 5 juil. 2010 à 11:09
plough50 Messages postés 3 Date d'inscription jeudi 25 septembre 2008 Statut Membre Dernière intervention 5 juillet 2010 - 5 juil. 2010 à 23:22
Bonjour à tous
Je crée des outils de formation en anglais accessible en ligne - je n'ai que très peu de connaissances en Javascript. (J'ai compris certaines choses en utilisant "Hot Potatoes") Mon principe est que si les choses/pages sont suffisamment intéressantes on a envie d'apprendre...
J'ai découvert un vieux script qui m'a permis de faire ce que je voulais avec une image pour apprendre du vocabulaire.
http://tim.davey.perso.neuf.fr/english/chrome.html
Ca marche avec IE, mais ne fonctionne pas avec Firefox. Je pense avoir compris qu'il faudrait utiliser "getElementById" plutôt.
J'ai trouvé plusieurs scripts, mais je n'arrive pas à faire bouger les éléments séparément pour completer la photo. (En plus lorsque qu'on clique une 2eme fois sur le bouton les images se déplace par un pixel de plus...)
Je serais vraiment content si quelqu'un pouvait m'aider ou m'orienter !
Merci
Tim

5 réponses

Réponse 1 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
5 juil. 2010 à 15:59
j'ai regarder le script et c'est bien ca il faut mettre getelementbyId l'ai aussi mis un DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional et j'ai rajouter px pour les position j'ai aussi supprimer la function checkBrowser qui ne servait plus a rien vu que l'on utilise getelementbyId en gros sa marche mai il y a un decalage de l'image en verticale 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<!--[Tim Davey - 2009 - tim.davey@cegetel.net]-->

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="Microsoft FrontPage 5.0">


<title>Anglais Transporteurs - Dream Truck</title>


<style type="text/css"><!--
A:link    { color: #FFFF00 }
A:visited { color: #FDC566 }
A:hover   { color: #F56F6B }

img {
  display : block;
  }
  

#truck {
position: absolute;
top: 15px; 
margin-left: 200px;
width: 800px;
height: 600px;
background: url('chrome_fichiers/truck1a.jpg') no-repeat left top;
font-family: Calibri, Arial;
color: #66FFFF;
font-weight: 400;
text-align: left;
font-size: 16pt; padding-left:10px; padding-right:10px; padding-top:15px; padding-bottom:0px
}

#buttons {
position: absolute;
top: 15px; 
left: 20px;
}	

#buttons p{
font-family: Calibri, Arial;
text-align: left;
width: 170px;
color: #FFFFFF;
font-size: 100%;
}
.style_input{ 
width:150px; 
height:24px; 
font-size:14px; 
}
.style_input2{
background-color: #00FF00; 
width:150px; 
height:22px; 
font-size:12px;
font-family: Times New Roman; 
}
#credit {
position: absolute;
top: 615px; 
left: 200px;
width: 500px;
height: 20px;
font-family: Calibri, Arial;
color: #66FFFF;
font-weight: 400;
text-align: left;
padding: 5px 1px 0px 1px;
font-size: 12pt;
} 

--></style>

<script language="JavaScript" type="text/javascript">
<!--
//      [DynamicMovement v1.2]
//                
//              date: 10/26/98
//
//      This script ables you to easily move
//      objects dynamically around the screen.
//
//  NEW! for version 1.2:
//
//  Cross-browser functionality, the script
//  now delivers DynamicMovement to both
//  MSIE 4.x and Netscape 4.x
//
//  Commercial use prohibited.
//
//      (C) Copyright Jari Aarniala, 1998
//              [foo@dlc.fi - www.dlc.fi/~foo]

IE4 navigator.appName "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4;        
NS4 navigator.appName.substring(0,8) "Netscape" && parseInt(navigator.appVersion) >= 4;
        
// checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ...


// movableObj() -- Creates a new movable object

function movableObj(startX, startY, endX, endY, delay, speed, refId){
        this.sX startX; this.sY startY;     this.eX = endX;
        this.eY endY; this.de delay; this.sp = speed;
        this.ref = refId;
        xL = endX - startX;
        yL = endY - startY;
        with (Math){
                if(abs(xL) > abs(yL)){
                        this.xS = (xL > 0)?1:-1;
                        this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL);
                        this.howManySteps = abs(xL / speed);
                } else if(abs(yL) > abs(xL)){
                        this.yS = (yL > 0)?1:-1;
                        this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL);
                        this.howManySteps = abs(yL / speed);
                } else {
                        this.yS = (yL > 0)?1:-1;
                        this.xS = (xL > 0)?1:-1;
                        this.howManySteps = abs(xL / speed);
                }
        }
        this.startMovement = startMovement;
}

// startMovement() -- starts the movement

function startMovement(){
                       
                        ref = document.getElementById(this.ref).style;
               
                doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps);
  
}

// doDynamicMovement() -- does the Dynamic Movement

function doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){
        if(Math.floor(hS - 1) != 0){
                hS--;
                curX += xS * speed;
                curY += yS * speed; 
                ref.left = Math.round(curX)+'px';
                ref.top = Math.round(curY)+'px';
                setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp);
        } else {
                setPos(eX, eY, ref);    
        }
}

// setPos() -- sets the end position accurately when doDynamicMovement has done its job

function setPos(x, y, ref){
        ref.left = x+'px';
        ref.top = y;+'px'
}

// -->
    </script>       
<script language="JavaScript" type="text/javascript">
<!--
// Here we define the movable object

dynaText1 = new movableObj(900,-100,571,402,10,10,"mudguard");

dynaText2 = new movableObj(400,-150,427,293,10,10,"filter");

dynaText3 = new movableObj(400,-100,441,419,10,10,"tank");

dynaText4 = new movableObj(400,-200,380,419,10,10,"wheel");

dynaText5 = new movableObj(400,-400,471,65,10,10,"exhaust");

dynaText6 = new movableObj(500,-100,168,234,10,10,"mirror");

dynaText7 = new movableObj(400,-50,364,355,10,10,"indicator");

dynaText8 = new movableObj(600,-120,80,450,10,10,"bumper");

dynaText9 = new movableObj(400,-50,134,490,10,10,"foglights");

dynaText10 = new movableObj(600,-200,145,306,10,10,"grille");

dynaText11 = new movableObj(600,-100,92,392,10,10,"headlights");

dynaText12 = new movableObj(400,-100,580,280,10,10,"alert");

// -->
    </script>

</head>



What makes a "dream truck" ?!


<small>Lots of chrome ? Lots of power ? Click the buttons below to 
see some of the accessories 
on this lorry and try to remember the vocabulary.




/!\ Attention : un des boutons est à éviter...
</small>



Lorsque vous avez reconstitué l'image 
[# cliquez ici] 
















































































































































<small>See the VIS Polish site : http://www.vispolish.com/index.asp</small>








</html>
0
Réponse 2 / 5
plough50 Messages postés 3 Date d'inscription jeudi 25 septembre 2008 Statut Membre Dernière intervention 5 juillet 2010
5 juil. 2010 à 17:58
C'est super gentil d'avoir analysé tout ça, KAZMA !
Je vais bien regarder pour voir comment vous avez modifié le script... ...et essayer d'apprendre !
Un très grand MERCI !
Tim
0
Réponse 3 / 5
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 juil. 2010 à 19:44
Bonjour,
-> KAZMA
...pourquoi passer le DOCTYPE en XHTML, un HTML STRICT semblait suffisant, mais c'est un éternel débat, tout cela pour dire qu'en procédant de la sorte il te faut fermer toutes les balises n'ayant pas de balise de fin

en profiter aussi pour modifier
<script language="JavaScript" type="text/javascript">
en
<script type="text/javascript">
enlever les attributs de la balise body et de les mettre dans la partie style
...

Le script est néanmoins corrigé ++ et un point supplémentaire pour ne pas avoir viré le nom de l'auteur initial.

;O)
0
Réponse 4 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
5 juil. 2010 à 23:11
c'est vrais que il aurai pu rester en html mais il y a de forte chances que le script serve pour une pages en xhtml
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
plough50 Messages postés 3 Date d'inscription jeudi 25 septembre 2008 Statut Membre Dernière intervention 5 juillet 2010
5 juil. 2010 à 23:22
Re-bonjour et encore re-merci (remerciements !).
Je viens de regarder les modifs, KAZMA, et je vois que le point-virgule dans "function setPos" "ref.top" est resté à coté de "y". Il devrait être en fin de ligne, non ? Est-ce que ça change quelque chose ?
Tim
0

Discussions similaires

Excel - Interdire le déplacement d'une feuille
jesuhsXVII -
jesuhsXVII -

7 réponses
Projet jeux d'échecs : déplacement d'une pièce dans une case
razily -
dragonjoker59 -

3 réponses
Comparer 2 image
leonardo14 -
krimog -

12 réponses
QuickReport + 10 Images = Images noires !!!!!!
lbensch -
frantzgac -

2 réponses
Cavalier, jeux d'échec.
cs_Tanaka24 -
super_toinou -

3 réponses
Rejoignez-nous