SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Feeding in an image instead of text as a parameter

    My apologies if this has been covered... I did a search of the archives and didn't find anything similar...

    I want to be able to, on clicking in a form field, reveal a little div next to it that contains a link to show/hide a larger div containing extra details. I found a script on Dynamic Drive that seems close to what I need (http://www.dynamicdrive.com/dynamicindex16/showhint.htm), and modified it to use onFocus/onBlur instead of onMouseover/onMouseout. So far so good.

    The problem is that the script displays a short text string instead of a div, and I don't know how to feed it a div id instead of a string. I know this must be pretty basic -- sorry!

    This is what the event handler looks like:
    Code:
    <input type="text" onFocus="showhint('This is the hint text', this, event, '150px')" onBlur="hidetip(event)" />
    In case you're wondering why I didn't just do a show/hide of the div when the user clicks in the field, I tried, but didn't know how to get the div aligned to the text box I was currently focused on -- if solving that problem is easier than the one above, that works too -- I just want to get to the end goal, not necessarily use one method over another.

    Any guidance you can give is appreciated...

    -Sarah

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to pass the HTML which will be inside the "hint" rather than just the name of the image (or div). Remember that you'll need to escape any quotes within the HTML string too.

    Example:
    Code:
    <input type="text" class="test" onFocus="showhint('<img src=\'img/lightbulbT.jpg\'>', this, event, '150px')" onBlur="hidetip(event)" />
    DEMO


    Andy
    Last edited by awestmoreland; Nov 28, 2006 at 20:46. Reason: After re-reading, I'm not sure I fully understood your problem. Let me know if not.
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked! Thank you!

    For anyone who's following along, this is how I adjusted it to have the image be a link.

    HTML Code:
    <b>Image hint:</b> <input type="text" class="test" onFocus="showhint('<a href=\'http://www.yahoo.com/\' target=\'_new\'><img src=\'http://www.awestmor.34sp.com/demo/sitepoint/imageHint/img/lightbulbT.jpg\'></a>', this, event, '150px')"" />
    -Sarah


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
  •