473,322 Members | 1,806 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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.php?action=add&id=7"><img src="..." border="0"></a>
<a href="mypage.php?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.

Jul 21 '05 #1
14 4803
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.php?action=add&id=7"><img src="..." border="0"></a>
<a href="mypage.php?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
Jul 21 '05 #2
Eli
On Sat, 9 Jul 2005 21:29:09 +0200, Els <el*********@tiscali.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.php?action=add&id=7"><img src="..." border="0"></a>
<a href="mypage.php?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.php?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.

Jul 21 '05 #3
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.php?action=add&id=7"><img src="..." border="0"></a>
<a href="mypage.php?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/
Jul 21 '05 #4
Els
Eli wrote:
<a class="b_add" href="mypage.php?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
Jul 21 '05 #5
Eli
On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.de>
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.

Jul 21 '05 #6
Eli
On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.de>
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.

Jul 21 '05 #7

"Eli" <no@one.com> wrote in message
news:1v********************************@4ax.com...
On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.de>
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.
Jul 21 '05 #8
Eli wrote:
On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.de>
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/
Jul 21 '05 #9
Eli wrote:
On Sat, 09 Jul 2005 14:23:25 -0600, Eli <no@one.com> wrote:
On Sat, 09 Jul 2005 22:09:22 +0200, Benjamin Niemann <pi**@odahoda.de>
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/
Jul 21 '05 #10
Eli
On Sun, 10 Jul 2005 12:06:06 +0200, Benjamin Niemann <pi**@odahoda.de>
wrote:
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'.


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

Jul 21 '05 #11
Eli
On Sun, 10 Jul 2005 08:20:10 GMT, "Seefor" <in*****@email.address>
wrote:
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.


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.

Jul 21 '05 #12
Eli
On Sun, 10 Jul 2005 12:08:40 +0200, Benjamin Niemann <pi**@odahoda.de>
wrote:
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.


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.

Jul 21 '05 #13
Eli wrote:

I'm now playing with the FIR technique


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=ScreenreaderVisibility>

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.
Jul 21 '05 #14
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.
Last time I papered the living room, the wallpaper didn't come with new
family photos.
I have a set of images used as buttons - mostly for simple links
rather than form input buttons.
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.
<a href="mypage.php?action=add&id=7"><img src="..." border="0"></a>


That ampersand is wrong there and "stylesheets for everything" pretty
much forbids that 'border'.
Jul 21 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Monty | last post by:
I've been searching for guidance on which of the approaches used for skipping repetive links (e.g., link as normal text, link as alt text on invisible image, link with same forground and background...
131
by: Peter Foti | last post by:
Simple question... which is better to use for defining font sizes and why? px and em seem to be the leading candidates. I know what the general answer is going to be, but I'm hoping to ultimately...
145
by: Mark Johnson | last post by:
Oddly enough, I found it difficult, using Google, to find a list of best-of sites based on the quality of their css packages. So I'd ask. Does anyone know of particularly good sites which are in...
2
by: JR | last post by:
Hi. I have a CGI script that will need to call itself an unknown number of times, to add rows, run queries, etc. At the bottom of the output that is produced by the script, there are four...
12
by: lawrence | last post by:
The following function correctly makes everything invisible but then fails to turn the one chosen DIV back to visible. I imagine I'm getting the syntax of the variable wrong? I've tried this with...
4
by: lawrence | last post by:
Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) {...
14
by: Rudy | last post by:
Hello all! I been trying to get a handle with Images. I have learned alot from the fine people here. So, I also learned that thumbnail images look terrible taken from a digital cam. I know why...
7
by: Rhino | last post by:
I thought I'd take a second to step away from a specific problem and ask a general question about best practices; I know some of the people here are very experienced with CSS. Given the need to...
2
by: mikeoley | last post by:
Ok I have a Javascript slideshow working. Every image is linked to a another page in the site. Problem is...The link wont refresh to the next link once the second images rollovers in the slideshow....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.