2

イメージタグ<img src="path_to_file.png">はあるのですが、携帯サイトではイメージタグをリンクに変換したいです。だから私は img を href に変換したい:

<a href="path_to_file.png" target="_blank">Click here to open in new tab</a>

私はphp domを使い始めています。リストされているすべての属性を取得できました。

$newdocument = new DOMDocument();
$newdocument->loadHTML();
$getimagetag = $doc->getElementsByTagName('img');
foreach($getimagetag as $tag) {
    echo $src=$tag->getAttribute('src');
}

しかし、どのように src 属性を取得し、高さや長さなどの他のパラメーターが含まれているため img タグを完全に削除してから、リンクの新しいタグを作成するにはどうすればよいでしょうか?

こんにちは皆さん、次のコードを使用して php dom から実行できます

$input="<img src='path_to_file.png' height='50'>";
    $doc = new DOMDocument();
    $doc->loadHTML($input);
    $imageTags = $doc->getElementsByTagName('img');
    foreach($imageTags as $tag) {
        $src=$tag->getAttribute('src'); 
        $a=$doc->createElement('a','click here to open in new tab');
        $a->setAttribute('href',$src);
        $a->setAttribute('style','color:red;');
        $tag->parentNode->replaceChild($a,$tag);
        } 
        $input=$doc->saveHTML();
echo $input;

create 要素を使用して、<a></a>Click...new tab などの間にテキストを配置することもできます。

replacechild は、$tag を削除imgしてタグに置き換えるために使用されaます。属性を設定することで、スタイル、ターゲットなどの他のパラメーターを追加できます。

最後にphp domを使用しました。これは、mysqlから取得したデータのみを変換し、Webサイトのロゴなどの他の要素は変換したくないためです。もちろんjavascriptでも可能です。

ありがとう

@dave chen は、javascript の方法と、モバイル リンクの検出を指しています。

答えを教えてくれた@nate。

4

2 に答える 2

3

phpQuery を使用してください。jqueryを使うのと同じです！:) https://code.google.com/p/phpquery/

于 2013-07-28T17:08:14.757 に答える
2

JavaScript でこれを行うことをお勧めします。

<!DOCTYPE html>
<html>
<head>
    <title>Images Test</title>
    <script>
        window.onload = changeImages;

        function changeImages() {
            var images = document.getElementsByTagName("img");

            while (images.length > 0) {
                var imageLink       = document.createElement("a");
                imageLink.href      = images[0].src;
                imageLink.innerHTML = "Click here to view " + images[0].title;
                images[0].parentNode.replaceChild(imageLink, images[0]);
            }
        }
    </script>
</head>
<body>
    Here is a image of flowers  : <img src="images/flowers.bmp"   title="Flowers"  ><br>
    Here is a image of lakes    : <img src="images/lakes.bmp"     title="Lakes"    ><br>
    Here is a image of computers: <img src="images/computers.bmp" title="Computers"><br>
</body>
</html>

例

于 2013-07-28T17:29:36.980 に答える