How best to style images in links?

**Els** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli wrote:
[color=blue]
> I'm fairly unfamiliar with CSS, but want to develop a way to skin a
> web application by using stylesheets for everything, including all
> images.
>
> I have a set of images used as buttons - mostly for simple links
> rather than form input buttons.
>
> <a href="mypage.ph p?action=add&id =7"><img src="..." border="0"></a>
> <a href="mypage.ph p?action=delete &id=7"><img src="..." border="0"></a>
>
> What is the way to do this? Define classes for the links or for the
> images? Rollovers aren't particularly important, but if easily doable
> would be a nice addition to the skinning ability.[/color]

If you want the image to change on hover, you shouldn't set it in the
html, but as a background image throught CSS. You'll have to define
the width and height of the <a> element, and set one background image
for a:link and a:visited, and another for a:focus, a:active and
a:hover. For the 'filling' of the <a> element you could use a  ,
or a transparent image.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Doors - Light My Fire

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sat, 9 Jul 2005 21:29:09 +0200, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
>Eli wrote:
>[color=green]
>> I'm fairly unfamiliar with CSS, but want to develop a way to skin a
>> web application by using stylesheets for everything, including all
>> images.
>>
>> I have a set of images used as buttons - mostly for simple links
>> rather than form input buttons.
>>
>> <a href="mypage.ph p?action=add&id =7"><img src="..." border="0"></a>
>> <a href="mypage.ph p?action=delete &id=7"><img src="..." border="0"></a>
>>
>> What is the way to do this? Define classes for the links or for the
>> images? Rollovers aren't particularly important, but if easily doable
>> would be a nice addition to the skinning ability.[/color]
>
>If you want the image to change on hover, you shouldn't set it in the
>html, but as a background image throught CSS. You'll have to define
>the width and height of the <a> element, and set one background image
>for a:link and a:visited, and another for a:focus, a:active and
>a:hover. For the 'filling' of the <a> element you could use a  ,
>or a transparent image.[/color]

<a class="b_add" href="mypage.ph p?action=add&id =7"><img
src="images/transparent.gif " border="0" alt="Add"></a>

a:link.b_add, a:visited.b_add {
background-image: url(images/b_add.gif);
height: 13px;
width: 13px;
}

Works in IE but not Firefox. Also, I get a very brief hourglass icon
in IE when I roll over the link.

**Benjamin Niemann** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Els wrote:
[color=blue]
> Eli wrote:
>[color=green]
>> I'm fairly unfamiliar with CSS, but want to develop a way to skin a
>> web application by using stylesheets for everything, including all
>> images.
>>
>> I have a set of images used as buttons - mostly for simple links
>> rather than form input buttons.
>>
>> <a href="mypage.ph p?action=add&id =7"><img src="..." border="0"></a>
>> <a href="mypage.ph p?action=delete &id=7"><img src="..." border="0"></a>
>>
>> What is the way to do this? Define classes for the links or for the
>> images? Rollovers aren't particularly important, but if easily doable
>> would be a nice addition to the skinning ability.[/color]
>
> If you want the image to change on hover, you shouldn't set it in the
> html, but as a background image throught CSS. You'll have to define
> the width and height of the <a> element, and set one background image
> for a:link and a:visited, and another for a:focus, a:active and
> a:hover. For the 'filling' of the <a> element you could use a  ,
> or a transparent image.[/color]

Or better, use the appropriate text for the link (the only you use for the
alt attribute of the images - that you omitted in your example to keep the
lines short ;) Then search the web for an 'image replacement' technique to
get rid of the text via CSS.

And even better: don't use links for actions that cause changes on your
server (DB or what ever). That's what POST requests are supposed to do. A
GET request should not change the state on the server. Read e.g.
http://www.cs.tut.fi/~jkorpela/forms/methods.html for more info on this
topic.

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

**Els** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli wrote:
[color=blue]
> <a class="b_add" href="mypage.ph p?action=add&id =7"><img
> src="images/transparent.gif " border="0" alt="Add"></a>
>
> a:link.b_add, a:visited.b_add {
> background-image: url(images/b_add.gif);
> height: 13px;
> width: 13px;
> }
>
> Works in IE but not Firefox.[/color]

Do you have an online example of it not working? (not that I don't
believe you, but that makes it easier to find out what the reason is)
[color=blue]
> Also, I get a very brief hourglass icon
> in IE when I roll over the link.[/color]

