random runes

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
I wondering if someone could help me out with a simple html (or whatever) code that will randomly display one of 25 imaged when you press a button, perhaps just a simple box with a button labeled 'generate rune' underneath it that will make one of the 25 images to appear in the box? :worthy:
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi Maljonic

I had written instructions on how this all worked, but sadly the forum error has wiped my post :( Essentially, it requires four things:

  • All your rune images be renamed as numbers - starting at 0 - with the same file type (e.g. 0.jpg, 1.jpg, 2.jpg etc.).
  • That you add the contents of the <script></script> tag to your page.
  • That you add the <img /> tag to your page (with an 'id' attribute).
  • That you add the <button></button> tag to your page (with the 'onclick' attribute).
The source of a sample page is below. Just copy and paste it into a new Notepad document and save it with a .html extention, then ipen that file in your browser. The script can be customised by altering the four variables at the top of the script.

Code:
<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>
You code tidy up the code even further, but hopefully the comments and layour help explain what's going on.

Hope it all works
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
Thank you, I haven't actually made the images yet so I'll get back to you if I have any problems. :) :clap:
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi Maljonic

Glad it's working :) The script is nothing too special, I guess it could be improved, but at least it's a starting point for you. Keep up the good work!

Kind Regards
 

Users who are viewing this thread

Top Bottom