Causes for the display of the text within the alt attribute

Recently, I attempted to view an HTML page in text browsers and noticed that the alt attribute value of the img tag was visible. I decided to omit the alt attribute and instead utilized CSS:

.headerImg:after, .headerImg::after
        { 
            content:" (the alternative)"; 
        }

My aim was for the text to be visible in modern browsers. Can you suggest how I can achieve this? Additionally, aside from being stored in a different path, what are some other reasons why an image may fail to display?

htmlcssbrowseralt

Answer №1

Text-only browsers typically do not have strong support for CSS. While they may be able to interpret some aspects of CSS, particularly those related to text formatting, the majority of CSS features are not meaningful in a text-based environment, so developers did not prioritize implementing them. (To see this in action, try experimenting with basic CSS code that is widely supported in visual browsers, such as text-transform: uppercase).

The purpose of the alt attribute is to provide a text-based alternative for an image when the image itself cannot be displayed. This scenario commonly occurs in browsers that do not recognize CSS (like text browsers or screen readers) or in browsers that override the author's CSS rules (such as a visual browser configured for a specific type of visual impairment). Therefore, using CSS instead of the alt attribute does not serve a practical purpose.

Answer №2

It seems like there may have been some confusion with the question. To display the alt value after an image loads, you can utilize the following code:

.headerImg:after { 
    content: attr(alt) 
}

If you want to update the alt value for an image using jQuery, you can do so like this:

$('#image1').attr({
  alt: 'New description',
  title: 'New description'
});

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

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

phpjqueryhtmlmysqlajax

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

javascriptandroidhtmlhighchartscordova

What could be the reason behind the unexpected behavior of my Bootstrap 3 carousel?

I'm attempting to replicate this visual effect in my own carousel, featuring semi-transparent images on the left and right sides. However, I'm encountering a negative result with my project when transitioning between slides at : here. This is th ...

javascripthtmlcsstwitter-bootstrap-3bootstrap-carousel

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg

Escape sequences do not seem to be functioning properly when using innerHTML

I am facing an issue where a string containing HTML escape characters (such as < and >) needs to be rendered inside a div using innerHTML. The intention is for the escaped characters to appear as text rather than as actual HTML, but they still render ...

javascripthtml

The URL in a request is altered prior to execution

I am encountering an issue with my NodeJS application where it automatically appends my domain to the URL set in my http request. How can I prevent this from happening? I have tried to search for similar problems but have not found any relevant solutions. ...

javascriptajaxnode.jsbrowser

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui

Struggling to implement touch event functionality for CSS3 spotlight effect

I'm experimenting with implementing touch events on an iPad to achieve a certain effect. Currently, I have it working smoothly with mouse events on JSFiddle at this link: http://jsfiddle.net/FwsV4/1/ However, my attempts to replicate the same effect ...

javascriptjquerycsstouch

Resounding achievement following the completion of the upload

I'm looking to display the message "success" on the same page as my form if it uploads correctly. I am new to PHP and not sure how to achieve this. Can anyone help? index.php <form action="upload" method="POST"> <input name="field1 ...

phphtml

Div remains fixed while scrolling until the footer is reached

Hi there, I could really use some assistance with a jQuery issue I'm facing. I've been watching tutorials in an attempt to find a solution, but being new to jQuery, I'm struggling. My goal is to scroll a fixed div down the page, however when ...

jqueryhtmlscrollfixed

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Starting with HTML5 can be a bit overwhelming, especially when it comes to compatibility with older systems

I am intrigued by the vast array of new possibilities available, but I find myself lacking in knowledge when it comes to Html5. One way to minimize the usage of IE6 and propel us into a more advanced era is to fully embrace new technologies like HTML5. Ho ...

htmlcompatibility

Enhancing Image Quality in JavaFx's Scene Builder

Hey everyone! I've been using JavaFx scene builder to create a user interface with some png images. Up to now, I've been using labels and enlarging them to display the pictures, but this solution isn't ideal because I need to create multipl ...

javacssjavafxscenebuilder

Display a single button on hover in Angular 2+ framework

I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want the 'Edit' button to show u ...

javascripthtmlcssangular

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

htmlcsscss-position

What is causing this regular expression to not find any matches in the VSCode search and replace function?

Currently utilizing VSCode for my code editing needs. https://i.sstatic.net/49OmA.png Displayed below is a screenshot illustrating the search options I have chosen: https://i.sstatic.net/ILcNv.png The regex expression I'm attempting to use functio ...

cssregexvisual-studio-codehtml-email

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

cssnode.jsarraysnext.jstailwind-css

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

I have a group of connected span elements with the class tag from bootstrap v4. Because they are generated from a react.js array of JSX elements, they sit adjacent to each other without any spacing between them: <span class="tag tag-primary">text< ...

csscss-selectorspseudo-elementcss-content

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...

javascripthtmlwebdragbootstrap-5