Results 1 to 22 of 22
  1. #1
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    Overlay Text Onto Image?
    I am pretty sure this can be done but have no idea how to do it. Let's say you create a small image. Can/how do you then overlay any text you want over that image? That way, the same image can be used over multiple times with different text. Make sense? Possible?

  2. #2
    http and a telephoto
    Join Date
    January 18th, 2005
    Location
    NYC
    Posts
    17,708
    Banner generating sites do this all the time, no idea how though Been looking into that myself.
    Deborah Carney
    TeamLoxly.com BookGoodies.com ABCsPlus.com

  3. #3
    Moderator MichaelColey's Avatar
    Join Date
    January 18th, 2005
    Location
    Mansfield, TX
    Posts
    16,232
    There are libraries that let you pragmatically create graphics. You could use those to generate graphics for each combination (or even dynamically generate it).

    An even easier way would be to use the stock image as the "background" of a DIV or TABLE and then just position the text over the background. Positioning (and size) might be a little tricky with HTML.
    Michael Coley
    Amazing-Bargains.com
     Affiliate Tips | Merchant Best Practices | Affiliate Friendly? | Couponing | CPA Networks? | ABW Tips | Activating Affiliates
    "Education is the most powerful weapon which you can use to change the world." Nelson Mandela

  4. #4
    The Seal of Aproval rematt's Avatar
    Join Date
    November 19th, 2006
    Location
    The Windy City
    Posts
    4,140
    Any graphics editing program like Photoshop or Gimp will allow you to do this.

    -rematt
    "I know that you believe you understand what you think I said, but I'm not sure you realize that what you heard is not what I meant." - Richard Nixon

  5. #5
    general fuq mrbshouse's Avatar
    Join Date
    January 18th, 2005
    Location
    Argieville
    Posts
    1,381
    is it possible to do this using a css to define backgrounds in a table you setup, then just put the text on the page in the right place

  6. #6
    http and a telephoto
    Join Date
    January 18th, 2005
    Location
    NYC
    Posts
    17,708
    Quote Originally Posted by rematt
    Any graphics editing program like Photoshop or Gimp will allow you to do this.

    -rematt
    I think both of us are talking about doing this online. That's what I am trying to do anyways.
    Deborah Carney
    TeamLoxly.com BookGoodies.com ABCsPlus.com

  7. #7
    Master of Design AlexBet's Avatar
    Join Date
    January 18th, 2005
    Location
    Toronto, Canada
    Posts
    1,364
    Hi SeymourButts,

    It is actually a VERY easy thing to do. Just follow these simple steps:

    1) Create a table or a DIV (easier with a DIV), and set its background to the image you want to use behind the text.

    2) Add the text to the table cell or DIV.

    Here is a sample code using a div:

    <div id="sample_div" style="background-image:url(images/image.gif);">
    Sample Text
    </div>

    Of course, you can add width and height to the DIV so it is the size you need, and of course you can do the styles in an outside CSS file.

    Pretty simple, huh!? Enjoy!
    Alex
    AlexBet.com - Professional Website Design, Website Development, Mobile App Development!


    "The bitterness of poor quality remains long after the sweetness of low price is forgotten"
    Benjamin Franklin

  8. #8
    Affiliate Manager cbsturg's Avatar
    Join Date
    January 24th, 2007
    Location
    Lima OH
    Posts
    753
    Here's a sample code of what MC is talking about, supposing the image file is 250 x 100.

    Code:
    <div style="background:url(path_to_image_file); width: 250px; height: 100px;">some text here</div>
    You can alter the horizontal position of the text using the "text-align" directive in the style and you can alter the vertical alignment of the text by adding a top padding to the element, or encapsulating the inner text in its own div whose position you define. One would think that the "vertical-align" directive would be effective, but alas, it does not apply (a decent article on the woes of "vertical-align" can be found at http://phrogz.net/CSS/vertical-align/index.html).

    Any questions, feel free to PM me. I'm kinda' bored today...
    Chris Sturgill
    "All my life I've had one dream, to achieve my many goals." - H. Simpson

  9. #9
    Affiliate Manager cbsturg's Avatar
    Join Date
    January 24th, 2007
    Location
    Lima OH
    Posts
    753
    Hmm... I see Alex posted while I was posting...

    But it's important to remember that if you don't specify the size of the div, the background image will only be applied to the size of the text! To make sure that the whole image file is displayed, I strongly recommend explicitly setting the height and width of the div.
    Chris Sturgill
    "All my life I've had one dream, to achieve my many goals." - H. Simpson

  10. #10
    Affiliate Manager cbsturg's Avatar
    Join Date
    January 24th, 2007
    Location
    Lima OH
    Posts
    753
    If you want to create actual image files on the fly (like MC alluded to), the best way to do it (IMHO) is through PHP and the GD library. It's too expansive to discuss in great detail here, but you can generate dynamic images on the fly (and even have those image files saved to the server for later use).

    More information about this can be found at http://www.php.net/gd.
    Chris Sturgill
    "All my life I've had one dream, to achieve my many goals." - H. Simpson

  11. #11
    The Seal of Aproval rematt's Avatar
    Join Date
    November 19th, 2006
    Location
    The Windy City
    Posts
    4,140
    Quote Originally Posted by loxly
    I think both of us are talking about doing this online. That's what I am trying to do anyways.
    Duh!
    "I know that you believe you understand what you think I said, but I'm not sure you realize that what you heard is not what I meant." - Richard Nixon

  12. #12
    Member
    Join Date
    May 29th, 2007
    Location
    Toronto
    Posts
    57
    doing it dynamically with CSS and PHP (as opposed to HTML table with JPEG), how doyou deal with the rendering difference between browsers. I have been to a couple well designed css based sites that are butchered by IE

  13. #13
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    I do it like Alexbet does... I make a div and in the CSS file set a picture as a background. Put the text in the div.
    Define the Div's height and width to the same size as your picture or in photoshop change the size of the photo. Set the text color and font size in the CSS too.

    It is really quite easy to do if you have used DIVs and CSS before.

  14. #14
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    Ok, let me give that a shot. This site uses only div and css.

  15. #15
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    You can also set the font size, font family, etc. in the CSS file.
    You could set padding and margins in the CSS to get the text to align properly.

  16. #16
    http and a telephoto
    Join Date
    January 18th, 2005
    Location
    NYC
    Posts
    17,708
    Quote Originally Posted by rematt
    Duh!
    I meant dynamically online, not create locally and upload the html. Sorry for the confusion, I'll step out now
    Deborah Carney
    TeamLoxly.com BookGoodies.com ABCsPlus.com

  17. #17
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    Quote Originally Posted by loxly
    I meant dynamically online
    Me too.

  18. #18
    The Seal of Aproval rematt's Avatar
    Join Date
    November 19th, 2006
    Location
    The Windy City
    Posts
    4,140
    Quote Originally Posted by loxly
    I meant dynamically online, not create locally and upload the html. Sorry for the confusion, I'll step out now
    The Duh was for me being so dense. I should have realised...

    -rematt
    "I know that you believe you understand what you think I said, but I'm not sure you realize that what you heard is not what I meant." - Richard Nixon

  19. #19
    http and a telephoto
    Join Date
    January 18th, 2005
    Location
    NYC
    Posts
    17,708
    Quote Originally Posted by rematt
    The Duh was for me being so dense. I should have realised...

    -rematt
    lol... you never know though...
    Deborah Carney
    TeamLoxly.com BookGoodies.com ABCsPlus.com

  20. #20
    ABW Ambassador Snib's Avatar
    Join Date
    January 18th, 2005
    Location
    Virginia
    Posts
    5,303
    Here's a very straightforward example of how to do this with PHP and GD:

    http://www.scriptplayground.com/tuto...Text-On-Image/

    They use a PNG as an example, but you can also use ImageCreateFromGif or ImageCreateFromJpeg on the first line there. To dynamically detect the image type you'll need to use getimagesize($file) to determine the mime type. That's something like this:

    Code:
    $size = getimagesize($file);
    
    switch($size[mime])
    {
        case 'image/gif':
            $image = ImageCreateFromGif($file);
            break;
        case 'image/jpeg':
            $image = ImageCreateFromJpeg($file);
            break;
        case 'image/png':
            $image = ImageCreateFromPNG($file);
            break;
    }
    You should be able to combine this snippet with the one on that site to have a fairly well rounded watermarking script.

    - Scott
    Hatred stirs up strife, But love covers all transgressions.

  21. #21
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    As long as the GD library is compiled with PHP, just for the record.

    Shawn Kerr (.com) | Disney World | SEC Football

  22. #22
    Newbie
    Join Date
    May 23rd, 2005
    Posts
    21
    I have used this in the past with much success. Mainly for creating thumbnail images from sites on the fly to not skew the whole page. It does a good job at keeping the aspect ratio and keeping the image clear. http://www.imagemagick.org/script/index.php

  23. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. WP Image Overlay type plugin
    By Georgie Peri in forum Blogging, Mobile and Social Media
    Replies: 3
    Last Post: November 15th, 2009, 08:15 AM
  2. Replies: 3
    Last Post: August 31st, 2009, 03:15 PM
  3. static ppc text/image link
    By animas in forum Midnight Cafe'
    Replies: 3
    Last Post: October 12th, 2007, 12:41 PM
  4. Amusing image challenge text
    By Allen - AMWSO in forum Rakuten LinkShare - LS
    Replies: 7
    Last Post: June 23rd, 2005, 10:33 AM
  5. CJ Text Link - Remove 1x1 image
    By greentea in forum Commission Junction - CJ
    Replies: 11
    Last Post: February 28th, 2004, 06:38 AM

Posting Permissions

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