Random plaatjes
Er zijn echter 2 dingen die ik nog niet voor elkaar krijg:
(1) bordercolorlight en bordercolordark kan ik niet instellen. de border is nu zwart.
(2) er kunnen nu 2 dezelfde plaatjes op het scherm komen. eigenlijk moet plaatje 2 nooit hetzelfde zijn als plaatje 1.
<head>
<script type="text/javascript">
Amount = 4;
One = '<img src="';
Two = '.jpg" style="height: 220px; width:150px;" border=2>';
function printImage1() {
var r = Math.ceil(Math.random() *Amount);
document.write(One + r + Two);
}
function printImage2() {
var r = Math.ceil(Math.random() *Amount);
document.write(One + r + Two);
}
</script>
</head>
<body>
<script type="text/javascript"><!--
printImage1();
//--></script>
<br><br>
<script type="text/javascript"><!--
printImage2();
//--></script>
</body>
Zie hieronder voor het scriptje
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
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
<html>
<head>
<script type='text/javascript'>
var amount = 4;
var one = 0;
var two = 0;
function printImages () {
while (one == 0) {
one = Math.ceil(Math.random() * amount);
}
while (two == 0 || two == one) {
two = Math.ceil(Math.random() * amount);
}
document.getElementById('img1').src = one + '.jpg';
document.getElementById('img2').src = two + '.jpg';
}
</script>
<style type='text/css'>
img#img1, img#img2 {
border-style: solid;
border-width: 1px;
border-color: #cccccc;
heigth: 220px;
width: 150px;
}
</style>
</head>
<body onload="printImages()">
<img id='img1'>
<img id='img2'>
</body>
</html>
?>
<html>
<head>
<script type='text/javascript'>
var amount = 4;
var one = 0;
var two = 0;
function printImages () {
while (one == 0) {
one = Math.ceil(Math.random() * amount);
}
while (two == 0 || two == one) {
two = Math.ceil(Math.random() * amount);
}
document.getElementById('img1').src = one + '.jpg';
document.getElementById('img2').src = two + '.jpg';
}
</script>
<style type='text/css'>
img#img1, img#img2 {
border-style: solid;
border-width: 1px;
border-color: #cccccc;
heigth: 220px;
width: 150px;
}
</style>
</head>
<body onload="printImages()">
<img id='img1'>
<img id='img2'>
</body>
</html>
?>
Gewijzigd op 01/01/1970 01:00:00 door Rens nvt
Persoonlijk zou ik dit met php doen, aangezien hier niet per sé javascript voor nodig is. En bezoekers waar javascript uitgeschakeld staat dus ook gewoon willekeurige plaatjes zien
<img id='img1' height=220 width=150>
Het is alleen jammer dat javascript niet met php 'communiceert' anders had ik het plaatje direct kunnen koppelen aan de variabele en zo een link maken met dat id. Tenzij je natuurlijk weer een link kunt maken in javascript en een idnummer mee kan geven.
Zou dat - hardop denkend - op deze manier kunnen in javascript?
<a href="message.php?id=' . $_GET['one'] . '"><img id='img1'></a>
<a href="message.php?id=' . $_GET['two'] . '"><img id='img2'></a>
jah, dat kan wel als het goed is.