|
Subject:
|
the background tag
|
|
Posted By:
|
Adam H-W
|
Post Date:
|
4/29/2004 4:52:50 AM
|
Hi there
I'm wanting to use a variable image (using javascript) on my page; however, I want to make it a variable background image using the background tag - I don't seem to be able to attach a name attribute to define the background so that the script picks it up.
<td width="874" height="113" valign="top" background="image_bin/spacer.gif">
I need a name attribute on this i.e name="pic" but it's not liking it.
Is there any way I can do this?
thanks
Adam
|
|
Reply By:
|
Snib
|
Reply Date:
|
4/29/2004 8:16:02 AM
|
Use an ID if you want the script to be able to pick it up, then reference it by document.getElementById('your_ID');
HTH,
Snib
<><
|
|
Reply By:
|
Adam H-W
|
Reply Date:
|
4/29/2004 8:38:39 AM
|
Hi Snib
I've tried what you mentioned but it doesnt'want to work; this is my coding:
myPix = new Array("image_bin/lpe_top_banner.jpg","image_bin/topbanner2.jpg","image_bin/topbanner3.jpg","image_bin/topbanner4.jpg")
imgCt = myPix.length
function choosePic() {
if (document.images) {
randomNum = Math.floor((Math.random() * imgCt))
document.pic.src = myPix[randomNum]
document.getElementById('pic');
}
}
</script>
<td width="874" height="113" valign="top" background="image_bin/spacer.gif" id="pic">
thanks
Adam
|
|
Reply By:
|
Snib
|
Reply Date:
|
4/29/2004 8:58:54 AM
|
 I really didn't explain myself....
Try this for function choosePic():
myPix = new Array("image_bin/lpe_top_banner.jpg","image_bin/topbanner2.jpg","image_bin/topbanner3.jpg","image_bin/topbanner4.jpg");
var numPix = myPix.length;
function choosePic()
{
var picture = document.getElementById('pic');
var rand = Math.floor(Math.random() * numPix);
picture.src = myPix[rand];
}
Make sure your image has id='pic' as an attribute.
HTH,
Snib
<><
|
|
Reply By:
|
Adam H-W
|
Reply Date:
|
4/29/2004 9:09:35 AM
|
thanks Snib, but it still don't seem to work:
http://80.82.139.249/st-sar/header2.asp
any further suggestions?
Adam
|
|
Reply By:
|
harpua
|
Reply Date:
|
4/30/2004 9:05:12 AM
|
if you did it in asp you could use this
<%
Dim bgImage(6)
Dim intbgImage_01
bgImage(0) = "bgImage_0.jpg"
bgImage(1) = "bgImage_1.jpg"
bgImage(2) = "bgImage_2.jpg"
bgImage(3) = "bgImage_3.jpg"
bgImage(4) = "bgImage_4.jpg"
bgImage(5) = "bgImage_5.jpg"
RANDOMIZE
intbgImage_01 = Int(6 * Rnd)
Response.Write bgImage(intbgImage_01) & "---image Name<BR>"
%>
|
|
Reply By:
|
Adam H-W
|
Reply Date:
|
4/30/2004 9:20:15 AM
|
might be an idea, thanks alot
|
|
Reply By:
|
Imar
|
Reply Date:
|
5/3/2004 3:18:28 AM
|
Hi Adam,
Using ASP is one way to do it, but there is a client side / JavaScript / DHTML solution as well. Instead of trying to get at the image directly, try to get at its parent. The background image is really a property of the table cell you're trying to change. So, you can use JavaScript to get a reference to the <td> element, and then use its CSS style.backgroundImage (note that CSS uses background-image) to change the image. Below you'll find a working example; copy it to a new document and then just click the button to see the image change:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Change Background</title>
<script type="text/javascript">
function ChangeBackground()
{
document.getElementById('myTableCell').style.backgroundImage =
'URL(/Images/Image2.gif)';
}
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td id="myTableCell" background="/Images/Image1.gif">
I am a cell with a background image<br />
<br />
If you click the button, my background will change.
</td>
</tr>
</table>
<form id="frmTest" name="frmTest" action="" method="get">
<input type="button" id="btnDo"
name="btnDo" onclick="ChangeBackground()"
value="Click to change Backgound" />
</form>
</body>
</html>If you go this route, you should also change the deprecated background property of the <td> element to newer css style="background-image=..." syntax.
HtH,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Dissolved Girl by Massive Attack (Track 6 from the album: Mezzanine) What's This?
|
