如何将链接文本更改为HTML图像

debugcn 发表于 Dev

IssaCoder

我是HTML初学者，但遇到了问题，因此我拥有的该网页基本上是Json Web数据库，这是该网页的图像。它只是一张装满数据的表而已。我的问题是如何使您在表格中看到的链接显示为图像而不是文本链接。

这是此页面的代码。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>Get Levels</title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            background: #71e2c5;
        }

        td,
        th {
            border: 5px solid #ffc300;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #4CAF50;
            color: black;
        }

        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            text-align: center;
        }
    </style>
    <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
    </script>
    <script type='text/javascript'>
        //<![CDATA[
        $(function() {
            var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
            var ids = 0;
            var data_src = '';
            $.ajax({
                url: uri,
                type: 'GET',
                data: '',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function(data, textStatus, jqXHR) {
                    var jsonStr = JSON.stringify(data.data);
                    var html_view = '<table><tr>';
                    html_view = html_view + '<th>Level ID</th>';
                    html_view = html_view + '<th>Level Image</th>';
                    html_view = html_view + '<th>Word 1</th>';
                    html_view = html_view + '<th>Word 2</th>';
                    html_view = html_view + '<th>Word 3</th>';
                    html_view = html_view + '<th>Word 4</th>';
                    html_view = html_view + '</tr>';
                    for (var i = 0; i < data.data.length; i++) {
                        html_view = html_view + '<tr>';
                        html_view = html_view + '<td>' + data.data[i].id + '</td>';
                        html_view = html_view + '<td>' + data.data[i].img + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
                        html_view = html_view + '</tr>';
                    }
                    html_view = html_view + '</table>';
                    $('#data_view').html(html_view);
                }
            });
        });
        //]]>
    </script>
</head>

<body style="background-image: url('background.jpg');">
    <center><img width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></center>
    <b><font size="6" face="Comic Sans MS" color="#50bfda"><center><a>Game Levels Web Data Base</a></center></font></b>
    <br>
    <div id='data_view'>
        Loading Data , Please wait ....
    </div>
    <br>
    <br>
    <div id='data_str'>
        <br>
    </div>
    </br>
    <div class='footer'>
    </div>
</body>

</html>

萨吉布·阿罕默德（Sajeeb Ahamed）

只需将图片网址添加到img标签即可。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>Get Levels</title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            background: #71e2c5;
        }

        td,
        th {
            border: 5px solid #ffc300;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #4CAF50;
            color: black;
        }

        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            text-align: center;
        }
    </style>
    <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
    </script>
    <script type='text/javascript'>//<![CDATA[
        $(function () {
            var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
            var ids = 0;
            var data_src = '';
            $.ajax(
                {
                    url: uri,
                    type: 'GET',
                    data: '',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        var jsonStr = JSON.stringify(data.data);
                        var html_view = '<table><tr>';
                        html_view = html_view + '<th>Level ID</th>';
                        html_view = html_view + '<th>Level Image</th>';
                        html_view = html_view + '<th>Word 1</th>';
                        html_view = html_view + '<th>Word 2</th>';
                        html_view = html_view + '<th>Word 3</th>';
                        html_view = html_view + '<th>Word 4</th>';
                        html_view = html_view + '</tr>';
                        for (var i = 0; i < data.data.length; i++) {
                            html_view = html_view + '<tr>';
                            html_view = html_view + '<td>' + data.data[i].id + '</td>';
                            // Here it is
                            html_view = html_view + '<td><img width="50" src="' + data.data[i].img + '"/></td>';
                            html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
                            html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
                            html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
                            html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
                            html_view = html_view + '</tr>';
                        }
                        html_view = html_view + '</table>';
                        $('#data_view').html(html_view);
                    }
                });
        });
        //]]></script>
</head>

<body style="background-image: url('background.jpg');">
    <center><img width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></center>
    <b>
        <font size="6" face="Comic Sans MS" color="#50bfda">
            <center><a>Game Levels Web Data Base</a></center>
        </font>
    </b>
    <br>
    <div id='data_view'>
        Loading Data , Please wait ....
    </div>
    <br>
    <br>
    <div id='data_str'>
        <br>
    </div>
    </br>
    <div class='footer'>
    </div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。