Question

有没有办法为alt设计样式？用javascript？有伪属性？像这样：

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

...

javascript（我使用JQuery框架）做了这样的事情吗？

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：javascript读取图像的alt-tag并在屏幕上显示..所以这个alt文本不仅会显示如果img没有加载。

Answer 1

这是alt 属性，而不是标记，并且无法直接设置样式。如果图像无法加载，它只是一段文本。您可以设置<img>元素的样式，它会影响大多数浏览器中替代文本的样式（尽管不是IE）。

如果您指的是当您将鼠标悬停在图片上时某些浏览器中显示的工具提示，则可以使用title属性实现该工具提示，并且可以处理所有元素，而不仅仅是图像。 IE上也为图像使用alt属性，但这不是标准的。无论哪种方式，标题工具提示都无法设置样式。如果您需要更高级的工具提示，则必须创建自己的工具提示。我想那里有很多这样的东西。

Answer 2

使用alt属性无法做到这一点。

我建议使用jQuery Tooltip插件来获得此效果：

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

Answer 3

如果您正在寻找某种工具提示插件，可能会尝试像tipsy

之类的东西

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

或在此处查看更多示例

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

（*注意没有隶属关系）

Answer 4

不，您不能像完成那样在标准内嵌套标记。但是，您可以使用JavaScript / JQuery将值提取到DIV并设置样式。

我写了a simple plugin to do just that，有点黑客攻击它会做你想要的事情。

修改：您可以做的事情（虽然有点蠢）是在alt属性中使用以下内容：

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

然后，在您使用的任何代码中，您可以拆分管道字符并使用适当的标记围绕每个部分，如下所示：

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

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

Answer 5

Tim Down是对的，你无法设置alt 属性，但你可以使用jQuery来显示一个自定义弹出窗口，你可以将其设置为一个单独的html页面。

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/

Answer 6

您要实现的目的是在不显示图像的情况下设置替代文本的样式。 Alt不是元素，因此您无法直接对其设置样式，但是可以通过在img元素上设置字体大小来实现所需的效果。

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" />

如何设置<alt>标签的字符串样式？</alt>

6 个答案: