Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Using Code For the Title of an Image?

    I'm trying to use some some HTML for the 'title' of a image instead of text. So instead of:
    <img src="your/url/here.jpg" title="some description" />

    I want to use something like:
    <img src="your/url/here.jpg" title="<div>some code</div>" />

    I didn't think this was possible until I noticed it used on another site. But I can't seem to make it work. Here's the code from the site:
    Code:
    <a title="<div style='float:left;'><img src='/anime/images/thumbnail/331.jpg' /></div><div id='entry_tag_container'>
    <div style='margin-left:5px;' id='entry_information'></div>
    <ul id='entry_information_content'>
    <li>
    <ul>
    <li id='entry_tag'></li>
    <li id='entry_tag_content'>
    <p>													sci-fi aliens pirates space action harem gods 													</p>
    </li>
    </ul>
    </li>
    <li>
    <ul>
    <li id='entry_noe'></li>
    <li class='entry_information_content'>
    <p>	0													</p>
    													</li>
    </ul>
    </li>
    <li>
    <ul>
    <li id='entry_length'></li>
    <li class='entry_information_content'>
    <p>
    30 Minutes / Half Hour													</p>
    </li>
    </ul>
    </li>
    <li>
    <ul>
    <li id='entry_yp'></li>
    <li class='entry_information_content'>
    <p>
    1995													</p>
    													</li>
    </ul>
    </li>
    </ul></div>
    " class="list_title_middle" href="/anime?id=331">Tenchi Universe</a>
    The result is very cool. This example is for the title of a link, however, my guess is it will work exactly the same with the title of an image.

    Here's the site that came from if you want to see an example of what I'm trying to accomplish:
    http://romanceanime.com/anime/

    Thanks in advance for any help.
    Last edited by Tech.Inno; 07-14-2011 at 08:51 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You should not do this, because it is invalid according to W3C standards


  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    however, my guess is it will work exactly the same with the title of an image.
    No! It's a javascript+CSS based tooltip. Of course the content of the tootip is placed in the attribute title Check http://www.google.com/search?q=jquery+tooltips
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    You should not do this, because it is invalid according to W3C standards

    I was unaware of that, thanks for the info. Do you know of a different way to accomplish a similar result?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by vikram1vicky View Post
    You should not do this, because it is invalid according to W3C standards

    Nothing wrong with that, since we can have any string inside the attribute title. Though we can't expect it to be rendered as a normal HTML, without any javascript.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there

    the site uses jquery.tooltip.js to achieve that effect.

    coothead

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    No! It's a javascript+CSS based tooltip. Of course the content of the tootip is placed in the attribute title Check http://www.google.com/search?q=jquery+tooltips
    Thank you very much for the info. I've been searching through some of the sites, but it's all a bit confusing to me. Would you mind posting an example of what I'd need to do?

    *Edit*
    From what I can tell, I need to include the library in my header
    <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>

    Then I'd define .tooltip in my css.
    Code:
    /* tooltip styling. by default the element to be styled is .tooltip  */
    .tooltip {
    	display:none;
    	background:transparent url(/tools/img/tooltip/black_arrow.png);
    	font-size:12px;
    	height:70px;
    	width:160px;
    	padding:25px;
    	color:#fff;	
    }
    Then use a line like
    $("#demo img[title]").tooltip();

    And what that would do is replace the title attribute of any image that is within a <div> with the id 'demo'? But how do I add content to this?
    Last edited by Tech.Inno; 07-14-2011 at 01:50 PM. Reason: Thought of something

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by abduraooft View Post
    Nothing wrong with that, since we can have any string inside the attribute title. Though we can't expect it to be rendered as a normal HTML, without any javascript.

    I agree we can have any string inside attr title, but we cannot use HTML tags inside it


  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just finished applying this to my site. It works great! Thanks to everyone who helped. Here's the site where I got the info I needed:
    http://flowplayer.org/tools/demos/tooltip/any-html.html

    This is the webpage where I'm making use of it. But please note, this site is still under heavy construction.
    http://techinno.zxq.net/games.php


  •  

    Posting Permissions

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