Convert ALT to Caption

Discussion in 'Javascript' started by Roy Reed, Aug 14, 2006.

  1. Roy Reed

    Roy Reed Guest

    I found a script that converts image alt text to a caption which I've tried
    to modify for my needs:

    function addCaption(imgElem) {
    var captionElem = document.createElement("div");
    captionElem.className = "caption";
    var captionText = document.createTextNode(imgElem.alt);
    captionElem.appendChild(captionText);
    if(imgElem.nextSibling)
    imgElem.parentNode.insertBefore(captionElem,imgElem.nextSibling);
    else
    imgElem.parentNode.appendChild(captionElem);
    with(imgElem.style) {
    captionElem.style.width =
    (imgElem.width+borderLeftWidth+borderRightWidth+paddingLeft+paddingRight)+"px";
    }
    return true;
    }

    <img src="forest.jpg" width="515" height="183" alt="Strathyre Forest at
    Dawn - the forest is bathed in golden light and mist rises from between the
    trees - &copy; Roy Reed, 1987" onload="javascript:addCaption(this)">

    This works as I want if no border or padding is added to the image, but not
    if they are. In IE6 the padding is added to the width of the created div,
    but not the border width. In Firefox nothing is added.
    Can anyone tell me how this should be coded.

    Live example (with attribution to original code) at
    www.reeddesign.co.uk/autocaption/

    Thanks

    Roy Reed
    Roy Reed, Aug 14, 2006
    #1
    1. Advertising

  2. Roy Reed

    marss Guest

    Roy Reed напиÑав:

    > with(imgElem.style) {
    > captionElem.style.width =
    > (imgElem.width+borderLeftWidth+borderRightWidth+paddingLeft+paddingRight)+"px";
    > }


    You add string values.

    <img width="500px"style="padding: 5 5 5 5">
    In this case instead of "510px" you will get "500px5px5pxpx"
    Use parseInt or parseFloat before summation.
    marss, Aug 15, 2006
    #2
    1. Advertising

  3. Roy Reed

    Roy Reed Guest

    "marss" <> wrote in message
    news:...

    Roy Reed ???????:

    >> with(imgElem.style) {
    >> captionElem.style.width =
    >> (imgElem.width+borderLeftWidth+borderRightWidth+paddingLeft+paddingRight)+"px";
    >> }


    >You add string values.
    >
    ><img width="500px"style="padding: 5 5 5 5">
    >In this case instead of "510px" you will get "500px5px5pxpx"
    >Use parseInt or parseFloat before summation.


    Is this what you meant?

    with(imgElem.style) {
    captionElem.style.width = parseFloat(imgElem.width+borderLeftWidth+
    borderRightWidth+paddingLeft+paddingRight)+"px";
    }

    It gives exactly the same result.

    Thanks for trying to help with this. I'm not a JavaScript expert.

    Roy
    Roy Reed, Aug 15, 2006
    #3
  4. Roy Reed

    marss Guest

    Roy Reed напиÑав:

    > Is this what you meant?
    >
    > with(imgElem.style) {
    > captionElem.style.width = parseFloat(imgElem.width+borderLeftWidth+
    > borderRightWidth+paddingLeft+paddingRight)+"px";
    > }
    >


    No. I mean something like this
    with(imgElem.style) {
    captionElem.style.width =
    (parseFloat(imgElem.width)+parseFloat(borderLeftWidth)+

    parseFloat(borderRightWidth)+parseFloat(paddingLeft)+parseFloat(paddingRight))+"px";
    }
    marss, Aug 16, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wally

    System caption

    Wally, May 24, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    439
    Eric Marvets
    May 24, 2004
  2. Eric Marvets

    Re: System caption

    Eric Marvets, May 24, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    449
    Eric Marvets
    May 24, 2004
  3. LL

    Page number caption?

    LL, Dec 11, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    322
  4. =?Utf-8?B?UmljaGFyZA==?=

    RadioButtonList Caption?

    =?Utf-8?B?UmljaGFyZA==?=, Sep 23, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    539
    =?Utf-8?B?UmljaGFyZA==?=
    Sep 25, 2004
  5. Adam Knight

    Add Hyperlink In DataGrid Caption.

    Adam Knight, Jul 28, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    553
    Eliyahu Goldin
    Jul 28, 2005
Loading...

Share This Page