JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old February 14th, 2003, 07:21 AM
pnb1000 pnb1000 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2003
Posts: 2 pnb1000 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Arrow 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">
<!--
function changeBGImage(whichImage){
if (document.thanks){
document.thanks.background = 'images/' + whichImage +'.gif';
}
}

//-->
</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>

Reply With Quote
  #2  
Old February 16th, 2003, 09:50 PM
Nigorr Nigorr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2002
Location: Brisbane, Australia
Posts: 78 Nigorr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
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.

Reply With Quote
  #3  
Old February 18th, 2003, 07:24 AM
pnb1000 pnb1000 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2003
Posts: 2 pnb1000 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Thanks very much nigorr

much appreciated

Reply With Quote
  #4  
Old August 9th, 2004, 12:25 PM
urza urza is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2004
Posts: 1 urza User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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><!--
var theImages = new Array()

theImages[0] = 'url(portrait1.jpg)'
theImages[1] = 'url(portrait2.jpg)'

function changeImage(changer) {
newImage = theImages[changer];

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

//-->
</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"

Reply With Quote
  #5  
Old October 3rd, 2004, 11:46 AM
hollerz hollerz is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Oct 2004
Posts: 1 hollerz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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!

Reply With Quote
  #6  
Old October 12th, 2004, 07:12 PM
CodeLikeMar CodeLikeMar is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Oct 2004
Posts: 1 CodeLikeMar User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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();

Reply With Quote
  #7  
Old January 17th, 2005, 10:37 AM
Thathom Thathom is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Posts: 1 Thathom User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
  #8  
Old April 11th, 2005, 07:04 PM
Vikholm Vikholm is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2005
Location: Sweden
Posts: 1 Vikholm User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 23 m 19 sec
Reputation Power: 0
Send a message via MSN to Vikholm
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

Reply With Quote
  #9  
Old March 12th, 2009, 03:16 PM
tridogg tridogg is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Mar 2009
Posts: 1 tridogg User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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">

Reply With Quote
  #10  
Old April 16th, 2009, 05:12 PM
taco taco is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2009
Posts: 1 taco User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > changing td background images using javascript


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
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

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap