输入标签内的链接

发布于 2024-11-28 12:40:14 字数 305 浏览 0 评论 0原文

如何在输入框（文本框）内显示 a href 和 img src。例如：我想将其显示在文本框内（ ），

<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>

提前致谢。

原文

How to display a a href and a img src inside a input box (text box). ex: i want to display this inside a text box ( <input id=link )

<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>

thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绮筵 2024-12-05 12:40:14

根据评论，我猜测您需要一个将该 HTML 代码作为默认文本的输入字段。您必须使用引号和小于/大于符号的字符参考代码。

<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />

（顺便说一句，您提到“就像在 Photobucket 中一样”——您只需查看该网站的 HTML 即可了解他们是如何做到这一点的。）

Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.

<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />

(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)

回复收藏 0 原文

枯叶蝶 2024-12-05 12:40:14

你有两个选择。

将图像作为输入的背景，但这将不可单击。
将元素绝对定位在输入上。

.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }

HTML

<div class="inputContainer">
    <input class="myInput" type="text" name="myInput" id="myInput" />
    <a href="#" class="inputImg"><img src="#" /></a>
</div>

CSS

.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ } 
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }

您需要根据输入大小、图像大小和一般位置来调整位置和值，但这应该可以满足您的要求。

You have two options.

Place the image as a background of the input, but this won't be clickable.
Absolutely position the element over an input.

.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }

HTML

<div class="inputContainer">
    <input class="myInput" type="text" name="myInput" id="myInput" />
    <a href="#" class="inputImg"><img src="#" /></a>
</div>

CSS

.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ } 
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }

You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.

回复收藏 0 原文