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. 14 4803
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 ,
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
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 , 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.
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 , 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/
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
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.
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.
"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.
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/
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/
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?
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.
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.
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.
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'. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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...
|
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...
|
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...
|
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...
|
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) {...
|
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...
|
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...
|
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....
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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)...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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....
|
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
| |