• 0

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


Question

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

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

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
  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
  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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • The development time of this Operating System will have competition with the development time of Star Citizen 😂
    • I saw the 300 in the image and thought it was the number of cores! 🤣
    • Threads is getting a feature Reddit has had for nearly a decade by David Uzondu Back in January, reverse engineer Alessandro Paluzzi (@alex193a) first uncovered that Threads was working on spoiler tags. Now, Meta CEO Mark Zuckerberg (@zuck) has made it official: the feature is in testing. It is a straightforward tool for hiding content, especially text, behind a block that you have to click to reveal, perfect for discussing the ending of your favorite show without ruining the experience for others. It is also, notably, a feature that Reddit has had since January 2017. https://www.threads.com/@zuck/post/DK-BydcJHkF For a platform aiming to be a town square for public discourse, not having a native way to handle spoilers is a small but noticeable handicap for communities focused on pop culture. In a press release, Meta told TechCrunch that popular shows like The Last of Us trended heavily on the app, which the company frames as a sign of a "growing community of entertainment and pop culture enthusiasts." The new feature also supports images so that you can hide shocking visuals or text-filled screenshots. From the images Meta shared, it seems to work just as Paluzzi uncovered months ago. Users with access to the test can highlight text in the composer, and a "mark spoiler" option will appear in a small menu. This method is purely button-based, unlike on Reddit, where users have the option of either using a similar editor button or manually typing out the markdown command >!like this!< to hide their text. This update does not exist in a vacuum. After several months of feeling incomplete, the platform has been getting features that users have actually been asking for. We have seen this with the recent DMs feature, also in testing, which finally gives people a way to have private chats without jumping over to other platforms like Instagram.
    • The cars are on the road in multiple cities and about to launch in the UK early next year. Robotaxi is yet to be seen on the streets of any city. Nobody here has mentioned violence. That's all in your head. Have you thought about talking to somebody about it?
    • I don't get why this company needs to change sockets every 2 generations, I really don't. If AMD can deliver a superior product both in terms of performance and energy consumption on the same socket for multiple generations, why can't Intel? I don't like to wear the tinfoil hat, but come on, this stinks of backroom deals with motherboard manufacturers? New socket = new motherboards = more sales.
  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      656
    2. 2
      ATLien_0
      272
    3. 3
      +FloatingFatMan
      176
    4. 4
      Michael Scrip
      157
    5. 5
      Steven P.
      136
  • Tell a friend

    Love Neowin? Tell a friend!