Question

我有一个带链接的图片。如果出于某种原因，没有图像，我希望“图像”显示标题。我用PHP编写代码，这是我的代码行：

<a href='LINK.php?img=$id'><img src='$filename' alt='<h1>$username</h1>' width='500'></a>

它不起作用，如果$ username是jerry，输出是纯文本的“<h1>jerry></h1>”，没有标题。

我该如何解决这个问题？

Answer 1

您可以在输出html之前检查文件是否存在。

if(file_exists($filename)){ 

    echo "<img src='".$filename."' alt='".$username."' width='500' />";

}else{

    echo "<h1>".$username."</h1>";

}

如果您不想绑定PHP检查这些文件，您还可以使用onerror =“”事件来使用javascript为您修改此信息。

在头脑中包括这个;

<script>

    function switchImage(obj,un){ 

        obj.remove();

        document.getElementById("userImage").innerHTML = "<h1>" + un + "</h1>";

    }

</script>

对于链接/标题执行此操作：

echo "<a href='LINK.php?img=".$id."' id='userImage'><img onerror='switchImage(this,\"".$username."\");' src='".$filename."' alt='".$username."' width='500'></a>";

Answer 2

这是不可能的，这不是alt的用途。 Alt是“替代文本”的缩写。它是尚未加载图像时显示的文本。

此外，如果您希望这样做，您应该使用title属性。相同的规则，但是当您将鼠标悬停在它上面时显示的文字。

我认为您需要的解决方案是工具提示脚本。有很多可以找到的，很多不同的风格，所以找到你喜欢的并不难。

Answer 3

简单。检查PHP代码中是否存在该文件，并条件化呈现的标记。这假设图像位于运行PHP代码的同一服务器上。

$relUrlPath = str_replace($_SERVER['DOCUMENT_ROOT'], '', $filename);
if(file_exists( realpath("." . $relUrlPath) ))
   echo "<h1><img src='$filename' alt='$username' width='500'><h1>";
else
   echo "<h1>Jerry</h1>";

Answer 4

这就是你想要的：

<h1><a href='LINK.php?img=$id'><img src='$filename' alt='$username' width='500'></a></h1>

同样的效果，更好的SEO，更容易。

Answer 5

这是alt标签的本质;这是纯文本。

您可以将文字样式应用于该图像，它们将应用于其位置显示的任何文本。 e.g：

<a href='LINK.php?img=$id'><img src='$filename' class='headerimg' alt='$username' width='500'></a>

然后以h1方式获得CSS样式：

.headerimg {
   font-weight: bold;
   font-size: 120%;
   /* etc. */
}

Answer 6

如果您首先使用h1是正确的，即使正确加载图片，它也应该是h1：

<h1><a href=""><img src="" alt="" /></a></h1>

如果您使用h1不正确，例如你只使用它，因为它的默认CSS表示，你根本不应该使用h1。

不要滥用alt。如果您需要自定义属性™，请使用data-* attributes。

某些图片可能需要更复杂的替代文字。在这种情况下，您可以使用longdesc attribute。或者使用object element：

<object data="img.png" type="image/png">
  <!-- the alternative content goes here -->
  <h1>…</h1>
  <p>…</p>
</object>

标题为alt-tag（alt ='<h1> Test </h1>'）

6 个答案: