HTML Help

nash57 · Joined: 04 Mar 2006 Posts: 3

Guys, i've been all over the internet trying scripts out but i just cant get my site to work. i wanna have a random image background for my blog's header and still have the title on it... my blog's template's script is:

Code: <html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

THESE ARE FOR THE HEADER:
td.title {
height: 230px;
width: 700px;
padding: 10px;
background-image: url(http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg);
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;

}

<---! ALL THE OTHER STYLES ARE HERE.... -->

</style>
</head>
<body>

<table width='700' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td></tr>
<tr>
<td class='leftside' width='550' valign='top'>


<--! ALL THE OTHER PARTS ARE HERE.... -->

</body>
</html>

and my pictures are at:
http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg
http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg
http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg

(i have five pictures, named 1.jpg, 2.jpg, and so on...)

Help please please! :cry:

chrisxkelley · Joined: 07 Dec 2004 Posts: 246

are you allowed to use php? asp? javascript? any type of info like that will help

nash57 · Joined: 04 Mar 2006 Posts: 3

basically, only java and html languages :(

chrisxkelley · Joined: 07 Dec 2004 Posts: 246

just a simple javascript will work.

<script type="text/javascript">

</script>

then wherever you want to display a random image
<script>
document.write("<img src=\""+randImg()+"\" alt =\"\" />");
</script>

just fill up that array with images and that should work fine

nash57 · Joined: 04 Mar 2006 Posts: 3

actually, i already tried that script...i got it from this forum. the problem is, my script is using some <td> tags....how do i use the same script but retain the <td> aspect? the random images should come out as a background for a cell table... :(

chrisxkelley · Joined: 07 Dec 2004 Posts: 246

well I didn't get that script from here, I just wrote it... but any way, all you have to do with that script is call the function and it will give you a random image.

so if you want the td to have a background picture

<script>
document.write('<td style="background-image:' + randImg() + ';"></td>');
</script>

wherever you want a random image url to be generated, just stick the content inside <script> tags and use the randImg() function I wrote which will give you a random image.

jriems · Joined: 11 Apr 2006 Posts: 1

chrisxkelley wrote: well I didn't get that script from here, I just wrote it... but any way, all you have to do with that script is call the function and it will give you a random image.

so if you want the td to have a background picture

<script>
document.write('<td style="background-image:' + randImg() + ';"></td>');
</script>

wherever you want a random image url to be generated, just stick the content inside <script> tags and use the randImg() function I wrote which will give you a random image.

I'm trying to get this to work, but I just can't seem to get the background table image to show up. Can you please point me to a page where this script is set up correctly so I can see it in action, and take a look at the source code?

Many thanks!
jriems

jpicot · Joined: 30 May 2006 Posts: 1

Try this solution:

head tag Code:
<script language="JavaScript">
var theImages = new Array() // do not change this
theImages[0] = '100.jpg'
theImages[1] = '200.jpg'
theImages[2] = '300.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="72" background="'+theImages[whichImage]+'"><tr><td>')
}
</script>

in the body:

Code: <script language="JavaScript">
showImage();
</script>

let me know how it works for you...

swami · Posted: Wed May 31, 2006 2:37 am

Hi Nash57, I'm a one hour old newbie at this forum, but you could try this sequence:

Code: [color=brown]

<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

td.title {
height: 230px;
width: 700px;
padding: 10px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;

}

<---! ALL THE OTHER STYLES ARE HERE.... -->

</style>





<script language="JavaScript" type="text/javascript">
</script>



</head>
<body>

<table width='700' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td></tr>
<tr>
<td class='leftside' width='550' valign='top'>


<--! ALL THE OTHER PARTS ARE HERE.... -->

</body>
</html>

[/color]

I have it working here: http://www.oceania-audio.com/personnel/test.htm

Good luck!

Swami :)

http://www.blueskyzen.com

steinson · Joined: 09 Sep 2006 Posts: 1

i used swami's method to write a bg image to a div. it worked great. thanks!

i'd like to make this happen with an onclick event, though.

any suggestions would be appreciated.