1

Topic: Image alt attribute

Just another quickie. smile The alt attribute on an image tag. Is it bad form to put another image in there, as a fallback if the main image doesn't exist, or should it be kept as text only?


Cheers.

Re: Image alt attribute

You can't put another image there (I think), the alt text is just text. How would you put another image there?

3

Re: Image alt attribute

I'm not altogether sure if it would accept, (and I'll admit I haven't yet tried), an image uri instead of just text. It was just when reading through the W3C docs, it specifies it as an alternate if the img src is not available, but never specifically mentions that it must be text only, (that I could find), hence why I was wondering.

It's just for one specific link that loads a sites favicon, to put a place holder icon in there if the site icon isn't available, or, (as I've realised a lot of sites seem to be doing lately), they're placing their favicon.ico's somewhere other than the root dir.

Re: Image alt attribute

<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI of image to embed --
  alt         %Text;         #REQUIRED -- short description --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements alt) --
  name        CDATA          #IMPLIED  -- name of image for scripting --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  >

It wouldn't allow a URI wink

5

Re: Image alt attribute

Right. I've done it the way I should have and actually checked to see if it will work. Nope. big_smile It is text only as you said. So, on a different tack, is there any easy way to subsitute another image if the main icon isn't available? These would be remote sites icons, btw.


Cheers again.

Re: Image alt attribute

Mmm, I don't know. Perhaps with Javascript or CSS.

7

Re: Image alt attribute

I'd never considered using CSS for it. I'll have a dig through and see what I can find there. I'm trying to ditch any javascript I don't really need, so CSS would be the preferable way if it'll work. I'll post it up if I find a method. Cheers again Smartys. smile

8

Re: Image alt attribute

Smartys wrote:

It wouldn't allow a URI wink

I must be going blind. I'd never noticed this post 'til just now. big_smile

9 (edited by Jérémie 2007-12-16 19:51)

Re: Image alt attribute

You could do it server side (check, and output the appropriate src for the img tag in the html page displayed), but it will slow things down, probably a lot.

If this is for something specific (like remote avatars), I would do it server side but as a cron (once a week, a day, an hour, based on the common level of errors and the use)... just disable the custom remote avatar if they have gone 404. If not, CSS is probably the fastest way to go (use a background image behind the real one).

10 (edited by MattF 2007-12-16 20:20)

Re: Image alt attribute

Jérémie wrote:

You could do it server side (check, and output the appropriate src for the img tag in the html page displayed), but it will slow things down, probably a lot.

Aye, that's one thing I was wanting to completely avoid. Especially due to the fact that this is one of those purely cosmetic with no real need type scenarios. big_smile I'd like to get it working, but wouldn't introduce load specifically for it.

If not, CSS is probably the fastest way to go (use a background image behind the real one).

Just been trying that, and not for the life of me can I figure out how to do it, (although my CSS skills aren't exactly legendary). big_smile This is what I've tried so far. (Can class= be used for img tags, btw)?

img.favicon {
        background-image: url(./images/icons/no_icon.png);
        height: 16px;
        color: #ffffff;
}
<img class="favicon" src="'.$icon_url.'/favicon.ico" alt=""/>

Am I barking up the wrong tree with that? It just doesn't seem to want to work. If I put text in the alt tag, that displays white as set, but the background image won't display if there is no favicon.ico.


Cheers.

11

Re: Image alt attribute

MattF wrote:
Jérémie wrote:

You could do it server side (check, and output the appropriate src for the img tag in the html page displayed), but it will slow things down, probably a lot.

Aye, that's one thing I was wanting to completely avoid. Especially due to the fact that this is one of those purely cosmetic with no real need type scenarios. big_smile I'd like to get it working, but wouldn't introduce load specifically for it.

If not, CSS is probably the fastest way to go (use a background image behind the real one).

Just been trying that, and not for the life of me can I figure out how to do it, (although my CSS skills aren't exactly legendary). big_smile This is what I've tried so far. (Can class= be used for img tags, btw)?

img.favicon {
        background-image: url(./images/icons/no_icon.png);
        height: 16px;
        color: #ffffff;
}
<img class="favicon" src="'.$icon_url.'/favicon.ico" alt=""/>

Am I barking up the wrong tree with that? It just doesn't seem to want to work. If I put text in the alt tag, that displays white as set, but the background image won't display if there is no favicon.ico.


Cheers.

mattf, is the

<img class="favicon" src="'.$icon_url.'/favicon.ico" alt=""/>

inside a <?php?


Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

12

Re: Image alt attribute

Yup. It's an extract from the parser.

Finally managed to get the background image showing through just trying everything I could think of one by one. big_smile Ended up with this:

img.favicon {
        width: 16px;
        height: 16px;
        position: absolute;
        margin-left: -8px;
        margin-top: 1px;
        background: no-repeat;
        vertical-align: bottom;
        background-image: url(../images/icons/no_icon.png);
}

Only thing I'm wondering now is if there's a way to hide the background image if the favicon is shown, to avoid having both visible if the overlying icon is less in size than 16x16.

13

Re: Image alt attribute

can u not create a if statement?

im trying to think logical on that. if this show dont show that. either way?



might be crazy ...
Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

14

Re: Image alt attribute

quaker wrote:

can u not create a if statement?

With it being a non local image, it would mean connecting to the remote site and seeing what code was returned, to integrate it in that way. T'would be a quick way to create a self inflicted DoS. big_smile big_smile

15

Re: Image alt attribute

sound like danged if you do danged if you dont..
so there is really no quick fix for this.. hummm..
i dont like that answer..haha


Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

16

Re: Image alt attribute

quaker wrote:

sound like danged if you do danged if you dont..

It would appear that's pretty much the outcome. big_smile I've settled finally on a small background image with the probability that it'll be slightly visible behind smaller favicons. Can't really find any other way. big_smile

Just on a sidetrack, btw, but still CSS related, does anyone have an idea how I can align these feed buttons correctly in Opera?

http://forums.bauchan.org/testforum/viewforum.php?id=1

Alignment is fine in everything else, (IE, Gecko, Mozilla) based, but Opera shows them way out of whack if I correct alignment for the others, and if I get rid of the negative margin, Opera displays them fine but nowt else. They're on a float: right setup, btw.


Cheers.

Re: Image alt attribute

MattF wrote:
quaker wrote:

sound like danged if you do danged if you dont..

It would appear that's pretty much the outcome. big_smile I've settled finally on a small background image with the probability that it'll be slightly visible behind smaller favicons. Can't really find any other way. big_smile

The only clean way would be to check the size of the intended image, and giv the element with this backround this size with CSS.

Like:

.remoteImage {
width:$remoteImageWidth;
height:$remoteImageHeight;
}

18

Re: Image alt attribute

I don't get the problem. Surely all you have to do is to take the smallest sized favicon you've come across and make the background image that size. That way its certain to be covered.

19

Re: Image alt attribute

Paul wrote:

I don't get the problem. Surely all you have to do is to take the smallest sized favicon you've come across and make the background image that size. That way its certain to be covered.

I thought it would be that straight forward initially, but they're sods with favicons on some sites. big_smile I've got it now with an 8x8 image at the bottom of a 16x16 layer/frame with transparent background. Problem is with the likes of Metacafe, (as a prime example). Their favicon is 16x16, but the image is approx. only 8x8, and it is also placed in the bottom right of the layer, hence the background image is slightly visible past it.

As it is now though, (if I made the background image any smaller it would be ne'er use nor ornament), big_smile I can live with the odd quirky favicon making it partially visible. smile