Make img alt visible

[nicolafw]

Hi,
I want to make the img alt visible by using ::after, but it does not work. It does work for the a-tag, but I cannot make it work for the img-tag. Why?

a::after { 
content: attr(alt);
}
img::after {
  content: attr(alt);
}

[bearhead]

I don’t think it is possible to give an img a pseudo element. It’s probably because they are self-closing, and can’t contain child elements.

To get the alt text to display you’ll probably have to use javascript.

[edit] Thanks for the correction Paulie_D

[Paulie_D]

No, an image cannot have a pseudo-element (not class).

Either Js or wrap the image and use a pseudo-element on that (using a data-attribute)…

Or you could just use the title attribute…you can’t style it (AFAIK) but it is informational

http://codepen.io/Paulie-D/pen/WwRZOe

[nicolafw]

Thanks, but I need it as a caption. I cannot change the HTML-code. I might find a Java script.

[bearhead]

With jquery it should be pretty simple – something like:

http://codepen.io/kvana/pen/PNWEBR

depends a little on your html structure though…

[Paulie_D]

If Jquery is a possibility then we can make our own structure

http://codepen.io/Paulie-D/pen/ONWQrK

[nicolafw]

Thanks Bearhead. This works fine.

What I get is this:
<a href="...">
<img src="..." alt="alternativ text" />
alternativ text
</a>

All I need now is some HTML to be able to positon and style the caption:
<a href="...">
<img src="..." alt="alternativ text" />
<caption>alternativ text</caption>
</a>

[Paulie_D]

<caption> is intended to be used with a table element`so it’s probably not the best choice here.

As for positioning…what did you have in mind?

[nicolafw]

It can also be a div. I want to positon it below the photo. I can do that by css, but without any tag surrounding it I cannot style it.

Your code did not work unfortunately, it is a jimdo page, there must be some conflict somewhere: http://omfactorynyc.jimdo.com/teachers/

[Paulie_D]

I have no idea what a jimdo page is and the link you provided returns an empty page unfortunately.

This might be a battle you can’t win without some major retooling of whatever it is you have.

[nicolafw]

It cannot be that difficult as the code bearhead provided does work:

$(document).ready(function(){
$('div').each(function(){
var alt = $(this).children('img').attr('alt');
$(this).append(alt);
});
});

all I need is a surrounding div-tag for the alt text.
I don’t know how to do that as I don’t know any javascript unfortunatly…

[Alex Zaworski]

Should do it:

$(document).ready(function(){
  $('div').each(function(){
  var alt =   $(this).children('img').attr('alt');
  var wrap = $('<div>');
  wrap.append(alt);
  $(this).append(wrap);
  });
});

If you need a class on the wrapper that’s easy enough too, you can just change <div> to <div class="myclass"> when creating the wrap variable.

[nicolafw]

This finally worked:

</script><script language="javascript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('div a').each(function(){
var alt = $(this).children('img').attr('alt');
$(this).append('<div class="bildlegende">' + alt + '</div>');
});
});
//]]>
</script>

Thanks for all the help…

[alexnovelli]

I’m using a jQuery image slider plugin in WordPress. It creates itself HTML elements and when I try to use this code, it doesn’t recognize. Apparently don’t have time to this code see the HTML elements created by the plugin. Some help please? Thanks!

[Shikkediel]

I think it would be good to start a new topic and add a reduced demo, or in any case a link to the site. Quite impossible to say anything without actually seeing the code.

[Author]

Posts