Image with a text overlay that is dynamically generated

I want to display an image with a title that lays on top of the image. This title should be dynamically generated, therefore no photo editing tool can be used in this situation. The text comes from a dynamically generated JSON object, which then can be used by a JavaScript in order to inject the title information into a website. The only technologies that can here be used is web technologies such as XHTML and CSS.

Taggings:

Submitted by Thomas Ziegelbecker on Thu, 12/12/2013 - 22:52
3 answers

Using XHTML and CSS3 and absolute positioning

steps:

  • search the web for text overlay with xhtml and css
  • choose some tutorial among the given search results
  • find out that the css position attribute of the tag is the most important key to lay a text over an image
  • position: absolute - does the trick
  • use "top", "left", "bottom" or "right" to position the text over the image
  • put the image and the element in an containing DIV element
  • set the DIV's CSS width attribute to 100%

    • The CSS

    h1#text{
    position: absolute;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    color: #FFFFFF;
    display: inline;
    left: 0;
    top: 75%;
    margin-left: 7px;
    padding: 5px 30px 5px 10px;
    }

    div#container{
    width:100%;
    height:100%;
    }

    The HTML:

    The Web of Tomorrow!


    that's it.

    Submitted by Thomas Ziegelbecker on Wed, 12/18/2013 - 13:44

    Taggings:

    Replacing String in JavaScript with Regular Expression and the replace function

    steps:

    1. searching the web for replacing texts
    2. finding regular expression
    3. searching for suitable regex function
    4. identifying replace out of (match, exec, replace) as the most suitable function to use
    5. searching for example how to use replace the right way
    6. finding and testing the right pattern that matches /s200/
    7. testing and iterating until the pattern matches the string and the modified string is ready to use

    a javascript solution for that particular challenge looks the following way:


    var testString = "http://www.google.at/img/s200/";
    var partToBeReplaced = /s200/;
    var newPart = "s1600";
    var replacedTestString = testString.replace(partToBeReplaced, newPart);

    Submitted by Thomas Ziegelbecker on Thu, 12/12/2013 - 22:24

    Developing a blogger.com gadget that displays both, an image and the title of the most recent post

    The steps do do so would be the following:

    1. Look up the internet for getting started documentation for blogger.com gadgets (Blogger documentation)
    2. Write a helloworld gadget and try to upload the gadget to your blog (add the helloWorld Gadget to your ftp, add it then to your layout by choosing "Layout" and clicking the following, at last enter an URL and hit the "add url" button)
    3. if the upload was successful look up how one can get the image link and the title of the most recent post programmatically
    4. search the web how to display an image and a title with xhtml
    5. search the web how to style the previsouly mentioned tags with css accordingly
    6. put the pieces together and test
    7. iterate until the desired outcomes are archieved
    8. upload the solution to your blog

    In order to get a kick start, here the helloWorld.xml


    <?xml version="1.0" encoding="UTF-8" ?>

    Description of the structure:

    • ModulePrefs: Here preferences for the gadget can be defined, which can then be used within your code
    • your custom HTML, CSS and JavaScript all goes into the Content part. as CDATA
    Submitted by Thomas Ziegelbecker on Thu, 12/12/2013 - 22:04

    Taggings: