If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div.

<div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;">                    
<asp:Image  ID="ProductThumbnail1" runat="server" Style="max-height: 50px;position:absolute;right:0px;top:0px;" />
</div>
<asp:Image  ID="Imagealt" runat="server" />

The purpose here is to dynamically set the background image of the div from the server-side code like so:

ProductThumbnail.Style.Add("BACKGROUND-IMAGE", "url(" + Item.ThumbnailUrl.Replace("~", "..") + ")");

The goal is to display alternate text in Imagealt if there is no background image for the div. If the background image exists, then hide Imagealt.

This functionality needs to be implemented using both server-side code and JavaScript.

Please refer to the example image below: https://i.sstatic.net/OrhdV.png

**On the left side, where the div image is missing, the alt text appears correctly. However, on the right side, even though the image is displayed, the alt text still shows up - which is incorrect.

I only want to show the alt text when the div background image is not displayed.**

1- No alt text should appear if an image is present.

2- Show alt text only when the image is not displayed.

For example:

If the URL path of the div's background image is set to:

http://meenaprints.in/Admin/images/productimg/thumbnail/436x636_4736.jpg

then the alt text should not be displayed as this URL retrieves an image.

However,

If the URL path of the div's background image is set to:

http://meenaprints.in/Admin/images/productimg/thumbnail/436x636_473123.jpg

which does not retrieve an image, then the ALT text should be displayed.

c#htmlcssasp.netimage

Answer №1

Have you considered checking for the existence of the product image and then displaying the appropriate images accordingly?

if (File.Exists(Server.MapPath("product.jpg")))
{
    ProductThumbnail1.Visible = true;
    Imagealt.Visible = false;
}
else
{
    ProductThumbnail1.Visible = false;
    Imagealt.Visible = true;
}

UPDATE

If you are looking for a solution similar to this, check out the code below:

<div id="imageContainer">
    <div id="altText">Alt text of image</div>
    <div id="imagePlaceHolder" style="display: none;">
        <img src="/test.png" onload="imageIsLoaded()" />
    </div>
</div>

<script type="text/javascript">
    function imageIsLoaded() {
        document.getElementById("altText").style.display = "none";
        //show the image
        document.getElementById("imagePlaceHolder").style.display = "block";
        //or set the image as background
        document.getElementById("imageContainer").style.background = "center center  no-repeat url('test.png')";
    }
</script>

Only when the image is loaded will imageIsLoaded be called, displaying the image and hiding the alt text.

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

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

Dapper is throwing an error message stating "Data too long for field."

I'm encountering an issue that states: String or binary data would be truncated. This error occurs when I execute the following line of code. Despite researching extensively, I haven't been able to pinpoint the cause. Most resources related to ...

c#asp.netsql-serverdapper

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

Tips on accessing the value of a dynamic field in an ASP ModalPopup

I am having trouble with my modalpopup extender. When the user clicks an 'Add' button, a dynamic textbox is created within the popup. However, I am struggling to get a reference to this textbox in the codebehind. Adding a 'textchanged' ...

c#asp.netajaxdynamicmodalpopupextender

What are the ways in which RFC 2854 renders RFC 1867 outdated and irrelevant?

What is the reasoning behind RFC 2854 "obsoleting" RFC 1867? My confusion may arise from a lack of familiarity with how to interpret RFCs, but it seems that RFC 1867 explains the process of file uploading in HTML forms, while RFC 2854 discusses a MIME typ ...

htmlrfc

Reveal Content once you give us a thumbs up on Facebook

Is there HTML/PHP code that can display specific content only after a user clicks the "Like" button on an external website, not an app? ...

phphtmlfacebookfacebook-like

Importing CSS and JavaScript files into a JSP page in Spring MVC

After adding a CSS file to my JSP file, I encountered an issue that prompted me to search for solutions. Despite trying the tutorial from the following link, it did not work for me: My project was created using Spring Tool Suite and here is my file struct ...

javacssspringjspspring-mvc

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

cssruby-on-railstwitter-bootstrap

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...

htmlms-wordconverters

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

javascriptjquerycsshighcharts

Maintain the open state of an Asp.net Ajax accordion panel after a post back

Utilizing the Ajax Accordion control on my Master Page during the Page_Load event, I want to set the SelectedIndex property of the Accordion control which has been defined in JavaScript. The issue arises as every time the Page_Load event occurs, the value ...

asp.netajaxaccordion

Extract the values of input controls in an HTML string

I have a C# code snippet like this: string str = "<input type=\"hidden\" id=\"taken\" value=\"BoboBobo\">\n<input type=\"hidden\" id=\"took\" value=\"BaboboBe\"" Is there a way to e ...

c#html

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui

Issue with display of Favicon in Google Chrome browser

My favicon is not appearing on my Chrome tab, even though I've checked multiple articles and confirmed that the code is correct. It does show up in Firefox, so I'm confused as to why it's not working in Chrome. I've cleared my cache and ...

htmlgoogle-chromefavicon

Unable to retrieve input value from dynamically-generated field with JQuery

There seems to be an issue with receiving a value from a static field when using the keyup method based on the input field class (.inputclass). Once a field is added dynamically, it does not get the value. Below is a sample code. Any help would be appreci ...

javascriptjqueryhtml

Locating the elusive sequence number within a document

Greetings, I am currently trying to locate a missing number within an xml file but seem to be encountering some challenges. Any suggestions or ideas would be greatly appreciated. Example The file contains an <a> tag with various ids such as page-1, ...

javascriptjqueryhtmlfindsequence

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

javascriptjquerycsswebfontsfittextjs

Customize the Header Background Color in React Table

I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...

cssreactjsreact-component

Email multiple recipients by using a listview feature

I am looking to retrieve users' email IDs from a listview based on a specific query. Once the emails are generated in the listview, I want to be able to send an email to all of those addresses when the send button is clicked. While I understand how t ...

asp.netvb.netlistview

What is the method for adjusting the width of a v-card based on its height?

I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width. To achieve this, I believe I need to make the width dependent on the height, although I am unsure ho ...

javascriptcssvue.jsvuetify.js