开发者

Link inside of input tag

开发者 https://www.devze.com 2023-03-26 18:54 出处:网络
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 )

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=开发者_StackOverflow"http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>

thanks in advance.


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

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


You have two options.

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

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

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.


As comments mention, you can't literally put a link in an input text box (although you could simulate one with JavaScript).

For the background image, use CSS background-image.

0

精彩评论

暂无评论...
验证码 换一张
取 消