Essentially, it requires four things:<html>
<head>
<title>Rune Generator</title>
<script type="text/javascript">
// Where are the rune images located in relation to the script? e.g. 'images/runes/'
// '/' simply means the same folder as the script (always include a '/' at the end)
var runeFolder = "/";
// What is the 'id' of the image?
var runeID = "myRune";
// How many runes are there?
var runeNumber = 25;
// What type of images are the runes?
var runeSuffix = ".jpg";
function runeGenerator ()
{
// Make sure the browser can handle the script
if (document.getElementById)
{
// Generate a random number between 0 and 1
var imageNumber = Math.random();
// Multiply the random number by the number of runes
imageNumber = imageNumber * runeNumber;
// Round the image number to the nearest integer
imageNumber = Math.round(imageNumber);
// Update the rune image 'src' attribute
document.getElementById(runeID).setAttribute("src",runeFolder+imageNumber+runeSuffix);
}
else
{
// If the browser cannot execute the script, output a message
alert("Sorry, but your browser does not support the rune generator script.");
}
}
</script>
</head>
<body>
<!-- Just a heading -->
<h1>Rune Generator</h1>
<!-- The image -->
<img alt="My Rune" id="myRune" src="1.jpg" />
<!-- The button -->
<button onclick="runeGenerator()">Generate a Rune</button>
</body>
</html>