Fonction random au onclick

Résolu

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention - 6 sept. 2014 à 20:20

Bonjour,

Étant encore débutante en code, j'ai trouvé un script java tout fait qui permet de changer les positions des images de façon aléatoire. Le problème c'est que je ne comprends pas assez ce langage pour modifier le script ! Je voudrais que les images se repositionnent automatiquement lorsqu'on clique sur un lien précis, et non lorsque l'on recharge la page comme c'est le cas pour le moment.

Voici le script que j'ai :

<script>

function init(){

w=document.body.offsetWidth;

h=document.body.offsetHeight;

rd=document.getElementsByTagName('div');

for(c=0;c<rd.length;c++) {

if(rd[c].className=='random') {

xCoord=Math.floor(Math.random()*w);

yCoord=Math.floor(Math.random()*h);

if(xCoord>=w-rd[c].offsetWidth-10){

xCoord=w-rd[c].offsetWidth-10;

}

if(xCoord<=10){

xCoord=10;

}

if(yCoord>=h-rd[c].offsetHeight-10){

yCoord=h-rd[c].offsetHeight-10;

}

if(yCoord<=10){

yCoord=10;

}

rd[c].style.left=xCoord+'px';

rd[c].style.top=yCoord+'px';

}

}

}

window.addEventListener?

window.addEventListener('load',init,false):

window.attachEvent('onload',init);

</script>

J'imagine que tout se joue dans les trois dernières lignes mais en essayant de les bidouiller ça n'a rien donné !

Voilà j'espère que quelqu'un volera à mon secours car mes yeux et mon cerveau commencent à avoir du mal haha !

Merci, Marie.

Afficher la suite

A voir également:

Fonction random au onclick
Fonction si et - Guide
Fonction miroir - Guide
Fonction moyenne excel - Guide
Fonction remplacer sur word - Guide
Fonction somme excel - Guide

6 réponses

Réponse 1 / 6

Utilisateur anonyme

Bonjour, petit détail pour commencer, c'est du Javascript et pas du Java (à ne pas confondre donc dans tes recherches). A première vue, le code qui définit la position est :

xCoord=Math.floor(Math.random()*w); 

yCoord=Math.floor(Math.random()*h);

Ce sont les coordonnées X et Y. Il faudrait peut être voir une page complète avec ce code pour se rendre compte de ce que tu veux faire. Tu veux dire remettre les images à la bonne position comme avant? Dans ce cas il te faudra mémoriser la position dans des variables pour ensuite faire une fonction à appeler via un lien.

Réponse 2 / 6

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

ah oui je me trompe tout le temps !

en fait ce qui definit la position me va, tout fonctionne bien mais pour le moment les images changent de place a chaque fois que l'on recharge la page. Mais je voudrais ce même effet lorsque l'on clique sur une image, de façon à ce que la page ne soit pas réactualisée.

je te mets le code entier mais il y a beaucoup d'autres choses qui ne concernent pas cette question, j'espère que tu vas y comprendre quelque chose :

<html>

<head>
<title>? Marie Malarme ?</title>
<link href="site-marie-malarme.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>


<div id="img" style="position:absolute;z-index:4000">
<a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/about');"><img src="Logo tournant/Point d'interrogation/point-interrogation.gif" width=75" alt="" onMouseOver="pause_resume();" onMouseOut="pause_resume();""></a href>
</div>


<style>
html,body {
height:120%;
margin:0;
}
.random {
position:absolute;
}

.img {

}
</style>


<script>
function PopupWindow(source, strWindowToOpen){
var strWindowFeatures = "toolbar=no,resize=no,titlebar=no,";
strWindowFeatures = strWindowFeatures + "menubar=no,width=413,height=299,maximize=null";
window.open(strWindowToOpen, '', strWindowFeatures); }
</script>


