Posted on 2006-05-10
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
Question by:smphil
    LVL 5

    Expert Comment

    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?

    LVL 23

    Expert Comment

    LVL 1

    Author Comment


    As a cell which should be centered
    LVL 1

    Author Comment

    LVL 5

    Accepted Solution

    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.


    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    729 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

    19 Experts available now in Live!

    Get 1:1 Help Now