javascript overlay div with text on images dynamically

Posted on 2011-10-20
Last Modified: 2012-06-27

I have existing HTML code which shows image thumbnails, I want some JavaScript to overlay a simple div with text (one or two characters).

my page is already consists of inline images as follows;
<a title="this is a title" href="myimage.jpg"><img src="myimage-th.jpg" alt="this is a title" width="150" height="112" /></a>

Open in new window

what is the easiest way to add a div overlay with text to the image, without the need of modifying the HTML source?

I have jQuery available.
Question by:thydzik
    LVL 19

    Expert Comment

    You will need to modify the HTML to add the overlays.

    With jquery you only need to show and hide those overlays with .hide() and .show() on mouse over and mouse out events.
    LVL 11

    Author Comment

    okay, thanks, but what would be the simplest way of doing this? what html will I need to add?
    LVL 11

    Author Comment

    okay, on further reading it looks like I may need to put the images in their own div?

    and then build the div overlay in this div as well,

    is there an alternative?
    LVL 19

    Accepted Solution

    The simplest way I see this is creating overlays separately by themselves:

    <div class="overlay" id="overlay_img1">Text of the overlay</div>

    Class overlay by default hides overlays, and on mouse over and on mouse out events on the images you show and hide the divs associated to the images by it's id

    <img id="img1" src="whatever" />

    $("#img1").mouseIn(function () {
      $("#overlay_" + $(this).attr("id")).show();

    $("#img1").mouseOut(function () {
      $("#overlay_" + $(this).attr("id")).hide();
    LVL 11

    Author Comment

    I want to know what is the best way to overlay the text on the image?

    LVL 17

    Assisted Solution

    The bast way to overlay text on an image is to make a div and set the image as the background image of the div. That automatically makes the text on the div overlay the image. You would need to set the correct width and height of the div to get the entire image to display.
    LVL 11

    Author Comment

    thanks for the reply.

    i have been further playing around with this.
    I have found a solution that works okay. basically a div containing the original image and a second div with the text.

    so far looks okay, doing all static html at the moment. once happy with the results will try and incorporate it dynamically.
    LVL 11

    Author Closing Comment

    awarding points, didn't really help me though as nobody explained how to actually do it.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    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…
    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…

    733 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

    20 Experts available now in Live!

    Get 1:1 Help Now