• 0

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

Asked by Starman,

 Share

Question

Mentor

Starman

Posted
Posted

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

17 answers to this question

Recommended Posts

  • 0
Mentor

Starman

Posted
  • Author
Posted (edited)

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 by Starman
  • 0
Mentor

Starman

Posted
  • Author
Posted

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

<a href="#">Link</a>

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

  • 0
Mentor

Destian

Posted
Posted
  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. :/

  • 0
Mentor

Starman

Posted
  • Author
Posted
  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

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • SteamOS falls to lowest adoption level in years as Steam on Linux use rises

      By Geezy · Posted

      It's significant growth for Linux considering the market share, so it could have had that effect I described.
    • Microsoft and Crowdstrike announce partnership on threat actor naming

      By pradeepviswav · Posted

      Microsoft and Crowdstrike announce partnership on threat actor naming by Pradeep Viswanathan Whenever a cyberattack is discovered, companies disclose it to the public and assign it a unique name based on their internal procedures. Unfortunately, this leads to inconsistencies, as each company has its own naming conventions. As a result, the same threat actor behind a cyberattack may end up with multiple names, causing delays and confusion in response efforts. For example, a threat actor that Microsoft refers to as Midnight Blizzard might be known as Cozy Bear, APT29, or UNC2452 by other security vendors. To address this issue, Microsoft and CrowdStrike are teaming up. These companies will align their individual threat actor taxonomies to help security professionals respond to cyberattacks with greater clarity and confidence. It’s important to note that Microsoft and CrowdStrike are not attempting to create a single naming standard. Instead, they are releasing a mapping that lists common threat actors tracked by both companies, matched according to their respective taxonomies. The mapping also includes corresponding aliases from each group’s naming system. You can view the joint threat actor mapping by Microsoft and CrowdStrike here. Although this threat actor taxonomy mapping is a joint effort between Microsoft and CrowdStrike, Google/Mandiant and Palo Alto Networks' Unit 42 are expected to contribute to this initiative in the future. Vasu Jakkal, Corporate Vice President of Microsoft Security, wrote the following about this collaboration with CrowdStrike: As more organizations join this initiative, the collective defense against cyber threats will undoubtedly be improved.
    • Google confirms more ads on your paid YouTube Premium Lite soon

      By Phillip0web · Posted

      Same here. Exact same software.
    • Google confirms more ads on your paid YouTube Premium Lite soon

      By Phillip0web · Posted

      You make no sense since most of the stuff on YouTube is free to begin with. Comparing Netflix to YouTube is not even remotely the same. YouTube has tons of free videos to begin with, unlike Netflix, you are paying Netflix for original style of programming.
    • Google confirms more ads on your paid YouTube Premium Lite soon

      By Phillip0web · Posted

      Youtube can go screw themselves. Never ever, ever will I pay for this BS nonsense. And I encourage anyone else not to either.

  • Recent Achievements

    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      172
    2. 2
      ATLien_0
      125
    3. 3
      snowy owl
      122
    4. 4
      Xenon
      116
    5. 5
      +Edouard
      93
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!