<script>
function init(){

w=document.body.offsetWidth;
h=document.body.offsetHeight;
rd=document.getElementsByTagName('div');

for(c=0;c<rd.length;c++) {
if(rd[c].className=='random') {
xCoord=Math.floor(Math.random()*w);
yCoord=Math.floor(Math.random()*h);

if(xCoord>=w-rd[c].offsetWidth-10){
xCoord=w-rd[c].offsetWidth-10;
}
if(xCoord<=10){
xCoord=10;
}

if(yCoord>=h-rd[c].offsetHeight-10){
yCoord=h-rd[c].offsetHeight-10;
}
if(yCoord<=10){
yCoord=10;
}

rd[c].style.left=xCoord+'px';
rd[c].style.top=yCoord+'px';
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>


<script language="JavaScript">

var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 5;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();

</script>



<center><img src="Vignettes détourées/marie-malarme-graphic-designer-noir.png" style="z-index:1200;margin-top:30px;position:relative" alt="Image" onMouseOver="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-degrade-grand.gif';" onMouseOut="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-noir.png';"></a></center>



<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/processing');"><img class="img" src="Vignettes détourées/marie-malarme-processing.png" width="150" style="z-index:50" alt="Image" onClick="javascript:this.src='Vignettes détourées/marie-malarme-processing-n&b.png'"></a></div>


<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/cristallisation');"><img class="img" src="Vignettes détourées/marie-malarme-cristallisation.gif" width="100" style="z-index:100"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/stage-formidable');"><img class="img" src="Vignettes détourées/marie-malarme-stage-formidable.png" width="150" style="z-index:200"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/cartes-3d');"><img class="img" src="Vignettes détourées/marie-malarme-cartes-3d.gif" width="175" style="z-index:250"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/spot-youtube');"><img class="img" src="Vignettes détourées/marie-malarme-spot-youtube.gif" width="190" style="z-index:260"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/pop-up');"><img class="img" src="Vignettes détourées/marie-malarme-pop-up2.gif" width="130" style="z-index:275"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/habemus-scoop');"><img class="img" src="Vignettes détourées/marie-malarme-serigraphie-habemus-scoop.gif" width="150" style="z-index:300"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/zapping');"><img class="img" src="Vignettes détourées/marie-malarme-thumbnails-zapping.gif" width="150" style="z-index:400"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/appli-smartphone');"><img class="img" src="Vignettes détourées/marie-malarme-appli-e-dossier.png" width="90" style="z-index:450"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/affiches-kikoo-docteur');"><img class="img" src="Vignettes détourées/marie-malarme-thumbnail-affiches-kikoodocteur-3.png" width="150" style="z-index:500"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/site-kikoo-docteur');"><img class="img" src="Vignettes détourées/marie-malarme-site-kikoodocteur.png" width="150" style="z-index:600"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/vidal-doctissimo');"><img class="img" src="Vignettes détourées/marie-malarme-thumbnail-vidal.png" width="250" style="z-index:700"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/typo-scroll');"><img class="img" src="Vignettes détourées/marie-malarme-typo-scroll-entier.png" width="500" style="z-index:800"></a></div>

</body>
</html>

il s'agit du script random, que j'ai appliqués aux div qui sont à la fin. Merci beaucoup pour ton aide :)

Utilisateur anonyme

Retire ton refresh :

<meta http-equiv="Refresh" content="5; url=ESSAI RANDOM.html">

Dans un lien, tu peux appeler une fonction js en faisant :

< href="javascript:init();">Lien</a>

Déjà renomme ta fonction init en un truc plus parlant.

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

la balise meta pour refresh est en commentaire donc pas active. j'ai renommé init en randomPosition mais cest toujours pareil, je pense que ce qu'il faut modifier c'est dans ce bout là :

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

j'imagine que le onload est ce qui charge la page ? je ne suis pas sûre mais c'est ce que j'en ai déduit, j'ai essayé de le modifier avec un onclick mais bon ça n'a pas marché alors je ne sais plus où chercher

Utilisateur anonyme

Ces 3 lignes c'est pour appeler le code init (qui maintenant s'appelle randomPosition en passant) à l'ouverture de ta fenêtre.

Essaie de placer un lien dans ta page comme ceci :

<a href="javascript:randomPosition();">Lien</a>

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

ok je viens de faire ça : <div class="random"><a href="javascript:randomPosition();javascript:PopupWindow(this,'http://www.mariemalarme.fr/cristallisation');"><img class="img" src="Vignettes détourées/marie-malarme-cristallisation.gif" width="100" style="z-index:100"></a></div>

mais du coup c'est toujours pareil

Utilisateur anonyme

poste ta page complète avec le formatage de code (sélectionner le code et cliquer sur le bouton <> (code) de Comment Ca Marche). Je vais essayer de te le modifier pour faire un lien qui appelle la fonction.

Réponse 3 / 6

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

<html>
<head>
<title>? Marie Malarme ?</title>
<link href="site-marie-malarme.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>


<!--Point d'interrogation tournant-->
<div id="img" style="position:absolute;z-index:4000">
<a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/about');"><img src="Logo tournant/Point d'interrogation/point-interrogation.gif" width=75" alt="" onMouseOver="pause_resume();" onMouseOut="pause_resume();""></a href>
</div>


<!--propriétés pour script random-->
<style>
html,body {
    height:120%;
    margin:0;
}
.random {
    position:absolute;
}

.img {

 }
</style>


<!--script pour ouvrir une nouvelle fenêtre quand on clique sur une vignette-->
<script>
function PopupWindow(source, strWindowToOpen){ 
var strWindowFeatures = "toolbar=no,resize=no,titlebar=no,"; 
strWindowFeatures = strWindowFeatures + "menubar=no,width=413,height=299,maximize=null"; 
window.open(strWindowToOpen, '', strWindowFeatures); } 
</script>


<!--script random pour que les vignettes se placent en random lorsque qu'on rafraîchit la page-->
<script>
function randomPosition(){

   w=document.body.offsetWidth;
   h=document.body.offsetHeight;
   rd=document.getElementsByTagName('div');

for(c=0;c<rd.length;c++) {
if(rd[c].className=='random') {
   xCoord=Math.floor(Math.random()*w);
   yCoord=Math.floor(Math.random()*h);

if(xCoord>=w-rd[c].offsetWidth-10){
   xCoord=w-rd[c].offsetWidth-10;
 }
if(xCoord<=10){
   xCoord=10;
 }

if(yCoord>=h-rd[c].offsetHeight-10){
   yCoord=h-rd[c].offsetHeight-10;
 }
if(yCoord<=10){
   yCoord=10;
 }

   rd[c].style.left=xCoord+'px';
   rd[c].style.top=yCoord+'px';
   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',randomPosition,false):
   window.attachEvent('onload',randomPosition);
</script>


<!--script pour faire rebondir le point d'interrogation-->
<script language="JavaScript">

var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 5; 
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos; 
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft; 
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
   }
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
   }
}
start();

</script>


<!--bannière coordonnées-->
<!--IMAGE CENTREE MAIS NE SE FIXE PAS SINON SE DECENTRE, NAVIGATEUR?-->
<center><img src="Vignettes détourées/marie-malarme-graphic-designer-noir.png" style="z-index:1200;margin-top:30px;position:relative" alt="Image" onMouseOver="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-degrade-grand.gif';" onMouseOut="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-noir.png';"></a></center> 
<!--	ferré gauche, position fixed ok  <a href="http://www.mariemalarme.fr/"><img src="Vignettes détourées/marie-malarme-graphic-designer-left.png" style="position:fixed;z-index:1200;margin-left:30px;margin-top:30px" alt="Image" onMouseOver="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-left.gif';" onMouseOut="javascript:this.src='Vignettes détourées/marie-malarme-graphic-designer-left.png';"></a></div>--> 


<!--vignettes projets-->
<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/processing');"><img class="img" src="Vignettes détourées/marie-malarme-processing.png" width="150" style="z-index:50" alt="Image" onClick="javascript:this.src='Vignettes détourées/marie-malarme-processing-n&b.png'"></a></div>
<!-- onClick="javascript:location.reload();" 
propriété pour reload la page lorsqu'on clique sur le lien -->

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/cristallisation');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-cristallisation.gif" width="100" style="z-index:100"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/stage-formidable');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-stage-formidable.png" width="150" style="z-index:200"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/cartes-3d');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-cartes-3d.gif" width="175" style="z-index:250"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/spot-youtube');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-spot-youtube.gif" width="190" style="z-index:260"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/pop-up');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-pop-up2.gif" width="130" style="z-index:275"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/habemus-scoop');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-serigraphie-habemus-scoop.gif" width="150" style="z-index:300"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/zapping');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-thumbnails-zapping.gif" width="150" style="z-index:400"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/appli-smartphone');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-appli-e-dossier.png" width="90" style="z-index:450"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/affiches-kikoo-docteur');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-thumbnail-affiches-kikoodocteur-3.png" width="150" style="z-index:500"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/site-kikoo-docteur');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-site-kikoodocteur.png" width="150" style="z-index:600"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/vidal-doctissimo');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-thumbnail-vidal.png" width="250" style="z-index:700"></a></div>

<div class="random"><a href="javascript:PopupWindow(this,'http://www.mariemalarme.fr/typo-scroll');javascript:randomPosition();"><img class="img" src="Vignettes détourées/marie-malarme-typo-scroll-entier.png" width="500" style="z-index:800"></a></div>



</body>
</html>

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

euuh perso je ne le vois pas en formatage... toi oui ?

Utilisateur anonyme

Quand tu charges ta page, les images sont bien mélangées aléatoirement? Car normalement en appelant cette même fonction dans ton lien ça devrait marcher aussi.

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

oui ca marche bien, je veux juste que ca donne cet effet lorsqu'on clique sur un bouton et non lorsque l'on recharge la page

Réponse 4 / 6

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

j'ai presque résolu le problème : j'ai remplacé le load/onload par click/onclick

window.addEventListener? 
window.addEventListener('load',randomPosition,false): 
window.attachEvent('onload',randomPosition);

devient donc

window.addEventListener? 
window.addEventListener('click',randomPosition,false): 
window.attachEvent('onclick',randomPosition);

le seul problème est que les images bougent aléatoirement à chaque fois qu'on clique, n'importe où, alors que j'aurais voulu que ce soit seulement lorsqu'on cllique sur une image précise. Si jamais tu as une idée de comment attribuer la fonction javascript randomPosition à un seul élément seulement, fais le moi savoir ;) sinon je crois que je vais laisser comme ça car ça devient compliqué pour mon level !!

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

Posez votre question

Réponse 5 / 6

Utilisateur anonyme

salut,

rocky_123 a répondu ici : https://forums.commentcamarche.net/forum/affich-30758471-fonction-random-au-onclick#5

tu peux enlever cette ligne :

window.addEventListener?
window.addEventListener('click',randomPosition,false):
window.attachEvent('onclick',randomPosition);

et mettre dans chacune de tes div un onclick='randomPosition()'

par exemple :

<div class='random' onclick='randomPosition()'></div>

ensuite si tu veux plus d'effet il faut passe par jquery, voici un code qui fonctionne :

http://bencesticiquetudoiscliquer.bl.ee/marikiki.html

<!DOCTYPE html>
<html>
	<head>
		<title>Marikikikiki</title>
		<meta charset="UTF-8" />

		<style>
			body {
				height: 1000px;
			}
			.random {
				width: 100px;
				height: 100px;
				border: 2px solid red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- les div a déplacer -->
		<div class="random" style="left:200px;top: 400px;"></div>
		<div class="random" style="left:100px;top: 250px;"></div>
		<div class="random" style="left:500px;top: 50px;"></div>
		<div class="random" style="left:100px;top: 600px;"></div>

		<!-- biblotheque jquery -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<!-- script -->
		<script type="text/javascript">
			// largeur de l'écran moins une valeur à adapter'
			var largeur = ($(window).width()) - 100;
			// pareil avec hauteur de l'ecran
			var hauteur = ($(window).height()) - 100;

			$('.random').click(function() {// evenement au click
				$('.random').each(function() {// boucle
					var el = $(this);
					// temps aléatoire pour l'animation'
					var time = Math.ceil(Math.random() * 2000);
					// calcul aléatoire de la futur position left
					var rl = Math.floor(Math.random() * (largeur));
					// pareil avec top
					var rt = Math.floor(Math.random() * (hauteur));
					/*
					 * lancement de l'animation
					 */
					el.animate({
						left : rl,
						top : rt
					}, time, 'linear');
				});

			});

		</script>

bonne journée

×º°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[×º°"~'"°º×

Réponse 6 / 6

Marikikikiki Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Waw ! Merci beaucoup, je vais regarder ça de plus près pour l'intégrer correctement à ma page !!! Bonne soirée et encore merci de votre aide :))

Discussions similaires

Remplir une cellule (texte) en fonction d'une autre (texte).

La fonction FILTRE n'est plus reconnue

Message "cette fonction n'est pas disponible actuellement"

[Excel 2010] Remplir cellule d'après contenu d'une autre

Excel : Remplir une cellule en fonction d'une autre

Votre réponse

Discussions similaires