इनपुट टैग के अंदर लिंक

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

टिप्पणियों के अनुसार, आप सचमुच input टेक्स्ट बॉक्स में एक लिंक नहीं डाल सकते (हालांकि आप जावास्क्रिप्ट के साथ अनुकरण कर सकते हैं)।

पृष्ठभूमि छवि के लिए, सीएसएस background-image का उपयोग करें।

Answer 3

आपके पास दो विकल्प हैं।

1. छवि को इनपुट की पृष्ठभूमि के रूप में रखें, लेकिन यह क्लिक करने योग्य नहीं होगा।
2. बिल्कुल इनपुट पर तत्व को स्थिति दें।

1:

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

2:

एचटीएमएल

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

सीएसएस

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

आप स्थिति और valu साथ खेलने के लिए की आवश्यकता होगी आपके इनपुट आकार, छवि आकार और सामान्य प्लेसमेंट के आधार पर ईएस है, लेकिन यह वही करना चाहिए जो आप चाहते हैं।