swap out image button for text hyperlink

Is there a way to use CSS to replace the image button in this code with a text link? This is a CRM system where the HTML page cannot be edited, only the stylesheet. The new file would have the same name as the original image. 

<table class="MoreButTable">
    <tbody>
        <tr>
            <td>
                <a onmouseout="AndarButtonMouseOut('MoreButton');window.status='';return true;" onmouseover="AndarButtonMouseOver('MoreButton','../Style/SubtleButtons/AgencySearchOver.gif');window.status='&lt;p&gt;&nbsp;&lt;/p&gt;';return true;" href="javascript:WasItClicked=true; document.forms['Designation'].NavigationButton.value='More';document.forms['Designation'].submit();">
                    <img title="&lt;p&gt;&nbsp;&lt;/p&gt;" alt="&lt;p&gt;&nbsp;&lt;/p&gt;" name="MoreButton" src="../Style/SubtleButtons/AgencySearch.gif">
                </a>
            </td>
        </tr>
    </tbody>
</table>
htmlcssimage

Answer №1

If you are able to specifically target the link using CSS, then it is possible to do so.

To achieve this, hide the image and utilize a pseudo-element on the link.

a [name="MoreButton"] {
  display: none;
}
a::before {
  content: 'You can see me but not the image';
  display: inline-block;
}
<a href="#1">
  <img title="Title" alt="ALt Text" name="MoreButton" src="http://www.fillmurray.com/140/100" />
</a>

Answer №2

Achieving this is definitely possible by using a pseudo selector:

a img {
  display: none;
}
a:before {
  content: 'Click me';
  cursor: pointer;
  display: block;
}
<a href="#">
  <img src="http://placehold.it/350x150" />
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

Issue Encountered While Attempting to Show a Div Element within a Function

Check out this HTML code snippet: <div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center">Step 1</div> And here is the corresponding Script: function onStepClicked() { var elem = document.getElementById(&apo ...

javascripthtmlfunctiononclick

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

Storing information in the concealed and interactive tabs within a tabview system

In my program, users are able to access groups through a left column list, similar to how Google Groups are displayed (seen in the image below). I would like the front-end to cache visited groups as users switch between them, so that when they revisit a g ...

javascriptjqueryhtmlcachingoptimization

Creating a multi-line graph with phpGraphlib is a breeze!

I've managed to generate a line graph using phpGraphlib, but now I'm stumped on how to create a multiline graph with this library. The x-y values are stored in arrays here. Here's my code: <?php include("phpgraphlib.php"); $graph ...

phphtmlphpgraphlib

A clever way to transfer data between HTML and Java classes

I have recently built a HTML form with multiple fields for adding new items to a list. Here is a snippet of the code: <form v-on:submit.prevent="addItem" class="mt-3"> <div class="container"> <div class="input-field"> <div ...

javahtml

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

javascripthtmlcssbootstrap-4

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

What is the best way to create a code block with a specific width in mind?

I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain. What I really want is for the co ...

htmlcsswidthinlinestyling

Troubleshooting problem with altering color of the "j" character in webkit

It's really strange and kind of frustrating. I wanted to change the color of a link, which should be simple enough, right? Wrong. Chrome won't budge when it comes to changing just 2 pixels of color on the "j" character when I hover over it. Safar ...

htmlcssgoogle-chromesafariwebkit

Swift: NSAttributeString generates unexpected HTML output

I attempted to use NSAttributeString to parse HTML, but encountered a problem when trying to display a table within a list item. <ol> <li>first <table> <tbody> <tr> ...

htmliosswiftmobile

Populating a read-only field with information from a database upon selecting an option

My goal is to select a name from an option field and then display the user's ID in a non-editable field. Essentially, when I choose a username, I want to automatically show their user ID. Below is the PHP and HTML code I currently have: <form id=" ...

phphtmlsql

Pressing one button triggers different actions with each click

<script> function one() { // code for function one } function two() { // code for function two } </script> <button onclick="one(); two()">Click Me</button> This will execute both functions simultaneously. I am looking to fi ...

javascripthtml

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

javascriptjqueryhtmlcssbootstrap-4

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

cssreactjsanimationslider

Conceal a Component within an Embedded Frame

Hey there! I've been attempting to hide a header within an iframe, but it seems like my code isn't doing the trick. Could someone take a look and help me diagnose why the header is still visible? Thanks in advance! <iframe id="booking_iframe" ...

javascriptjqueryhtmlcssiframe

"The space between the header-main section and the main-footer section is pure white

I'm facing an issue with the white space between the header-main and main-footer sections. I would like to either match their color to the rest of the website or completely remove the space. The color I want to use is #fefcf5. I hope this edited versi ...

htmlcss

What could be causing my Bootstrap (3) grid to not display responsively?

It seems like there may be a simple oversight in my code, as I'm unable to make my Bootstrap grid responsive. I have successfully passed item data through Node and am able to display a grid of item thumbnails with captions in rows of 4. However, when ...

cssnode.jstwitter-bootstrapexpresstwitter-bootstrap-3

Steps to create spaces between the bootstrap cards

Just diving into Bootstrap and attempting to incorporate images as cards, I encountered a challenge where the cards were piling up one after another without any spaces between them. Below is the code snippet utilizing Bootstrap4: <body> <div class ...

csstwitter-bootstrapbootstrap-4

Understanding CSS and the implementation of media queries

Imagine having this scenario /* css for elements section #1 in page css for elements section #2 in page */ @media screen and (max-width: 960px) { /* redefines/alters CSS for elements in section #1 in page */ } @media screen and (max-width: 700px) { /* r ...

cssmedia-queries