0

我有一张带链接的图片。如果由于某种原因没有图像，我希望“图像”显示标题。我在 PHP 中对此进行编码，这是我的代码行：

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

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

我该如何解决这个问题？

4

6 回答 6

3

您可以在输出 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>";
于 2013-09-27T18:57:08.307 回答
1

这就是你想要的：

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

同样的效果，更好的搜索引擎优化，更容易。

于 2013-09-27T19:11:53.203 回答
1

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

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

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

于 2013-09-27T18:57:00.747 回答
1

简单的。检查文件是否存在于 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>";
于 2013-09-27T18:57:23.207 回答
0

这就是 alt 标签的本质；它是纯文本的。

您可以将文本样式应用于该图像，它们将应用于显示在其位置的任何文本。例如：

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

然后让你的 CSS 样式h1流行起来：

.headerimg {
   font-weight: bold;
   font-size: 120%;
   /* etc. */
}
于 2013-09-27T18:58:11.857 回答
0

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

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

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

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

某些图像可能需要更复杂的替代文本。在这种情况下，您可以使用longdesc属性。或者使用object元素：

<object data="img.png" type="image/png">
  <!-- the alternative content goes here -->
  <h1>…&lt;/h1>
  <p>…&lt;/p>
</object>
于 2013-09-27T21:25:46.033 回答