changing td background images using javascript

Dev Articles Community Forums Sponsor:

February 14th, 2003, 06:21 AM

pnb1000

Junior Member

Join Date: Feb 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

changing td background images using javascript

Hi everyone -

I have been trying to change the background images in td cells using javascipt but with no success so far.

Is this actually possible?

Any help or knowledge on this would be appreciated.

Best wishes -

Philbert
javascript:smilie('

')

One example of the many bits of code I have tried is:

<script language="JavaScript">

</script>

<table>
<tr>
<td name="thanks" background="images/blue.gif"><h1>Hello</h1></td>
<td><p>Let's try <a href="#" onclick="changeBGImage('red'); return false">changing the cell background image</a></p></td>
</tr>
</table>

February 16th, 2003, 08:50 PM

Nigorr

Contributing User

Join Date: Apr 2002

Location: Brisbane, Australia

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 8

Use Stylesheets. aka CSS

example

Code:

<html>
  <head>
    <style>
      #Good {
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url(images/image40.gif);
      }
    </style>
    <script>
      <!--
      function changeImage() {
        newImage = "url(images/image41.gif)";
        document.getElementById('Good').style.backgroundIm  age = newImage;
      }
      //-->
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td id="Good"><br>Hopefully there is a nice picture behind me :P</td>
      </tr>
      <tr>
        <td><button onClick="changeImage()">Click Me</button><td>
    </table>
  </body>
</html>

Working Example Here

Hope this helps you out.

February 18th, 2003, 06:24 AM

pnb1000

Junior Member

Join Date: Feb 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks very much nigorr

much appreciated

August 9th, 2004, 11:25 AM

urza

Registered User

Join Date: Aug 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

I tried to take this a step further.

I wanted to modify the javascript part of the CSS version so I could have multiple images but it keeps returning an invalid arguement on...

document.getElementById('change').style.background Image = newImage;

Any help?

The javascript looks like this...

<script>
</script>

Links look like...

<a href="javascript:changeImage(0);">bg1</a>
<a href="javascript:changeImage(1);">bg2</a>

Sidenote, I did change the td id to "change"

October 3rd, 2004, 10:46 AM

hollerz

Registered User

Join Date: Oct 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Did you get the multiple images one to work? I've also been trying with no luck!

October 12th, 2004, 06:12 PM

CodeLikeMar

Registered User

Join Date: Oct 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Quote:

Originally Posted by hollerz

Did you get the multiple images one to work? I've also been trying with no luck!

try this...

function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
function loadImage(){
var imgs = new Array
(
"1.jpg", "2.jpg", "3.jpg"
);

var ic = imgs.length; // Number of alternative images
var choice = pickRandom(ic);
newImage = "url(../images/home/" + imgs[choice] + ")";

if (document.getElementById)
{
document.getElementById('main_pict').style.backgro undImage = newImage;
}
else if (document.all)
{
document.all('main_pict').style.backgroundImage = newImage;
}
else if (document.layers)
{
document.layers('main_pict').style.backgroundImage = newImage;
}

}

onLoad="loadImage();

January 17th, 2005, 09:37 AM

Thathom

Registered User

Join Date: Jan 2005

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Setting Background Image Properly

Hello,
I think your problem is with how your setting the background Image.
Stupidly, you have to include the url( ) part like css.

Try doing this.

blar.style.backgroundImage="url('"+your_image+"')";

Hope that works

April 11th, 2005, 06:04 PM

Vikholm

Registered User

Join Date: Apr 2005

Location: Sweden

Posts: 1

Time spent in forums: 23 m 19 sec
Reputation Power: 0

Quote:

Originally Posted by Nigorr

Use Stylesheets. aka CSS

example

Code:

  <html>
    <head>
      <style>
        #Good {
          background-repeat: no-repeat;
          background-position: center center;
          background-image: url(images/image40.gif);
        }
      </style>
      <script>
        <!--
        function changeImage() {
          newImage = "url(images/image41.gif)";
          document.getElementById('Good').style.backgroundIm  age = newImage;
        }
        //-->
      </script>
    </head>
    <body>
      <table>
        <tr>
          <td id="Good"><br>Hopefully there is a nice picture behind me :P</td>
        </tr>
        <tr>
          <td><button onClick="changeImage()">Click Me</button><td>
      </table>
    </body>
  </html>

Working Example Here

Hope this helps you out.

I have 1 problem with this, and that the "Click Me" thing.
Can you do this without having to click on a link?

I'm working on a website for my brothers company, and he wants a small image in the bottom right corner.
And he want's it to change when you go to another section of the website.

