如何最好地在链接中设置图像样式？ [英] How best to style images in links?
问题描述
我对CSS很不熟悉，但想要开发一种方法来使用样式表来处理一个
的Web应用程序，包括所有
图像。
我有一组用作按钮的图像 - 主要用于简单链接
而不是表格输入按钮。
< 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>
有什么方法可以做到这一点？定义链接或
图像的类？翻转并不是特别重要，但如果可以轻松实现
将是剥皮能力的一个很好的补充。
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.
推荐答案
Eli写道：
Eli wrote:
我对CSS很不熟悉，但想要开发一种通过使用样式表来整理所有内容的方法，包括所有
图像。
我有一组图像用作按钮 - 主要用于简单的链接
而不是形成输入按钮。
< 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>
有什么办法吗？定义链接或
图像的类？翻转并不是特别重要，但如果能够轻松实现
将是剥皮能力的一个很好的补充。
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.
如果你想改变图像悬停，你不应该在
html中设置它，而是在CSS中作为背景图像。你必须定义
< a>的宽度和高度。元素，并设置一个背景图像
为：链接和a：访问，另一个为：焦点，a：活跃和
a：悬停。对于< a>的'填充''元素你可以使用& nbsp;，
或透明图像。
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
现在播放：The Doors - Light My Fire
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星期六，2005年7月9日21:29:09 +0200，Els< el ********* @ tiscali.nl>写道：
On Sat, 9 Jul 2005 21:29:09 +0200, Els <el*********@tiscali.nl> wrote:
Eli写道：
Eli wrote:
我对CSS很不熟悉，但想要开发一种方法去皮肤使用样式表来处理Web应用程序，包括所有
图像。
我有一组用作按钮的图像 - 主要用于简单的链接
而不是表单输入按钮。 br />
< 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>
有什么办法吗？定义链接或
图像的类？翻转并不是特别重要，但如果轻松可行，
将是剥皮能力的一个很好的补充。
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.
如果你想让图像在悬停时改变，你就不应该不要在
html中设置它，而是在CSS中作为背景图像。你必须定义< a>的宽度和高度。元素，并设置一个背景图像
为：链接和a：访问，另一个为：焦点，a：活跃和
a：悬停。对于< a>的'填充''元素你可以使用& nbsp;，
或透明图像。
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"边界=" 0" alt ="添加">< / a>
a：link.b_add，a：visited.b_add {
background-image：url（ images / b_add.gif）;
身高：13px;
宽度：13px;
}
适用于IE但不适用于Firefox。此外，当我滚动链接时，我在IE中得到一个非常简短的沙漏图标
。
<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写道：
Els wrote:
Eli写道：
Eli wrote:
我对CSS很不熟悉，但想开发一种方法来浏览一个
Web应用程序使用样式表来处理所有事情，包括所有图像。
我有一组图像用作按钮 - 主要用于简单的链接
而不是表单输入按钮。
< 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>
有什么办法吗？定义链接或
图像的类？翻转并不是特别重要，但如果轻松可行，
将是剥皮能力的一个很好的补充。
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.
如果你想让图像在悬停时改变，你就不应该不要在
html中设置它，而是在CSS中作为背景图像。你必须定义< a>的宽度和高度。元素，并设置一个背景图像
为：链接和a：访问，另一个为：焦点，a：活跃和
a：悬停。对于< a>的'填充''元素你可以使用& nbsp;，
或透明图像。
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.
或者更好的是，使用相应的链接文本（你唯一使用的）对于图像的
alt属性 - 您在示例中省略了以保持
行简短;）然后在网上搜索图像替换技术
通过CSS删除文本。
甚至更好：不要使用链接进行导致更改的操作
服务器（DB或者什么）。这就是POST请求应该做的事情。一个
GET请求不应该改变服务器上的状态。阅读例如
http：//www.cs .tut.fi / ~jkorpela / forms / methods.html 了解更多关于这个
主题的信息。
-
Benjamin Niemann
电子邮件：粉红色at odahoda dot de
WWW： http://www.odahoda.de/
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/
这篇关于如何最好地在链接中设置图像样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
