進入alt標簽（alt =&#39; <h1> 測試 </h1> &#39;）

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標簽的本質； 它是純文本。

您可以將文本樣式應用於該圖像，它們將應用於在其位置顯示的任何文本。 例如：

<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 。 如果您的stuff™需要自定義屬性，請使用data-*屬性 。

一些圖像可能需要更復雜的替代文本。 在這種情況下，您可以使用longdesc屬性 。 或者使用object元素 ：

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