如何将链接文本更改为 HTML 中的图像
[英]How can I change a link text to image in HTML
问题描述
我是一个 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 个解决方案
解决方案1
5 2020-03-16 18:54:15
看起来这就是图片的网址：
data.data[i].img
您在此处添加为文本：
html_view = html_view + '<td>'+data.data[i].img+'</td>';
按照您使用的相同编码样式，您可以轻松地将其包装在<a>和<img>等 HTML 标签中。 例如：
html_view = html_view + '<td><a href="'+data.data[i].img+'"><img src="'+data.data[i].img+'"/></a></td>';
解决方案2
1 已采纳 2020-03-16 18:56:05
只需将图像 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>
解决方案3
0 2020-03-16 18:57:04
只需使用<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>
当用户在编辑后单击链接时，如何从HTML文本字段捕获更改事件？
[英]How can I catch a change event from an HTML text field when a user clicks on a link after editing?
如何替换HTML标记中的文本，而不替换href链接中的文本？
[英]How can I replace the text in an HTML tag but not in an href link?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.