旋转图像Alt文本不旋转图像

我有alt属性为我的图像。当图像不可用时，我希望文本以图像应该在的45 *角对角显示。我试过在CSS中使用transform/rotate属性，但是这也会倾斜显示的图像。旋转图像Alt文本不旋转图像

有没有办法只能倾斜ALT文本？

2013-10-03 Lloyd Banks

你是如何检查图像不可用？ – trh

好吧，我试图做出一个聪明的答案，但没有一个体面的浏览器访问一台机器。我认为这应该是可能的使用[onerror事件]（http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is -未找到）。如果你覆盖它，你可以隐藏图像，并在alt文本之后插入一个span，然后旋转它。 – 2013-10-03 05:41:26

在CSS中没有办法做到这一点，因为alt文本不作为CSS概念存在。 CSS应用于元素，并且alt文本不构成元素，甚至是伪元素。 CSS中没有办法使规则的应用依赖于img元素的状态。在实践中，当图像不可用时，渲染alt文本以及渲染整个元素img的方式因浏览器而异。

即使您无条件地旋转元素（意味着图片也被旋转，当图片被显示时），alt文本在所有浏览器中的行为将不会像所期望的那样。（火狐将旋转图像，而不是alt文本。）

一种解决方法，使用脚本，将取代由他们alt文本，裹着你可以旋转的元素img元素。坏消息是，您需要在标记中的每个img元素中添加一个onerror属性。你不能用脚本来做到这一点，因为当元素已经被解析时添加属性为时已晚，因为在解析时，浏览器也会发送对图像的请求。并且您不能使用img元素的complete属性，因为当对图像的请求失败时它被设置为true - 在JavaScript中没有直接的方式来测试img元素是否呈现为图像。

所以，你会在你所有的img元素如果你想显示alt文本中使用，说，onerror=altr()，与函数定义

function altr(el) { 
console.log(el.innerHTML); 
    var span = document.createElement('span'); 
    span.className = 'notLoaded'; 
    span.innerHTML = el.alt || 'Missing alt'; 
    el.parentNode.replaceChild(span, el); 
}

，并与CSS代码

span.notLoaded { 
    display: inline-block; 
    border: solid thin; 
    color:red; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg);   
}

在具有某些特定尺寸的框中（如img元素中指定的那些框），您需要添加将这些尺寸放入的style属性中的代码这里创建的元素。

jsfiddle

来源

2013-10-03 08:09:33

旋转图像Alt文本不旋转图像

回答

相关问题