PDA

View Full Version : How to Randomly Rotate a JPG in Table??

MaleModeling
11-04-2002, 02:49 PM
Hello,

I am relatively new to this, and have a situation that I am not sure how to handle elegantly. I have a modeling website with a nice logo page on my Index.html with a graphic on it, that I have multiple versions of, each laid out the same, with hotspots in two places for entry into the system, one for English Language and one for German Language. Both are using hotspots.

I want to rotate the multiple graphics when the user comes onto the site, and/or refreshes the Index.html page. This will present them with different models each time they enter the site...

The graphics are JPG, and look really great, but I currently have to hardcode the graphics into the page.

There is a way to write a Javascript bit of code that will autogenerate a random number, say, between 1 and 4, and that will allow me to put the graphic name into the call to the image, I think.

Here is the part of code that I think I did right, but am not sure:

------------------------------------------START CODE

<script language="JavaScript">

var randomnumber=Math.floor(Math.random()*4)
var mainimage="models/MainPageLogo"+randomnumber+".jpg"

</script>

</head>

<div align="center"><center>

<table border="3" cellspacing="10" cellpadding="5">
<tr>
<td valign="middle" align="center" width="612"><map name="FPMap0">
<area href="mmd_frame.htm" shape="rect" coords="587, 452, 683, 487">
<area href="mme_frame.htm" shape="rect" coords="482, 454, 571, 489">
<area href="mmd_frame.htm" shape="rect" coords="410, 545, 509, 575">
<area href="mme_frame.htm" shape="rect" coords="308, 545, 394, 577">
</map><img rectangle="(308,545) (394, 577) mme_frame.htm" rectangle="(308,545) (394, 577) mme_frame.htm" src="models/MainPageLogo1.jpg" border="0" usemap="#FPMap0" width="700" height="500"></td>
</tr>
</table>
</center></div>

--------------------------------------------------- END CODE

Where it says src="models.../MainPageLogo1.jpg" what must I do so that it randomly changes???? If I put the name of the variable in there it gives me a missing file... and no one can get onto the site....

If you can help, I would be very grateful...

Thanks!!!

Antonio Rodriguez
Photographer
http://www.MaleModeling.Net
http://www.AntonioRodriguez.Com
valeria_vi
11-04-2002, 03:54 PM
Hi Antonio and welcome to the forums! :thumbsup:
an imortant element that's currently missing from your <img> tag is name="..." - without it js will not know where to place your random image.
it seems like all you images are named MainPageLogo1.jpg, MainPageLogo2.jpg, MainPageLogo3.jpg etc, so if that is corret, here's what you'd have to do:
1. add name attribute to the image tag. in my code below, i assumed that you had given it a name of "logo", but you can name it anything you want and change the code i gave you respectively.
2. when the page loads, place an transparent gif image in where your logo is supposed to go (take a 1x1 transparent gif" and give it teh dimentions your logo images have.
3. at the end of your page, add this:

<script language="javascript"><!--
var random = Math.round(3*Math.random()) + 1 //this will generate a random number between 1 and 4
document.images["logo"].src = "models/MainPageLogo" + random + ".jpg" //or whatever the correct path to your image is
//-->
</script>


HTH
MaleModeling
11-04-2002, 04:47 PM
I must be doing something wrong...

here is the code, what is wrong? I tried to input the info as you said.. the 1x1 file is called clearpixel.gif, and is in the images/ directory.

the cover images are in the model/ directory.


code
------------------------------------------------
<html>

<head>

<meta http-equiv="Content-Language" content="de">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Male Modeling - Deutschland / Germany</title>

<script language="JavaScript">

var random = Math.round(3*Math.random()) + 1 //this will generate a random number between 1 and 4

document.images["logo"].src = "models/MainPageLogo" + random + ".jpg" //or whatever the correct path to your image is

</script>

</head>

<div align="center"><center>

<table border="3" cellspacing="10" cellpadding="5">

<tr>

<td valign="middle" align="center" width="612"><map name="FPMap0">

<area href="mmd_frame.htm" shape="rect" coords="587, 452, 683, 487">

<area href="mme_frame.htm" shape="rect" coords="482, 454, 571, 489">

<area href="mmd_frame.htm" shape="rect" coords="410, 545, 509, 575">

<area href="mme_frame.htm" shape="rect" coords="308, 545, 394, 577">

</map><img rectangle="(308,545) (394, 577) mme_frame.htm" rectangle="(308,545) (394, 577) mme_frame.htm" name="logo" src="images/clearpixel.gif" border="0" usemap="#FPMap0" width="700" height="500"></td>

</tr>

</table>

</center></div>

</html>

-----------------------------------------------------------end code


Thanks a million,

Antonio Rodriguez

the error code is currently online at http://www.MaleModeling.Net if you want to see it.
valeria_vi
11-04-2002, 04:51 PM
Antonio,
you are missing <body> and </body> tags.
try
<html>

<head>

<meta http-equiv="Content-Language" content="de">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Male Modeling - Deutschland / Germany</title>

</head>

<body>
<div align="center"><center>

<table border="3" cellspacing="10" cellpadding="5">

<tr>

<td valign="middle" align="center" width="612"><map name="FPMap0">

<area href="mmd_frame.htm" shape="rect" coords="587, 452, 683, 487">

<area href="mme_frame.htm" shape="rect" coords="482, 454, 571, 489">

<area href="mmd_frame.htm" shape="rect" coords="410, 545, 509, 575">

<area href="mme_frame.htm" shape="rect" coords="308, 545, 394, 577">

</map><img rectangle="(308,545) (394, 577) mme_frame.htm" rectangle="(308,545) (394, 577) mme_frame.htm" name="logo" src="images/clearpixel.gif" border="0" usemap="#FPMap0" width="700" height="500"></td>

</tr>

</table>

</center></div>

<script language="JavaScript">

var random = Math.round(3*Math.random()) + 1 //this will generate a random number between 1 and 4

document.images["logo"].src = "models/MainPageLogo" + random + ".jpg" //or whatever the correct path to your image is

</script>


</body>
</html>


did it work?
MaleModeling
11-04-2002, 10:20 PM
That did the trick, it worked like a charm... I put the javascript in the wrong place...

Thanks so much for your help!
The front page is up and running now!

Antonio