Variable Home Page Image

S

Sue M

Is there a way using FrontPage to have different images appear when visitors
come to the site. Currently the same image comes up everytime you go to the
site. I would like to have different images to appear so the site has a
fresher look. I do not want have a Java Script that shows rotating images
but a different image as the main image on the page.
 
T

Trevor Lawrence

Sue M said:
Is there a way using FrontPage to have different images appear when
visitors
come to the site. Currently the same image comes up everytime you go to
the
site. I would like to have different images to appear so the site has a
fresher look. I do not want have a Java Script that shows rotating images
but a different image as the main image on the page.

You could write a JavaScript function that generates a random number between
1 and the maximum number of images. Then the image with that number is
displayed.

I could write it and post it in a little while
 
T

Trevor Lawrence

Joe Rohn said:
Hi Sue,

Basically you need some type of scripting to do that. It is usually done
with JavaScript and isn't rotating images but rather what is called
"random" images..here's a script for that:

http://javascript.internet.com/miscellaneous/random-image.html

--
Best,
Joe

Expression Web and FrontPage Forums:
http://www.timeforweb.com/frontpage/forum/

FrontPage Extensions Hosting:
http://www.timeforweb.com/frontpage/page_display.asp?pid=30

Joe,
You found a reference to the type of script I was going to write

However I have modified it slightly to write the image into a specific <img>
id

If you want the image as a background, then the last line of the script
should be altered to
document.body.style.backgroundImage="url(" + theImages[whichImage] +")";

<html>
<head>
<script type="text/javascript">
<!-- Begin
function showImage(){
// Set up the image files to be used.
var theImages = new Array( // do not change this

/** To add more image files, continue with the
pattern below, adding to the array,
with a bracket after the last. **/
'images/1.jpg' ,
'images/2.jpg' ,
'images/3.jpg' ,
'images/4.jpg' )

// do not edit anything below this line
var i = 0, p = theImages.length, preBuffer = new Array()
for (i = 0; i < p ; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));
document.images['myImage'].src= theImages[whichImage];
}
// End -->
</script>
</head>
<body onload="showImage();">
<img id="myImage" src=" ">
</body>
</html>
 
S

Sue M

I would really appreciate the help. I am very uncertain of myself when it
comes to this sort of thing.
 
S

Sue M

sharedTrevor, may I impose a little more on you knowledge?

I copied the script you wrote into my page but when I did that the shared
borders (header, footer and side navigation bar) duplicate in the normal area
of the page and the image does not come up. I think I have something wrong.
Here is the entire code on the page.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Sue Matthews </title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="web-ho 0010, default">
<meta name="Microsoft Border" content="tlb, default">
</head>

<body>
<p> </p>
<div align="center">
<center>
</div>
<div align="center">
<table border="0" cellpadding="5" cellspacing="5" width="600" id="table1">
<tr>
<td align="left" width="550"> </td>
</tr>
<tr>

<html>
<head>
<script type="text/javascript">
<!-- Begin
function showImage(){
// Set up the image files to be used.
var theImages = new Array( // do not change this

/** To add more image files, continue with the
pattern below, adding to the array,
with a bracket after the last. **/
'images/scarlet silk, 36x48, sold_small1.jpg' ,
'images/apple branches, 24x24.jpg' ,
'images/seated figure with red shawl- 12x12.jpg' ,
'images/three mizuna chefs, 20x30.jpg' ,
'images/Midwest Winter, 48x48.jpg' ,
'images/hibiscus and oleanders.jpg' ,
'images/mid-summer arrangement.jpg' ,
'images/Dahlias, 30x30.jpg' ,
'images/climbing roses.jpg'
'images/kitchen atmosphere.jpg' )

// do not edit anything below this line
var i = 0, p = theImages.length, preBuffer = new Array()
for (i = 0; i < p ; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));
document.images['myImage'].src= theImages[whichImage];
}
// End -->
</script>
</head>
<body onload="showImage();">
<img id="myImage" src=" ">
</body>
</html>

<td align="left" width="550">
<p align="center"><b><i>"A work of art is the trace of a magnificent
struggle." -Robert Henri</i></b></p>
<p align="left"><b>"For me, great paintings have always embodied a
combination of the spirit of play with clarity of visual
intention.</b></p>
<p align="left"><b>The inspiration behind my work often revolves around
the simple concept of exploring the abstract elements-line, shape,
value,
color, texture, and edges-the basic tools in painting. Any subject
matter is worthy. However, the endless variety of visual dialogue
possible through the arrangement of these elements is what I find to be
most exciting and timeless."<br>

