最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to style the string of an <alt> tag? - Stack Overflow

programmeradmin1浏览0评论

Is there a way to style the alt? With javascript? With pseudo attributes? like this:

<img src="foo.jpg" alt="<h1>This is the caption</h1><p>This is some text</p><p>Another text</p>" />

??

And javascript (I use JQuery framework) does something like this?

Get value of <alt> from <img>
make value between <h1></h1> css font-size:22px; color:green;
make value between <p></p> css font-size:14px; color:black;

BTW: The javascript reads the alt-tag of the image and shows them on the screen.. so this alt text will not only shown If the img isnt loaded.

Is there a way to style the alt? With javascript? With pseudo attributes? like this:

<img src="foo.jpg" alt="<h1>This is the caption</h1><p>This is some text</p><p>Another text</p>" />

??

And javascript (I use JQuery framework) does something like this?

Get value of <alt> from <img>
make value between <h1></h1> css font-size:22px; color:green;
make value between <p></p> css font-size:14px; color:black;

BTW: The javascript reads the alt-tag of the image and shows them on the screen.. so this alt text will not only shown If the img isnt loaded.

Share Improve this question edited Nov 25, 2010 at 10:26 Marcel Korpel 21.8k6 gold badges62 silver badges80 bronze badges asked Nov 25, 2010 at 9:55 TomkayTomkay 5,16021 gold badges65 silver badges94 bronze badges 2
  • 3 That's not what the alt property is there for. For that purpose, better use a different propery. – Pekka Commented Nov 25, 2010 at 9:57
  • BTWAY: I dont need a tooltip - I have a <div> which gets the string of the <alt> attribute. And I need to format a <h1> and a <p>... The whole text is shown in a div. – Tomkay Commented Nov 25, 2010 at 10:06
Add a comment  | 

6 Answers 6

Reset to default 11

It's the alt attribute, not tag, and it's not possible to style it directly. It's simply a piece of text that is displayed if the image fails to load. You can style the <img> element though and it will affect the styling of the alternative text in most browsers (though not IE).

If you were referring to the tooltip that appears in some browsers when you hover over an image, that's achieved with the title attribute and works on all elements, not just images. The alt attribute is also used by IE for this purpose on images, but this is not standard. Either way, title tooltips cannot be styled. If you need fancier tooltips, you'll have to create your own. I imagine there's a plethora of such things out there.

This is not possible with the alt attribute.

I recommend using a jQuery Tooltip plugin to get this effect:

http://flowplayer.org/tools/tooltip/index.html

Not really desirable if you are looking for some sort of tool tip plugin maybe try something like tipsy

http://onehackoranother.com/projects/jquery/tipsy/

or see here for more examples

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

(*note no affiliations)

No, you can't nest tags inside the attribute value as you have done. However, you can use JavaScript/JQuery to extract the value into a DIV and style that.

I wrote a simple plugin to do just that, with a bit of hacking it'll do what you want I think.

Edit: What you could do (though it's a bit hacky) is to use the following in your alt attribute:

<img id="myimg" src="foo.jpg" alt="This is the caption|This is some text" />

Then in whatever code you're using, you can split on the pipe character and surround each part with the appropriate tags, something like this:

var img = $('#myimg');
var alt = img.attr('alt').split('|');

var divContents = '<h1>' + alt[0] + '</h1><p>' + alt[1] + '</p>';

Tim Down is right you cannot style an alt attribute, but yet you can use jQuery for instance to show a custom popup window that you can style as a separate html page.

http://jquery.com/

http://flowplayer.org/tools/tooltip/index.html

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

What you are trying to achieve is styling alt text when image is somehow not displayed. Alt is not an element so you can't style it directly but what you can do to achieve the desired result is by setting font-size on img element.

JSfiddle Demo

img{
  font-size: 16px;
}

.small-alt-text{
  font-size:8px;
}
.big-alt-text{
  font-size:24px;
}
<img src="0.png" alt="Image failed to load" />
<br>
<img class="small-alt-text" src="0.png" alt="Image failed to load" />
<br>
<img class="big-alt-text" src="0.png" alt="Image failed to load" />

发布评论

评论列表(0)

  1. 暂无评论