Ссылка внутри тега ввода

Question

Как отобразить a href и img src внутри поля ввода (текстовое поле).например: я хочу отобразить это внутри текстового поля (<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>

заранее спасибо.

Answer 1

Исходя из комментариев, я бы предположил, что вам нужно поле ввода, содержащее этот HTML-код в качестве текста по умолчанию.Вы должны использовать символьные коды для кавычек и меньше / больше, чем знаки.

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

(Кстати, вы упомянули «как в Photobucket» - вы можете просто посмотреть HTML-код сайта, чтобы увидеть, как онисделай это.)

Answer 2

У вас есть два варианта.

1. Поместите изображение в качестве фона для ввода, но оно не будет активным.
2. Абсолютно расположите элемент над входом.

1

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

2

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; }

Вам нужно будет поиграть с позицией и значениями в зависимости от вашего размера ввода, размера изображения и общего размещения, но это должно делать то, что вы хотите.

Answer 3

Как отмечается в комментариях, вы не можете буквально поместить ссылку в текстовое поле input (хотя вы можете смоделировать ее с помощью JavaScript).

Для фонового изображения используйте CSS background-image.