Accueil > Forum > > > > Déplacement d'images
 Déplacement d'images
lundi 5 juillet 2010 à 11:09:54 |
Déplacement d'images
plough50
|
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 |
|
lundi 5 juillet 2010 à 15:59:08 |
Re : Déplacement d'images
kazma
|
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
Code HTML : <!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><body vlink="#fdc566" alink="#f56f6b" bgcolor="#530080"
link="#ffff00">
<div id="buttons">
<p><big>What makes a "dream truck" ?!</big></p>
<p><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.<br>
<br>
<span lang="fr">
<b>/!\</b><i> Attention : un des boutons est à éviter...</i><br></span></small>
<span lang="fr">
<br>
Lorsque vous avez reconstitué l'image
<a href="#"
onclick="Popup=window.open('vocab_chrome.htm','Exercise','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=450,left=830,top=200');return
false;">cliquez ici</a>
</span>
</p>
<p>
<input class="style_input" onclick="dynaText1.startMovement()"
value="Mudguard" type="button"><br>
<input class="style_input" onclick="dynaText2.startMovement()"
value="Air filter" type="button"><br>
<input class="style_input" onclick="dynaText3.startMovement()"
value="Fuel tank" type="button"><br>
<input class="style_input" onclick="dynaText4.startMovement()"
value="Front wheel" type="button"><br>
<input class="style_input" onclick="dynaText5.startMovement()"
value="Exhaust pipe" type="button"><br>
<input class="style_input" onclick="dynaText10.startMovement()"
value="Radiator grill" type="button"><br>
<input class="style_input" onclick="dynaText7.startMovement()"
value="Left indicator" type="button"><br>
<input class="style_input" onclick="dynaText11.startMovement()"
value="Headlights" type="button"><br>
<input class="style_input" onclick="dynaText8.startMovement()"
value="Bumper/Fender" type="button"><br>
<input class="style_input" onclick="alert('We can\'t see it - try again
!');window.location.reload();" value="Right indicator" type="button"><br>
<input class="style_input" onclick="dynaText6.startMovement()"
value="Right mirror" type="button"><br>
<input class="style_input" onclick="dynaText9.startMovement()"
value="Fog lights" type="button"><br>
<input class="style_input2" onclick="window.location.reload();"
value="Recommencer" type="button"><br>
</p>
</div>
<div id="truck">
<div id="mudguard" style="position: absolute;">
<img src="chrome_fichiers/mudguard.jpg" alt="Mudguard" width="36"
border="0" height="71">
</div>
<div id="filter" style="position: absolute;">
<img src="chrome_fichiers/filter.jpg" alt="Air filter" title="Air
filter" width="45" border="0" height="98">
</div>
<div id="tank" style="position: absolute;">
<img src="chrome_fichiers/tank.jpg" alt="Fuel tank" title="Fuel tank"
width="106" border="0" height="82">
</div>
<div id="wheel" style="position: absolute;">
<img src="chrome_fichiers/wheel.jpg" alt="Front wheel" title="Front
wheel" width="61" border="0" height="136">
</div>
<div id="exhaust" style="position: absolute;">
<img src="chrome_fichiers/exhaust.jpg" alt="Exhaust pipe" title="Exhaust
pipe" width="40" border="0" height="349">
</div>
<div id="mirror" style="position: absolute;">
<img src="chrome_fichiers/mirror.jpg" alt="Rear-view mirror"
title="Rear-view mirror" width="30" border="0" height="72">
</div>
<div id="indicator" style="position: absolute;">
<img src="chrome_fichiers/indicator.jpg" alt="Left indicator"
title="Left indicator" width="27" border="0" height="28">
</div>
<div id="bumper" style="position: absolute;">
<img src="chrome_fichiers/bumper.jpg" alt="Bumper or fender"
title="Bumper or fender" width="300" border="0" height="71">
</div>
<div id="grille" style="position: absolute;">
<img src="chrome_fichiers/grille.jpg" alt="Radiator grille"
title="Radiator grille" width="156" border="0" height="148">
</div>
<div id="headlights" style="position: absolute;">
<img src="chrome_fichiers/lights.jpg" alt="Headlights"
title="Headlights" width="274" border="0" height="43">
</div>
<div id="foglights" style="position: absolute;">
<img src="chrome_fichiers/fog_lights.jpg" alt="Fog lights" title="Fog
lights" width="187" border="0" height="25">
</div>
<div id="cache_a">
<span style="position: absolute; left: 0px; top: 0px;">
<img src="chrome_fichiers/cache_a.jpg" alt="Dream Truck" width="349"
border="0" height="88"></span>
</div>
<div id="cache_b">
<span style="position: absolute; left: 0px; top: 0px;">
<img src="chrome_fichiers/cache_b.jpg" alt="Dream Truck" width="90"
border="0" height="370"></span>
</div>
<div id="cache_c">
<span style="position: absolute; left: 0px; top: 0px;">
<img src="chrome_fichiers/cache_c.jpg" alt="Dream Truck" width="172"
border="0" height="170"></span>
</div>
<div id="credit">
<p><small>See the VIS Polish site : <a
href="http://www.vispolish.com/index.asp">http://www.vispolish.com/index.asp</a></small></p>
</div>
</div>
</body></html> |
|
lundi 5 juillet 2010 à 17:58:47 |
Re : Déplacement d'images
plough50
|
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
|
|
lundi 5 juillet 2010 à 19:44:31 |
Re : Déplacement d'images
PetoleTeam
|
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)
|
|
lundi 5 juillet 2010 à 23:11:43 |
Re : Déplacement d'images
kazma
|
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
|
|
lundi 5 juillet 2010 à 23:22:44 |
Re : Déplacement d'images
plough50
|
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
|
|
Cette discussion est classée dans : images, déplacement, apprendre, choses, tim
 Répondre à ce message
 Sujets en rapport avec ce message
