Solved

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

Posted on 2013-12-03
10
601 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 

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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.NET MVC identity 6 26
Winform Module - What is the ASP.Net equiv 2 20
replace link with jQuery 4 12
Can't get js include to work in html file 8 12
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 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