Solved

ASP.NET - Change Background Images of an HTML Table With an Auto Interval

Posted on 2013-12-03
10
588 Views
Last Modified: 2014-01-09
Hi There,

I have an HTML table in an ASPX page.

I want to have the background image of this table to automatically change with an assigned interval.

What is the best way?

Thank you,
0
Comment
Question by:feesu
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 167 total points
ID: 39691987
Check this page :
http://devfiles.myopera.com/articles/621/elementclassnames.html
https://developer.mozilla.org/fr/docs/DOM/window.setInterval
https://developer.mozilla.org/fr/docs/DOM/window.onload

So :
1 - Create a class for each background
2 - using setInterval change the class using a counter
3 - if the counter if greater than the max number of class, reset it to 0

Javascript :
var cnt = 0;
var max = 10; // 10 class 0 to 9
window.onload = function() {
  setInterval(function() {
       var element = document.getElementById('tableID');
       element.className = "backgroundImage" + cnt;
       cnt++;
       if(cnt>=max) cnt = 0;
  }, 1000);
}

Open in new window

CSS :
backgroundImage0 {
    background-image: url(/path/to/image100.JPG);
}
backgroundImage1 {
    background-image: url(/path/to/image114.JPG);
}
...
backgroundImage9 {
    background-image: url(/path/to/image424.JPG);
}

Open in new window

0
 

Author Comment

by:feesu
ID: 39692022
Tell me please, why do I need to create the CSS for each?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39692049
this is the CSS part of my previous answer. I only show three...
0
 

Author Comment

by:feesu
ID: 39692142
I understood that. But I am asking why do we need to create a CSS, why not embed variables directly into the javascript function?

Another question, what is the best way to do this in terms of objects, a div, a table td etc..?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 333 total points
ID: 39692296
Well My knowledge and working with dynamic content says that Answer given by leakim971 is the good way rather then directly assigning Image paths from JavaScript.

What it makes difference?
Okay, As the images are part of css all images will be fetched at once and while changing class name through JavaScript won't require loading time of image from server.
Where as in case of directly assigning values, It will load the image at the time when you will assign the path.

Always best practices depends on your requirement.
1) If you are not going to have change in your design you would like to take it as string (which is as HTML)

2) if may have often change for design from client and you don't want to do change in HTML(which as string) in such case you will like to create one template for that and load it dynamically.
0
 

Author Comment

by:feesu
ID: 39693644
Thanks for the elaboration. But what is the difference between loading the picture in an HTML table or a div? or maybe some other element? How do I make what is the best choice?
0
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 333 total points
ID: 39694591
Well, working with div instead of Table ( for structured layout) is bit of difficult ASFA developer's are concerned.

But if you are looking for performance, Div is faster then table while DOM is rendering.

Even for data transmission div structure will have less amount of characters required for creating element then in case of table.

My experience says people in India are used to with Table structure because of productivity whereas people from European, USA and other countries are used with Div structure.
0
 

Author Comment

by:feesu
ID: 39694845
Thank you for writing back.

I have done that, and it works fine, except for the fact that I need the images to fade in/out so that they look a bit better! Any tips?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39767762
I've requested that this question be closed as follows:

Accepted answer: 250 points for leakim971's comment #a39691987
Assisted answer: 250 points for ItWorked's comment #a39692296

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now