I've seen short flashes in IE, but never an hourglass icon. What's the
size in bytes of those images?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dave Edmunds - Girls Talk

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pink@odahoda.d e>
wrote:
[color=blue]
>Or better, use the appropriate text for the link (the only you use for the
>alt attribute of the images - that you omitted in your example to keep the
>lines short ;) Then search the web for an 'image replacement' technique to
>get rid of the text via CSS.[/color]

I don't like the idea of what that looks like if the images fail to
load for whatever reason - the user
[color=blue]
>And even better: don't use links for actions that cause changes on your
>server (DB or what ever). That's what POST requests are supposed to do. A
>GET request should not change the state on the server. Read e.g.
>http://www.cs.tut.fi/~jkorpela/forms/methods.html for more info on this
>topic.[/color]

I didn't write the server.

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
[color=blue]
>On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pink@odahoda.d e>
>wrote:
>[color=green]
>>Or better, use the appropriate text for the link (the only you use for the
>>alt attribute of the images - that you omitted in your example to keep the
>>lines short ;) Then search the web for an 'image replacement' technique to
>>get rid of the text via CSS.[/color]
>
>I don't like the idea of what that looks like if the images fail to
>load for whatever reason - the user
>[color=green]
>>And even better: don't use links for actions that cause changes on your
>>server (DB or what ever). That's what POST requests are supposed to do. A
>>GET request should not change the state on the server. Read e.g.
>>http://www.cs.tut.fi/~jkorpela/forms/methods.html for more info on this
>>topic.[/color]
>
>I didn't write the server.[/color]

Sorry about that - sent inadvertently. Actually, I'm now playing with
the FIR technique and although it may work, I'm not sure I see the
importance of setting the links down as text and then doing an image
replacement of that text. From what I read, in many cases the text
won't be displayed even if the image fails to load.

Two things that are affecting layout: The page is rendered as if the
text were still there (which probably makes sense). If I have a text
link "Add to list" that is approximatelyy 75px by 13px, then replace
it with a 13x13 icon, the page is still rendered with a 75x13 link - I
even get a large blank area next to the icon that functions as a link.

And oddly enough, I get the same brief hourglass in IE that the other
mentioned technique sees.

**Seefor** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

"Eli" <no@one.com> wrote in message
news:1vd0d1pubj go7q62vks1v8fdj nh0klidf2@4ax.c om...[color=blue]
> On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
>[color=green]
>>On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pink@odahoda.d e>
>>wrote:
>>[color=darkred]
>>>Or better, use the appropriate text for the link (the only you use for
>>>the
>>>alt attribute of the images - that you omitted in your example to keep
>>>the
>>>lines short ;) Then search the web for an 'image replacement' technique
>>>to
>>>get rid of the text via CSS.[/color]
>>
>>I don't like the idea of what that looks like if the images fail to
>>load for whatever reason - the user
>>[color=darkred]
>>>And even better: don't use links for actions that cause changes on your
>>>server (DB or what ever). That's what POST requests are supposed to do. A
>>>GET request should not change the state on the server. Read e.g.
>>>http://www.cs.tut.fi/~jkorpela/forms/methods.html for more info on this
>>>topic.[/color]
>>
>>I didn't write the server.[/color]
>
> Sorry about that - sent inadvertently. Actually, I'm now playing with
> the FIR technique and although it may work, I'm not sure I see the
> importance of setting the links down as text and then doing an image
> replacement of that text. From what I read, in many cases the text
> won't be displayed even if the image fails to load.
>
> Two things that are affecting layout: The page is rendered as if the
> text were still there (which probably makes sense). If I have a text
> link "Add to list" that is approximatelyy 75px by 13px, then replace
> it with a 13x13 icon, the page is still rendered with a 75x13 link - I
> even get a large blank area next to the icon that functions as a link.
>
> And oddly enough, I get the same brief hourglass in IE that the other
> mentioned technique sees.
>[/color]

Rather than 2 images, have 1 image and then just change the offset on the
hover.

**Benjamin Niemann** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli wrote:
[color=blue]
> On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pink@odahoda.d e>
> wrote:
>
> [snip]
>[color=green]
>>And even better: don't use links for actions that cause changes on your
>>server (DB or what ever). That's what POST requests are supposed to do. A
>>GET request should not change the state on the server. Read e.g.
>>http://www.cs.tut.fi/~jkorpela/forms/methods.html for more info on this
>>topic.[/color]
>
> I didn't write the server.[/color]