This is pretty simple, just put a different pic in the cells of each page.
But to spice it up I'm trying to get it to randomize a picture on every load.

I tried the code you wrote and it worked, buu i want it to change when you load the page.

I'm terrible at coding advanced stuff, HTML and a smaller amount of PHP is OK, but JS is out of my league.
If anyone has any tips on how this could be done, please reply =)

Thanks.
Vikholm

March 12th, 2009, 02:16 PM

tridogg

Registered User

Join Date: Mar 2009

Posts: 1

Time spent in forums: 13 m 45 sec
Reputation Power: 0

Change td background image upon loading

Hi,

Here's what I did to have the page generate a random image for the "td" background using the code found in this thread...

Code:

<style type="text/css">
.main_body{
	background-repeat:no-repeat; 
	background-image:url(default_image.jpg);
	// The above background image should be a plain image the same color as your page background	
}
</style>


<script type="text/javascript">
function LoadImage(){
	var images=new Array();
	images[0]=["image_1.jpg"];
	images[1]=["image_2.jpg"];
	images[2]=["image_3.jpg"];
	// Following code generates a random number
	var now = new Date();
	var ry = now.getSeconds() % images.length;
	newImage = images[ry][0];
    document.getElementById('main_body').style.backgro  undImage = "url(" + newImage + ")";	
}
</script>


<body onload="javascript:LoadImage();">
.
.
.
<TD width="749" height="536" class="main_body" id="main_body">

#10

April 16th, 2009, 04:12 PM

taco

Registered User

Join Date: Apr 2009

Posts: 1

Time spent in forums: 21 m 55 sec
Reputation Power: 0

I am trying to change as well with no luck

the page sourche is here:
--------------------------------------

<HEAD>

<style>
#Good {
background-repeat: no-repeat;
background-position: center center;
background-image: url(tamir_wed.jpg);
}
</style>

<SCRIPT LANGUAGE="JavaScript">
// Set speed (milliseconds)
var speed = 3000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

<?php include "dirpics.php"; ?>

// do not edit anything below this line

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.getElementById)
{
document.getElementById('Good').style.backgroundIm age = Pic[j];
}
else if (document.all)
{
document.all('Good').style.backgroundImage = Pic[j];
}
else if (document.layers)
{
document.layers('Good').style.backgroundImage = Pic[j];
}
document.getElementById('picn').innerHTML = j;
document.getElementById('picln').innerHTML = p;
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)

}
// End -->
</script>

</HEAD>

<body dir="rtl" onload="javascript:runBGSlideShow()">
<center>
<font size="5"><b>OUR WEDDING March 2009</b></font><br>
<p>PICTURE No.<b id='picn'>0</b> form <b id='picln'>0</p>
<br>
<font size=5>
<table border=1 width="500">
<tr><td id="Good">hello<br><br><br><br><br></td></tr>

</table>
</font>

</center>

--------------------------------
the page is running on: ht tp weddin g.tamir.co.il/in dex3.php
why dosent it work for me ?????
:-(

Doron

Viewing: Dev Articles Community Forums > Programming > JavaScript Development > changing td background images using javascript

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Create the Optimal Architecture for your Critical Applications
Warburton's the largest independently owned bakery in the UK faced a number of difficult challenges in providing the most robust yet efficient IT infrastructure for their organization's success. IBM's services combined with their xSeries servers created the perfect platform for their SAP environment with sufficient flexibility, and did so in very time effective fashion.
Request Your Free Technology Downloads!

Five Best Practices for Deploying a Successful Service-Oriented Architecture
This white paper describes the benefits you can expect with SOA, and how IBM can help take your business there.
Request Your Free Technology Downloads!

Gartner Magic Quadrant for Application Delivery Controllers
Gartner summarizes its view on Application Delivery Controllers, evaluates strengths and weaknesses of solutions, and provides Magic Quadrant reporting for a quick comparison across all vendors. Learn from Gartner how you can benefit from an all-in-one device like Citrix NetScaler that delivers the highest levels of availability, performance and security.
Request Your Free Technology Downloads!

Knowledge is Power
What you don't know can hurt you, and is likely costing you money and increasing your security risks during an era of scarce resources. This white paper proposes six key strategies that enterprise security managers can use to improve their network defense posture.
Request Your Free Technology Downloads!

Rationalizing the Multi-Tool Environment
The rationalized multi-tool approach is flexible, scalable and cost effective. It provides the necessary input to the IT service management business processes. It preserves prior investments in monitoring tools, empowers technologists to select the best tools with which to do their jobs, and enhances effective response to incidents.
Request Your Free Technology Downloads!

More Free IT White Papers!