the background tag

Adam H-W · April 29th, 2004, 04:52 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

Snib · April 29th, 2004, 08:16 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

<><

Adam H-W · April 29th, 2004, 08:38 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

Snib · April 29th, 2004, 08:58 AM

I really didn't explain myself....

Try this for function choosePic():

Code:

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

<><

Adam H-W · April 29th, 2004, 09:09 AM

thanks Snib, but it still don't seem to work:

http://80.82.139.249/st-sar/header2.asp

any further suggestions?

Adam

harpua · April 30th, 2004, 09:05 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>"

%>

Adam H-W · April 30th, 2004, 09:20 AM

might be an idea, thanks alot

Imar · May 3rd, 2004, 03:18 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:

Code:

<!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?