Enlace dentro de la etiqueta de entrada

Question

Cómo mostrar un a href y un img src dentro de un cuadro de entrada (cuadro de texto). por ejemplo: Quiero mostrar esto dentro de un cuadro de texto (<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> 

gracias de antemano.

Answer 1

Según los comentarios, supongo que desea un campo de entrada que tenga ese código HTML como texto predeterminado. Debe usar códigos de referencia de caracteres para las comillas y menos/más que los signos.

<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;" /> 

(Por cierto, usted ha mencionado "como en Photobucket" - se puede simplemente mirar el código HTML de la página para ver cómo lo hacen.)

Answer 2

Como mencionan los comentarios, literalmente no se puede poner un enlace en un cuadro de texto input (aunque se puede simular uno con JavaScript).

Para la imagen de fondo, use CSS background-image.

Answer 3

Tiene dos opciones.

1. Coloque la imagen como fondo de la entrada, pero no se podrá hacer clic en ella.
2. Coloque el elemento de manera absoluta sobre una entrada.

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

Tendrá que jugar con la posición y Valu depende del tamaño de la entrada, el tamaño de la imagen y la ubicación general, pero debe hacer lo que usted desee.