JS. 10 afb. in array moeten random gepakt worden waarvan 3 laten zien.
Ik gebruik pure javascript. geen jquery (oid) Ik heb 10 afbeeldingen, waarvan er 3 moeten worden laten zien. Die drie mogen niet hetzelfde zijn. Elke keer als de webpagina herladen wordt moeten de afbeeldingen weer anders zijn. Maar elke keer als de muis op een afbeelding gaat en er weer af moet er ook weer een nieuwe afbeelding laten zien worden.
Ik ben er al een tijdje mee bezig, ik kan niks op internet vinden wat me helpt en toen ben ik gaan zoeken naar een forum waar ik het kan vragen. Uiteindelijk heb ik nog niet echt code die iets oplevert. Ik gebruik 3 img tags als html.
Kan iemand me op weg helpen? Ik wil graag javascript leren. Ik vind het niet erg om te puzzelen, als ik maar een beginnetje heb.
[EDIT:]
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img class="firstImage" onmouseleave="changeImg()">
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
Ik krijg graag opbouwende feedback over mijn vraag,
vriendelijke groet,
F
Gewijzigd op 19/05/2018 23:56:46 door FDance Hero
Succes!
Code (php)
1
2
3
2
3
var imagesArray = Array('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten');
var random = Math.floor(Math.random() * imagesArray.length)
console.log(random);
var random = Math.floor(Math.random() * imagesArray.length)
console.log(random);
Gewijzigd op 19/05/2018 22:51:11 door Fabian webstars
Zo te zien ben je met een verkeerde account ingelogd? :).
Je hebt nu deze code en dus? Wat is je vraag?
Code (php)
1
2
3
2
3
var imagesArray = Array('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten');
var random = Math.floor(Math.random() * imagesArray.length)
console.log(random);
var random = Math.floor(Math.random() * imagesArray.length)
console.log(random);
M'n vraag: Ik heb dus een array, ik heb een random nummer. Maar ik weet niet hoe ik nu na een mouseover een nieuwe/ander nummer krijg. Daar zou ik graag hulp bij willen.
Gewijzigd op 19/05/2018 23:16:07 door FDance Hero
- Waarom maak je nu gebruik van nummers? Je wilt toch afbeeldingen laden?
- Waar haal je je afbeeldingen op?
Gewijzigd op 19/05/2018 23:09:20 door Davier doe
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img class="firstImage" onmouseleave="changeImg()">
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
De random nummers zijn om dus een willekeurige root uit de array te kunnen krijgen
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var padnaarjemap = "images/";
for (var i = 0; i < 3; i++) {
var willekeurig = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = padnaarjemap + willekeurig;
document.body.appendChild(afbeelding);
}
var padnaarjemap = "images/";
for (var i = 0; i < 3; i++) {
var willekeurig = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = padnaarjemap + willekeurig;
document.body.appendChild(afbeelding);
}
Je houdt dan gewoon een array van tien kaarten maar de volgorde van de kaarten is telkens anders. Je begint daarna gewoon met de eerste drie kaarten te tonen (0,1 en 2) en bij een mouse over tel je door naar 3, 4, 5 enz. na 9 begin je weer bij 0.
Gewijzigd op 20/05/2018 01:26:32 door Frank Nietbelangrijk
Gewijzigd op 20/05/2018 09:25:00 door Thomas van den Heuvel
Davier doe op 20/05/2018 00:46:51:
Probeer hiermee verder te puzzelen.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var padnaarjemap = "images/";
for (var i = 0; i < 3; i++) {
var willekeurig = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = padnaarjemap + willekeurig;
document.body.appendChild(afbeelding);
}
var padnaarjemap = "images/";
for (var i = 0; i < 3; i++) {
var willekeurig = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = padnaarjemap + willekeurig;
document.body.appendChild(afbeelding);
}
Het werkt inderdaad!
Om de nummers verschillend te maken moet ik volgens mij iets met do en while doen, ik weet alleen niet hoe ik er voor zorg dat het laatste getal wordt bewaard zodat het vergelijken kan worden met het nieuwe getal.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="loadimages" onload="loadImages()"></div>
<script>
// Hover: afbeeldingen mogen niet achter elkaar voor komen.
// Onload: afbeeldingen mag niet al in de andere 2 afbeeldingen weergeven zijn.
function loadImages() {
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var root = "images/";
for (var i = 0; i < 3; i++) {
do {
var currentImage = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = root + currentImage;
document.documentGetElementById("loadimages").appendChild(afbeelding);
console.log(currentImage);
// lastImage ?
} while (lastImage===currentImage)
}
}
</script>
Dit werkt nog niet (while (lastImage===currentImage) )
Ik ben geen kaartspel aan het maken :) het idee komt wel een beetje overeen. @thomas de 'regels' die je opnoemt gelden inderdaad voor m'n afbeeldingen.
Gewijzigd op 20/05/2018 10:11:47 door FDance Hero
Je kunt het ook proberen met de functie van Frank of anders simpel:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var padnaarjemap = "images/";
var imgNumbers = [];
for (var i = 0; i < 3; i++) {
do {
var willekeurig = Math.floor(Math.random() * afbeeldingenArray.length);
} while (controle());
var afbeelding = new Image();
afbeelding.src = padnaarjemap + afbeeldingenArray[willekeurig];
document.body.appendChild(afbeelding);
imgNumbers.push(willekeurig);
}
function controle() {
for (var i = 0; i < imgNumbers.length; i++) {
if (imgNumbers[i] === willekeurig) {
return true;
}
}
return false;
}
var padnaarjemap = "images/";
var imgNumbers = [];
for (var i = 0; i < 3; i++) {
do {
var willekeurig = Math.floor(Math.random() * afbeeldingenArray.length);
} while (controle());
var afbeelding = new Image();
afbeelding.src = padnaarjemap + afbeeldingenArray[willekeurig];
document.body.appendChild(afbeelding);
imgNumbers.push(willekeurig);
}
function controle() {
for (var i = 0; i < imgNumbers.length; i++) {
if (imgNumbers[i] === willekeurig) {
return true;
}
}
return false;
}
Nu is het aan jou om mouseover te schrijven.
Gewijzigd op 20/05/2018 14:11:50 door Davier doe
Code (php)
1
2
3
4
5
6
2
3
4
5
6
for (var i = 0; i < imgNumbers.length; i++) {
if (imgNumbers[i] === willekeurig) {
return true;
}
}
return false;
if (imgNumbers[i] === willekeurig) {
return true;
}
}
return false;
Mogelijk te verkorten tot:
Code (php)
1
return imgNumbers.indexOf(willekeurig) > -1;
De vraag is dan zelfs of je hier een aparte functie voor zou moeten gebruiken (het past per slot van rekening op één regel), je zou dat ook rechtstreeks in de while() kunnen opnemen (zonder de return uiteraard).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var afbeeldingenArray = ['01.png', '02.png', '03.png', '04.png', '05.png', '06.png', '07.png', '08.png', '09.png', '10.png'];
var root = "http://web-stars.nl/character";
var imgNumbers = [];
for (var i = 0; i < 3; i++) {
do {
var random = Math.floor(Math.random() * afbeeldingenArray.length);
} while (imgNumbers.indexOf(random) > -1);
var image = document.createElement("IMG");
image.setAttribute("src", root + afbeeldingenArray[random]);
image.setAttribute("width", "20%");
image.setAttribute("height", "auto");
document.getElementById("loadimages").appendChild(image);
imgNumbers.push(random);
}
var root = "http://web-stars.nl/character";
var imgNumbers = [];
for (var i = 0; i < 3; i++) {
do {
var random = Math.floor(Math.random() * afbeeldingenArray.length);
} while (imgNumbers.indexOf(random) > -1);
var image = document.createElement("IMG");
image.setAttribute("src", root + afbeeldingenArray[random]);
image.setAttribute("width", "20%");
image.setAttribute("height", "auto");
document.getElementById("loadimages").appendChild(image);
imgNumbers.push(random);
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
var afbeeldingenArray = [
<?php
$path = "images/";
$files = scandir($path);
$extensions = array("jpg", "jpeg", "png", "gif");
foreach ( $files as $image ) {
$imageFileType = strtolower( pathinfo( $image, PATHINFO_EXTENSION ) );
if( in_array( $imageFileType , $extensions ) ) {
echo "'" . $image . "',";
}
}
?>
];
<?php
$path = "images/";
$files = scandir($path);
$extensions = array("jpg", "jpeg", "png", "gif");
foreach ( $files as $image ) {
$imageFileType = strtolower( pathinfo( $image, PATHINFO_EXTENSION ) );
if( in_array( $imageFileType , $extensions ) ) {
echo "'" . $image . "',";
}
}
?>
];