Then you should remember the name/address of the author in order to redirect
complains of angry users to him/her, if someone e.g. runs a link checker on
the page or (if it is publicly accessible) a web spider comes around and
all 'delete' links are 'clicked'.

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

**Benjamin Niemann** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli wrote:
[color=blue]
> On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
>[color=green]
>>On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pink@odahoda.d e>
>>wrote:
>>[color=darkred]
>>>Or better, use the appropriate text for the link (the only you use for
>>>the alt attribute of the images - that you omitted in your example to
>>>keep the lines short ;) Then search the web for an 'image replacement'
>>>technique to get rid of the text via CSS.[/color]
>>
>>I don't like the idea of what that looks like if the images fail to
>>load for whatever reason - the user
>>[/color]
>
> Sorry about that - sent inadvertently. Actually, I'm now playing with
> the FIR technique and although it may work, I'm not sure I see the
> importance of setting the links down as text and then doing an image
> replacement of that text. From what I read, in many cases the text
> won't be displayed even if the image fails to load.
>
> Two things that are affecting layout: The page is rendered as if the
> text were still there (which probably makes sense). If I have a text
> link "Add to list" that is approximatelyy 75px by 13px, then replace
> it with a 13x13 icon, the page is still rendered with a 75x13 link - I
> even get a large blank area next to the icon that functions as a link.[/color]

This should not happen, if you properly define the width & height of the
link.

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sun, 10 Jul 2005 12:06:06 +0200, Benjamin Niemann <pink@odahoda.d e>
wrote:
[color=blue]
>Then you should remember the name/address of the author in order to redirect
>complains of angry users to him/her, if someone e.g. runs a link checker on
>the page or (if it is publicly accessible) a web spider comes around and
>all 'delete' links are 'clicked'.[/color]

Do you typically permit spiders and other unauthenticated users to
access areas of your applications where they could inadvertently or
maliciously change data?

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sun, 10 Jul 2005 08:20:10 GMT, "Seefor" <invalid@email. address>
wrote:
[color=blue][color=green]
>> And oddly enough, I get the same brief hourglass in IE that the other
>> mentioned technique sees.
>>[/color]
>
>Rather than 2 images, have 1 image and then just change the offset on the
>hover.[/color]

There is no hover image in the tests I've done. In all of the
techniques I've tried I get the little flicker of an hourglass in IE.

**Eli** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

On Sun, 10 Jul 2005 12:08:40 +0200, Benjamin Niemann <pink@odahoda.d e>
wrote:
[color=blue][color=green]
>> Two things that are affecting layout: The page is rendered as if the
>> text were still there (which probably makes sense). If I have a text
>> link "Add to list" that is approximatelyy 75px by 13px, then replace
>> it with a 13x13 icon, the page is still rendered with a 75x13 link - I
>> even get a large blank area next to the icon that functions as a link.[/color]
>
>This should not happen, if you properly define the width & height of the
>link.[/color]

Yes, that was a problem. I wasn't defining the image width. I'd seen
a few examples where only the height was defined, but I'm not quite
certain why.

**kchayka** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli wrote:[color=blue]
>
> I'm now playing with the FIR technique[/color]

Be advised that all image replacement techniques have problems. Some
methods actually create accessibility problems when the opposite is
intended. Most leave the user out on a limb when image loading is
disabled. FIR (the original Fahrner Image Replacement) is possibly one
of the worst methods, from an accessibility standpoint. See also
<URL:http://css-discuss.incutio .com/?page=Screenrea derVisibility>

Alternatives to FIR are described at
<URL:http://www.mezzoblue.com/tests/revis...e-replacement/

The Gilder/Levin method is less bad than most, but I don't think any
will work well with just a 13x13 replacement image, especially when
image loading is disabled.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

**Christoph Päper** · Jul 21 '05, 02:03 AM

Re: How best to style images in links?

Eli:[color=blue]
> I'm fairly unfamiliar with CSS, but want to develop a way to skin a
> web application by using stylesheets for everything, including all
> images.[/color]

Last time I papered the living room, the wallpaper didn't come with new
family photos.
[color=blue]
> I have a set of images used as buttons - mostly for simple links
> rather than form input buttons.[/color]

You are using the wrong element type, i.e. not 'input' or 'button'.
Don't. Adjust the images folder or names with 'ln', 'mod_alias' or similar.
[color=blue]
> <a href="mypage.ph p?action=add&id =7"><img src="..." border="0"></a>[/color]

That ampersand is wrong there and "stylesheet s for everything" pretty
much forbids that 'border'.

How best to style images in links?

How best to style images in links?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment