Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-12-03
10
Medium Priority
?
638 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 668 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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:Hiran Desai
Hiran Desai earned 1332 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:Hiran Desai
Hiran Desai earned 1332 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

722 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