标题属性中的img标签

Question

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net

I viewed the page's source and got:

<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
            <img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
            <div style="float: left; width: 300px">
                <a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
                <p>
                    Nh&acirc;n vật ch&iacute;nh Yuzuko, ngay ng&agrave;y đầu ti&ecirc;n chuyển trường đ&atilde; đụng mặt v&agrave; kh&ocirc;ng mấy cảm t&igrave;nh với Mei - hội trưởng hội học sinh ở &nbsp;trường mới, trong ...
                </p>
            </div>'>
            Citrus (Saburouta)</a>

but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?

Answer 1

To quote the accepted answer to the question you linked to

You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.

They use a custom tooltip look-a-like effect.

Answer 2

As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.

For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like

a:hover + div {
   display: block !important
}

this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.

Here is the demo: http://jsfiddle.net/4WZvL/

Answer 3

The image tag in that title attribute is encoded. Given this, you can place any string you want in the title tag of an anchor, it doesn't mean it's a good idea at all though. You can use javascript to pull the proper image url from any data attribute you set and achieve the same effect so long as you know how to use that url in a logical way. At least that way you would be following some kind of standard and not just abusing the intention of html standards to pull off some fancy tricks.

Juhana answered your question. But to extend the notion, you can easily use data attributes, id's, and classes to set hidden or otherwise referenced html elements for whatever you need. You can hide elements with css and then unhide them with javascript if the desired effect is to pop up that block with the images from the link you provided.

Someone may provide an example if you specify your exact needs and show what you have tried to solve it yourself.

Answer 4

That HTML isn't valid, and although it might be possible it doesn't mean you should do it. Some browsers probably won't display the image correctly.

Use one of the thousands of Javascript tooltip plugins instead. Here's loads for jQuery: https://www.google.co.uk/search?q=jquery+tooltip+plugin