Fonction random au onclick
Résolu/Fermé
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
-
5 sept. 2014 à 20:12
Marikikikiki Messages postés 13 Date d'inscription dimanche 10 août 2014 Statut Membre Dernière intervention 29 janvier 2015 - 6 sept. 2014 à 20:20
Marikikikiki Messages postés 13 Date d'inscription dimanche 10 août 2014 Statut Membre Dernière intervention 29 janvier 2015 - 6 sept. 2014 à 20:20
A voir également:
- Fonction random au onclick
- Fonction si et - Guide
- Fonction moyenne excel - Guide
- Fonction miroir - Guide
- Fonction somme excel - Guide
- Fonction remplacer word - Guide
6 réponses
Utilisateur anonyme
5 sept. 2014 à 20:31
5 sept. 2014 à 20:31
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 :
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.
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.
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 20:50
5 sept. 2014 à 20:50
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>
<!--balise pour auto-atualisation de la page
<meta http-equiv="Refresh" content="5; url=ESSAI RANDOM.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 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 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');"><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 :)
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>
<!--balise pour auto-atualisation de la page
<meta http-equiv="Refresh" content="5; url=ESSAI RANDOM.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 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 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');"><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 :)
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 21:06
5 sept. 2014 à 21:06
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
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
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
Modifié par Marikikikiki le 5/09/2014 à 21:20
Modifié par Marikikikiki le 5/09/2014 à 21:20
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
mais du coup c'est toujours pareil
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 21:37
5 sept. 2014 à 21:37
<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
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 21:41
5 sept. 2014 à 21:41
euuh perso je ne le vois pas en formatage... toi oui ?
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 22:50
5 sept. 2014 à 22:50
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
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
5 sept. 2014 à 23:42
5 sept. 2014 à 23:42
j'ai presque résolu le problème : j'ai remplacé le load/onload par click/onclick
devient donc
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 !!
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
Utilisateur anonyme
Modifié par lobotoFix le 6/09/2014 à 08:13
Modifié par lobotoFix le 6/09/2014 à 08:13
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
bonne journée
׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
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|[׺°"~'"°º×
Marikikikiki
Messages postés
13
Date d'inscription
dimanche 10 août 2014
Statut
Membre
Dernière intervention
29 janvier 2015
6 sept. 2014 à 20:20
6 sept. 2014 à 20:20
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 :))