</b>
<b>-Sue</b></td>
</tr>
<tr>
<td align="left" width="550"></td>
</tr>
</table>
</div>


<html>

Thanks for your help, I really appreciate it. I am over my head here.

Sue





Trevor Lawrence said:
Joe Rohn said:
Hi Sue,

Basically you need some type of scripting to do that. It is usually done
with JavaScript and isn't rotating images but rather what is called
"random" images..here's a script for that:

http://javascript.internet.com/miscellaneous/random-image.html

--
Best,
Joe

Expression Web and FrontPage Forums:
http://www.timeforweb.com/frontpage/forum/

FrontPage Extensions Hosting:
http://www.timeforweb.com/frontpage/page_display.asp?pid=30

Joe,
You found a reference to the type of script I was going to write

However I have modified it slightly to write the image into a specific <img>
id

If you want the image as a background, then the last line of the script
should be altered to
document.body.style.backgroundImage="url(" + theImages[whichImage] +")";

<html>
<head>
<script type="text/javascript">
<!-- Begin
function showImage(){
// Set up the image files to be used.
var theImages = new Array( // do not change this

/** To add more image files, continue with the
pattern below, adding to the array,
with a bracket after the last. **/
'images/1.jpg' ,
'images/2.jpg' ,
'images/3.jpg' ,
'images/4.jpg' )

// do not edit anything below this line
var i = 0, p = theImages.length, preBuffer = new Array()
for (i = 0; i < p ; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));
document.images['myImage'].src= theImages[whichImage];
}
// End -->
</script>
</head>
<body onload="showImage();">
<img id="myImage" src=" ">
</body>
</html>
 
T

Trevor Lawrence

Sue,

Well, my knowledge is not great.

However, I think that the problem may be that you copied all of the code
whereas only some of it is needed and it needs to be in the right place.
Sorry about that. I guess I didn't give enough info.

Try the code below

I am not sure where you want to place the random image, so I put it at the
top of the text. If this is not the right place, it can be moved to wherever
you want.

Code follows

<html>
<head>
<title>Sue Matthews </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="web-ho 0010, default">
<meta name="Microsoft Border" content="tlb, default">

<script type="text/javascript">
<!-- Begin
function showImage(){
// Set up the image files to be used.
var theImages = new Array( // do not change this
/** To add more image files, continue with the
pattern below, adding to the array,
with a bracket after the last. **/
'images/scarlet silk, 36x48, sold_small1.jpg' ,
'images/apple branches, 24x24.jpg' ,
'images/seated figure with red shawl- 12x12.jpg' ,
'images/three mizuna chefs, 20x30.jpg' ,
'images/Midwest Winter, 48x48.jpg' ,
'images/hibiscus and oleanders.jpg' ,
'images/mid-summer arrangement.jpg' ,
'images/Dahlias, 30x30.jpg' ,
'images/climbing roses.jpg' ,
'images/kitchen atmosphere.jpg' )
// do not edit anything below this line
var i = 0, p = theImages.length, preBuffer = new Array()
for (i = 0; i < p ; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));
document.images['myImage'].src= theImages[whichImage];
}
// End -->
</script>
</head>

<body onload="showImage();">
<div align="center">
<img id="myImage" src=" ">

<table border="0" cellpadding="5" cellspacing="5" width="600" id="table1">
<tr>
<td align="left" width="550"> </td>
</tr>

<tr>
<td align="left" width="550">
<p align="center"><b><i>"A work of art is the trace of a magnificent
struggle." -Robert Henri</i></b></p>

<p align="left"><b>"For me, great paintings have always embodied a
combination of the spirit of play with clarity of visual
intention.</b></p>

<p align="left"><b>The inspiration behind my work often revolves
around
the simple concept of exploring the abstract elements-line, shape,
value,
color, texture, and edges-the basic tools in painting. Any subject
matter is worthy. However, the endless variety of visual dialogue
possible through the arrangement of these elements is what I find to
be
most exciting and timeless."<br>
-Sue</b></td>
</tr>

<tr>
<td align="left" width="550"></td>
</tr>
</table>
</div>
</body>
</html>


End of code
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top