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

как отобразить 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>

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

6
html html5 xhtml

3 ответов

основываясь на комментариях, я бы предположил, что вы хотите поле ввода, которое имеет этот 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-код сайта, чтобы увидеть, как они это делают.)

4

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

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

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

3

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

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

0