CSS - replace <a> link text with an image?

1,134 · September 26, 2003

Hi all,

I'm trying to write my web site as dynamically as possible. Currently, I'm using <ul> to make up my list of links like so:

&lt;ul id="menu"&gt;
 ?&lt;li id="News"&gt;
 ? ?&lt;a href="http://www.exit138.com" id="selected"&gt;News&lt;/a&gt;
 ?&lt;/li&gt;
&lt;/ul&gt;

I'm not going to write out the CSS I'm using, but it's typical decorative stuff.

So, let's say that I want one design to use text for the links, and another to use background images. I thought this would work:

#menu li#Photos a
{
	background:url(menu\Photos.jpg);
}

But it doesn:(t :(. It puts the background image in as well as the text. I'd like to know what I could do to just not draw the text, either using transparency or some other trick. Thanks.

Mike

September 26, 2003

You could try fudging it by making the text really small, with little or no spacing between letters... I don't think "display: none" would work because then you wouldn't get your background image...

1,134 · September 26, 2003

Tried both. Using a small font just made the area of the box I'm trying to use so small that the image was only 2 pixels high. display:none displayed...none :).

Mike

45,110 · September 26, 2003

So, um, I don't get your question. You want to have text rendered on page, but be invisible???

Why not just set the size of the box and put no text in?

1,134 · September 26, 2003

No, I want to use different styles with the same HTML. One style renders the text normally, the other uses the same HTML, but REPLACES the text with an image.

Mike

45,110 · September 26, 2003

CSS isn't there to do actions like "replace".

Maybe I'm still just not getting your problem, sorry :(

1,134 · September 26, 2003

OK:

http://www.csszengarden.com/?cssfile=041%2F041%2Ecss

vs.

http://www.csszengarden.com/?cssfile=020%2F020%2Ecss

Text is used on the top link for "Select a Design" and "Archives", and an image on the bottom link.

I want to do that with the text you use in a hyperlink <a>Replace me</a>

Mike

Edited September 26, 2003 by Starman

45,110 · September 26, 2003

Nah, you lost me totally. Sorry, my mind just ain't getting round this.

1,134 · September 26, 2003

Ok, then how about this:

You want to use Arial in one design, but Avant Garde in another.

How do you do that?

Use text in one design, and you HAVE to use an image in the other.

MIke

45,110 · September 26, 2003

Ok, you have 2 designs and want different styles for each?

1,182 · September 26, 2003

I'm not really sure what you're trying to do, but did you try color: transparent?

1,134 · September 26, 2003

I don't understand why it's so difficult for people to understand what I want to do.

I want to replace "Link" with an image so that with one CSS file it uses text, on another it uses an image. Very simple. Here's the code I'm working with:

&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;

#textonly
{
	font: 22px Arial;
	color:red;
}

#image
{
	z-index:2;
	color: black;
	background: url(rss2.jpg) no-repeat;
}

#image h3
{
            border: none;
            margin-top: 5px;
            margin-bottom: 10px;
            height: 30px;
}

#image h3 span
{
	display:none;
}

#links
{
	list-style-type: none;
	position:absolute;
	top:90px;
	left:10px;
	padding: 0;
	margin: 0;
	height: 22px;
}

#testlinkx
{
	display:none;
}

#href
{
	width:60;
	background: transparent url(rss2.jpg) no-repeat;
}

#testlinknotused a
{
	border: none;
	margin-top: 5px;
	margin-bottom: 10px;
	height: 30px;
}

#testlink span
{
}

#testlink2 a
{
	font: 22px Verdana;
	color:green;
	text-decoration:none;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;div id="textonly"&gt;
hello
&lt;/div&gt;

&lt;div id="image"&gt;
	&lt;h3 class="select"&gt;&lt;span&gt;image&lt;/span&gt;&lt;/h3&gt;
&lt;/div&gt;

&lt;ul id="links"&gt;
	&lt;li id="testlink"&gt;
  &lt;a id="href" href="test"&gt;&lt;span&gt;test&lt;/span&gt;&lt;/a&gt;
	&lt;/li&gt;
	&lt;li id="testlink2"&gt;
  &lt;a href="test"&gt;test2&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;/html&gt;

See how you can replace regular text with an image? I want to do that with the text of a hyperlink. Can it be done or not?

Mike

September 26, 2003

visibility: hidden?

#text{
visibility: hidden;
}
#link{
background:url("blah.jpg");
}

&lt;a href="link.html" id="link"&gt;&lt;span id="text"&gt;blah&lt;/span&gt;&lt;/a&gt;

1,182 · September 26, 2003

Starman said:
OK:
http://www.csszengarden.com/?cssfile=041%2F041%2Ecss

vs.

http://www.csszengarden.com/?cssfile=020%2F020%2Ecss

Text is used on the top link for "Select a Design" and "Archives", and an image on the bottom link.

I want to do that with the text you use in a hyperlink <a>Replace me</a>

Mike

Ok... the second link has text with an image background. That's what you want, only on links? Or... you want just an image and no text?

Basically, just an image as a link instead of text as a link? ...only you want to do it with css and not html?

You're not being clear at all. :/

1,134 · September 26, 2003

Nope, that doesn't work. It wipes out both the text and the image.

Mike

1,134 · September 26, 2003

Quote

See how you can replace regular text with an image? I want to do that with the text of a hyperlink. Can it be done or not?

Quote

Ok, then how about this:

You want to use Arial in one design, but Avant Garde in another.

How do you do that?

Use text in one design, and you HAVE to use an image in the other.

MIke

How is that not clear? Instead of TEXT I want an IMAGE. Yes, as a link.

Mike

September 26, 2003

Starman said:
Nope, that doesn't work. It wipes out both the text and the image.
Mike

:huh:? Works for me. Open this file and see if it works.

template.htmlFetching info...

1,134 · September 26, 2003

Sorry...my fault - someone on the network removed the .jpg I was using for the background image. It works. Thanks!!!!!!

Mike

Sign In

CSS - replace <a> link text with an image?

Question

Starman

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

pringlex

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

Destian

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

Oogle

Link to comment

Share on other sites

Destian

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

Oogle

Link to comment

Share on other sites

Starman

Link to comment

Share on other sites

Posts

Recent Achievements

Popular Contributors

Tell a friend