Как я могу изменить текст ссылки на изображение в HTML - PullRequest
Новая
       5

Как я могу изменить текст ссылки на изображение в HTML

4 голосов
/ 16 марта 2020

Я - HTML новичок, и у меня возникла проблема, поэтому у меня есть эта веб-страница, которая в основном представляет собой Json базу веб-данных, здесь - изображение веб-страницы. Это не просто таблица, заполненная данными. Моя проблема в том, как сделать так, чтобы ссылки, которые вы видите в таблице, отображались в виде изображений, а не текстовых ссылок.

Вот код для этой страницы. 

<!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>

Ответы [ 3 ]

5 голосов
/ 16 марта 2020

Похоже, что это именно URL-адрес изображения: 

data.data[i].img

, который вы добавляете здесь как текст: 

html_view = html_view + '<td>'+data.data[i].img+'</td>';

Следуя тому же стилю кодирования, который вы используете, Вы можете так же легко обернуть его в теги HTML, как <a> и <img>. Например: 

html_view = html_view + '<td><a href="'+data.data[i].img+'"><img src="'+data.data[i].img+'"/></a></td>';
1 голос
/ 16 марта 2020

Просто добавьте URL-адрес изображения в тег 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>
0 голосов
/ 16 марта 2020

Просто используйте <img src="image_url"> тег. 

html_view = html_view + '<td><img src="' + data.data[i].img + '"></td>';

Например: 

$(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><img 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);
                }
            });
        });
<!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>
</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>
...