Solved

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

Posted on 2013-12-03
10
631 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Expert Comment

by:Rob
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

636 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