• 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

    • Trump announces a gold smartphone for $499 and new "T1 Mobile" 5G wireless service

      By notuptome2004 · Posted

      did you not read this line . The Trump Organization, spearheaded by President Trump's sons, Donald Trump Jr. and Eric Trump This by his sons Trump himself
    • PowerToys is getting a big Dashboard redesign

      By MulletMan69 · Posted

      Looks nicer, must have app (or collection of apps?) for me. FancyZones, find my mouse, colour picker, run (and new download app) are amazing.
    • Trump announces a gold smartphone for $499 and new "T1 Mobile" 5G wireless service

      By +sphbecker · Posted

      That is typically how his products go. They start off with a photoshopped image or slapped together pre-production sample. If they get enough orders, they make them, if they don't, they cancel and send refunds. Art of the deal, lol.
    • AMD Ryzen 9000, 8000, 7000 CPUs have a vulnerable TPM-Pluton, major firmware fix released

      By Chugworth · Posted

      The idea of an adversary saying "oh darn it, the keys are on a TPM chip so we can't get them" is probably too good to be true.
    • PowerToys is getting a big Dashboard redesign

      By TarasBuria · Posted

      PowerToys is getting a big Dashboard redesign by Taras Buria PowerToys currently has 28 utilities to enhance your user experience (the latest addition arrived in April). You can check out the list of all modules and quickly toggle them on or off on the dedicated Dashboard page that greets you each time you open PowerToys. However, with the increasing list of tools and their vast customizability, many may feel that the Dashboard is a bit undercooked and lacks more polish and useful features. If you think so, Microsoft has some good news for you. In a new PR on PowerToys' GitHub, Microsoft engineers agree that the Dashboard needs improvements, even though it worked fine in earlier days with fewer modules. The proposed solution for the overcrowded Dashboard is a redesigned variant, which looks more similar to the Windows 11 Settings app. With the suggested variant, you get much more from Dashboard: a quick link to the latest changelog, various warnings that need your attention (like conflicting shortcuts), an update button, Quick Launcher, shortcuts for your modules, and a list of available tools. A search box for modules and settings is also there to help you find stuff that you need. Here is how Niels Laute, a software engineer working on WinUI and PowerToys, describes the proposed redesign: Since PowerToys is an open-source project, other developers are welcome to contribute their ideas. One of those ideas is implementing SplitView so that you can open each module's settings without leaving the Dashboard page. Unfortunately, there is no information on when Microsoft will ship the redesigned Dashboard. While we wait for the June 2025 update, check out these three useful plugins for PowerToys Run. What other changes would you like Microsoft to add to PowerToys? Share your thoughts in the comments.

  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      636
    2. 2
      ATLien_0
      275
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      132
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!