SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text over image...

    Is it possible to get some text centered over an image that appears in a table like so:

    <div align="right">
    <table width="80%" height="80%">
    <tr>
    <td valign="middle">
    <center>
    <image src="some_image.jpg">
    </center>
    </td>
    </tr>
    </table>
    </div>
    Using java script / DHTML?
    Thanks
    JC

  2. #2
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to do it would be to set the image as a cell background, and then simply centre the text.

    <style type="text/css">
    td.centered_with_bg {
    text-align: center;
    background-image: url(some_image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    }
    </style>

    <div align="right">
    <table width="80%" height="80%">
    <tr>
    <td class="centered_with_bg">Your text</td>
    </tr>
    </table>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked great, one more thing, how would i change the background image (or get rid of it all together)?

    Thanks again,
    JC

  4. #4
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean change it dynamically, prompted by some kind of action such as a mouseover or click? That would require javascript, and work something like this:

    First, give your table cell an id attribute:

    <td class="centered_with_bg" id="whatever_you_call_it">

    then use a javascript command to change its background-image property, like this...

    if (document.getElementById)
    document.getElementById('whatever_you_call_it').style.background-image = "url(new_image.jpg)"

    ...or...

    if (document.getElementById)
    document.getElementById('whatever_you_call_it').style.background-image = ""

    ...to set it to nothing. I haven't tested that, but I've used that technique with other CSS properties. Of course, you'll need to call the command from an event handler, such as...

    <input type="button" value="test" onclick="[...]" />

    (where [...] is replaced by the code given earlier).

  5. #5
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great, ta very much!
    JC


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •