How best to style images in links?

[Eli]

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.

[Els]

Eli wrote:

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.

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 &nbsp;,
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]

On Sat, 9 Jul 2005 21:29:09 +0200, Els <el*********@ti scali.nl> wrote:

Eli wrote:

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.

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 &nbsp;,
or a transparent image.

<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]

Els wrote:

Eli wrote:

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.

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 &nbsp;,
or a transparent image.

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]

Eli wrote:

<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.
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)
Also, I get a very brief hourglass icon
in IE when I roll over the link.

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]

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.d e>
wrote:

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.
I don't like the idea of what that looks like if the images fail to
load for whatever reason - the user
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.

I didn't write the server.

[Eli]

On Sat, 09 Jul 2005 14:23:25 -0600, Eli <[e-mail]> wrote:

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.d e>
wrote:

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.

I don't like the idea of what that looks like if the images fail to
load for whatever reason - the user

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.

I didn't write the server.

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]

"Eli" <[e-mail]> wrote in message
news:1v******** *************** *********@4ax.c om...

On Sat, 09 Jul 2005 14:23:25 -0600, Eli <[e-mail]> wrote:

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.d e>
wrote:

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.

I don't like the idea of what that looks like if the images fail to
load for whatever reason - the user

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.

I didn't write the server.

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.

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

[Benjamin Niemann]

Eli wrote:

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.d e>
wrote:

[snip]

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.

I didn't write the server.

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]

Eli wrote:

On Sat, 09 Jul 2005 14:23:25 -0600, Eli <[e-mail]> wrote:

On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.d e>
wrote:

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.

I don't like the idea of what that looks like if the images fail to
load for whatever reason - the user

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.

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/