Déplacement aléatoire de plusieurs images [ par tales ]
Bonjour,Je cherche un script qui me permette d'avoir un déplacement aléatoire de plusieurs images et chaque fois que les images changent de direction
Lightbox help-me ! [ par nanouk21 ]
Je débute mais voilà j'ai réalisé mon premier site et m'attaque à un second dans lequel je souhaite insérer un slide show (le même tyle que dans mon p
menu et images dynamiques [ par tapi ]
Bonjour,Je cherche à créer une page html avec à gauche un menu (5 lignes de textes) et lorsque l'on passe la souris sur une des lignes, des images cha
Display:none et images [ par sonofgod2 ]
Bonjour,j'ai recement découvert un petit script qui me permet d'afficher ou de cacher des Divs, et ça pour les sites internet c'est trés appréciable :
Problème sur un diaporama : images décalées [ par niscemie ]
Bonjour, Je suis graphiste et je suis amenée à intégrer un petit diaporama sur une page. J'ai donc trouvé un script simple qui me permettait d'affiche
refresh images aléatoires [ par deud5 ]
Bonjour,J'ai des images dans un tableau comme ceci (voici une cellule) :
selection d'images ayant une classe particulière [ par med76 ]
Bonjour,J'essaie d'externaliser totalement mon javaScript, et je rencontre un petit problème avec une fonction.En effet, j'aimerais afficher une alert
bandeau d'images [ par roumens ]
Bonjour,Alors là... vous lisez le méssage du plus débutant des débutants, d'ailleurs je ne suis pas sur d'etre dans le bon theme pour poser ma questio
aligner les images horizontalement [ par oceane751 ]
bonjour à tous avec le code qui suit, mes images defilent de façon verticale mais je voudrais que ces images défilent horizontalement voici le c
" Menu déroulant avec images liens et agrandissement " [ par WinZapS ]
Bonjour à vous ,Le nom de mon sujet n'est pas trop explécite mais ce que je voudrais c'est comme ce qu'il y a sur ce site :http://www.lephoceen.fr , l
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|