Question

这是我的html代码，其中我有一个div并且在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" />

我正在做的是我将服务器端的div BACKGROUND图像设置为代码

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

我想要的是，如果div背景图片网址没有显示任何图像，那么Imagealt会显示我从后端设置的替代文字，如果div背景图片网址在这种情况下显示图片Imagealt隐藏

我希望所有这些都在服务器端代码和javascript

上完成

Plaese评论下图

**在左侧div图像不存在所以图像alt文本显示正确但在右侧图像显示仍然向下alt文本即将出现

如果显示div背景图片，我不想显示替代文字**

1 - 如果图片没有替代文字

2 - 如果图像未显示，则显示替代文字

例如：

如果我的div背景图片网址路径设置为此网址

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

由于此URL正在检索图像

，因此不应该使用替换文字

但是

如果div背景图片网址路径设置为网址

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

不检索图像而不是ALT文本应该显示

Answer 1

为什么不检查产品图像是否存在并显示/隐藏相应的图像。

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

<强>更新

那么也许你正在寻找这样的东西？

<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>

只有在加载图像时才会调用imageIsLoaded，从而显示图像并隐藏替代文字。

不显示Div背景图像然后显示图像alt text

1 个答案: