• 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 dustojnikhummer · Posted

      I guess more Windows users are switching on their desktops/laptops than people buying new Steam Decks. I wouldn't be surprised. Deck doesn't have the mainstream appeal of other handhelds, usually people who would want one already have one. Glad to see Linux go up!
    • Windows 11's growth slowed down in May 2025

      By Epaminombas · Posted

      Any news about Windows and Microsoft always brings up crazy people saying; - Windows 11 is terrible, it destroys my hardware, it had sex with my wife, it told the FBI that I visit shemale sites, it collects my data where I get illegal anime. Never use Windows 11, go for Linux and it will never have sex with your wife.
    • QOwnNotes 25.6.0

      By Copernic · Posted

      QOwnNotes 25.6.0 by Razvan Serea QOwnNotes is a open source (GPL) plain-text file notepad with markdown support and todo list manager for GNU/Linux, Mac OS X and Windows, that (optionally) works together with the notes application of ownCloud (or Nextcloud). So you are able to write down your thoughts with QOwnNotes and edit or search for them later from your mobile device (like with CloudNotes) or the ownCloud web-service. The notes are stored as plain text files and you can sync them with your ownCloud sync client. Of course other software, like Dropbox, Syncthing, Seafile or BitTorrent Sync can be used too. Features: the notes folder can be freely chosen (multiple note folders can be used) sub-string searching of notes is possible and search results are highlighted in the notes application can be operated with customizable keyboard shortcuts external changes of note files are watched (notes or note list are reloaded) older versions of your notes can be restored from your ownCloud server trashed notes can be restored from your ownCloud server differences between current note and externally changed note are showed in a dialog markdown highlighting of notes and a markdown preview mode notes are getting their name from the first line of the note text (just like in the ownCloud notes web-application) and the note text files are automatically renamed, if the the first line changes compatible with the notes web-application of ownCloud and mobile ownCloud notes applications compatible with ownCloud's selective sync feature by supporting an unlimited amount of note folders with the ability to choose the respective folder on your server manage your ownCloud todo lists (ownCloud tasks or Tasks Plus / Calendar Plus) or use an other CalDAV server to sync your tasks to encryption of notes (AES-256 is built in or you can use custom encryption methods like Keybase.io (encryption-keybase.qml) or PGP (encryption-pgp.qml)) dark mode theme support theming support for the markdown syntax highlighting all panels can be placed wherever you want, they can even float or stack (fully dockable) support for freedesktop theme icons, you can use QOwnNotes with your native desktop icons and with your favorite dark desktop theme support for hierarchical note tagging and note subfolders support for sharing notes on your ownCloud server portable mode for carrying QOwnNotes around on USB sticks Evernote import QOwnNotes is available in many different languages like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish Changes in QOwnNotes 25.6.0: QOwnNotes now builds with with Botan 3, when built with the system Botan library (cmake build parameter -DBUILD_WITH_SYSTEM_BOTAN=ON), because of the end of life of Botan 2 (for #2786) Keep in mind that Botan 3 needs C++20, which causes issues on Qt5 QMake and Qt5 will still use the internal Botan 2 amalgamation Creating an amalgamation Botan 3 did work, but caused major issues with various build processes The filename in checksum files of the Qt6 AppImages in the releases on GitHub was fixed (for #3286) Download: QOwnNotes 25.6.0 | 37.3 MB (Open Source) Download: QOwnNotes for Other Operating Systems View: QOwnNotes Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Windows 11's growth slowed down in May 2025

      By tsupersonic · Posted

      There are lots of older PC's that are now going to be unsupported on W10, but for modern systems, you should be able to update to W11. Even so, there are ways to bypass the official hardware requirements as well as the MSA (which imo is the bigger annoyance). My only gripe with W11 is all the telemetry collection / bloatware - yes, it is a problem compared to W10 and Linux.
    • Tesla Cybertruck

      By +primortal · Posted

  • Recent Achievements

    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • One Month Later
      lilred1938 earned a badge
      One Month Later
    • Week One Done
      lilred1938 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      148
    2. 2
      Xenon
      132
    3. 3
      ATLien_0
      123
    4. 4
      +Edouard
      103
    5. 5
      snowy owl
      96
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!