?
Solved

Layers

Posted on 2006-05-10
5
Medium Priority
?
165 Views
Last Modified: 2010-04-09
I want to put a graphic named cr.gif that resides in the folder "images" in a layer that will be always placed in the center and the middle of a particular table.

How does the code look for this?
The graphic path is "/images/cr.gif".

Any help would be appreciated,
Thanks Phil
0
Comment
Question by:smphil
  • 2
  • 2
5 Comments
 
LVL 5

Expert Comment

by:arunrs
ID: 16657135
How would you want your image to be displayed
1. as a cell in the table( which is in the center)
2. as a background for the table

Do you want to use a separate layer object?

Can you please ellaborate?

arunrs
0
 
LVL 1

Author Comment

by:smphil
ID: 16663649
arunrs

As a cell which should be centered
0
 
LVL 1

Author Comment

by:smphil
ID: 16663666
OH YES AND A SEPate LAYER
0
 
LVL 5

Accepted Solution

by:
arunrs earned 2000 total points
ID: 16665871
Is your table a dynamic table or is it a static table.

If it is a static table just identify the center cell and add the

"<td><img  src="images/cr.gif"> </img></td>"

Otherwise if it is a dynamic table get the total number of rows using the loop and the total number of columns and then get the center cell and then add this img tag to the cell.

Call the following function in your body onload event.

function PlaceImage()
{
        var oTable = document.getElementById("table1");
      var rowLength = oTable.rows.length;
      var rowNo = Math.ceil(rowLength / 2);
      var oCol = oTable.rows[rowNo - 1].getElementsByTagName("td");

      var colLength = Math.ceil(oCol.length / 2);
      oCol[colLength - 1].innerHTML = "<img src='images/cr.gif'></img>"
}

This function will identify the center cell of the table and place the image in the cell.
Note: set the id attribute of the table to whatever you specify in the line 1 of the function ("table1" here).


Hope this is useful.

arunrs
0

Featured Post

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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

809 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