2013-02-06 12 views
5

मैं एसीएसएस स्टाइल शीट में एक छवि के लिए एक लिंक जोड़ने के लिए देख रहा हूं ताकि छवि दबाए जाने पर यह लिंक पर नज़र डाले।एक सीएसएस स्टाइल शीट में एक छवि के लिए एक लिंक जोड़ें

छवि को ही के लिए कोड है:

#logo{ 
    background-image: url(images/logo.png); 
    width: 981px; 
    height: 180px; 
    margin-left: auto; 
    margin-right: auto; 

क्या कोड यह एक हाइपरलिंक के लिए नेविगेट करने की अनुमति में जोड़ने के लिए है? उदाहरण के लिए: यह नेविगेट अगर मैं चाहता था http://home.com

+0

कृपया मेरे संपादन पर जांच करें। –

उत्तर

12

को आप ऐसा नहीं कर सकते ...

सीएसएस के माध्यम से

URL आप background-image पर डाल सिर्फ छवि के लिए है।

HTML वाया

आप इस तरह से अपने हाइपरलिंक के लिए href जोड़ने के लिए:

<a href="http://home.com" id="logo">Your logo</a> 
text-indent साथ

और कुछ अन्य css तुम सिर्फ छवि और उस पर क्लिक आप जाना होगा दिखाने के लिए अपने एक तत्व समायोजित कर सकते हैं आपके लिंक पर


संपादित करें:

क्योंकि मुझे यकीन है कि तुम क्या पाठ इंडेंट करते और मेरे कोड आप अपनी छवि पर पाठ किया था की कोशिश कर रहा मैं यहाँ हूँ फिर आपको बताएंगे और इसका कारण बताएं लिए खोज करने के लिए आलसी हो रहा हूँ मेरी समाधान बेहतर है:

<a href="http://home.com" id="logo">Your logo name</a> 

HTML के इस ब्लॉक एसईओ अनुकूल है, क्योंकि आप अपने लिंक के अंदर कुछ पाठ है!

सीएसएस के साथ यह शैली कैसे करें:

#logo { 
    background-image: url(images/logo.png); 
    display: block; 
    margin: 0 auto; 
    text-indent: -9999px; 
    width: 981px; 
    height: 180px; 
} 

तो अगर आप के बारे में एसईओ परवाह नहीं है अच्छा अन्य जवाब चुनने के लिए।

+0

धन्यवाद, मैंने सुझावों का सुझाव दिया है लेकिन पाठ प्रकट होता है और हाइपरलिंक छवि से जुड़ा हुआ प्रतीत नहीं होता है। परिवर्तन के साथ तह साइट http://www.towels.co.za पर है, मेरी साइट नहीं, लेकिन एक मैं एक दोस्त के लिए ठीक करने की कोशिश कर रहा हूं और अपने कोड –

+0

के आस-पास अपना रास्ता खोजने की कोशिश कर रहा हूं ठीक है, उसे पता चला - वह था हेडर में स्टाइल शीट शामिल नहीं है ... मैंने एसईओ मुद्दों पर विचार किया था, लेकिन चूंकि मैं सीएसएस के साथ संघर्ष कर रहा था (मुख्य रूप से जब मैंने लिखा था कि एचटीएमएल कोड एक दशक पहले था ...) मैंने इसे अंदर रखा पृष्ठभूमि सिर्फ –

1

आप स्टाइल शीट के लिंक नहीं जोड़ते हैं। वे पृष्ठ की शैली का वर्णन करने के लिए हैं। जब आप छवि पर क्लिक करते हैं तो आप नेविगेट करने के लिए अपना मार्क-अप बदल सकते हैं या जावास्क्रिप्ट जोड़ सकते हैं।

केवल अपनी शैली के आधार पर आप के लिए होता है:

<a href="home.com" id="logo"></a> 
0

मैं इस एक ही सवाल पर विचार इस वर्ष सूची पर ठोकर खाई। इसी प्रश्न के लिए मेरी बैंड-सहायता थी मेरे हेडर टेक्स्ट को एक लिंक में बनाना। मैंने फिर रंग बदल दिया और सीएसएस के साथ पाठ सजावट हटा दी। अब पूरे हेडर को एक लिंक बनाने के लिए, मैंने एंकर टैग के पैडिंग का विस्तार किया जब तक कि यह हेडर छवि के किनारे के नजदीक न पहुंच जाए .... यह मेरी संतुष्टि के लिए काम करता था, और मुझे लगा कि मैं साझा करूंगा।

0

आप HTML में की तरह

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a> 

कुछ कर सकते हैं

-2

मैं इस सीएसएस में मेरी छवि "android-logo.png" के लिए एक लिंक की जरूरत है ताकि उपयोगकर्ता मेरे ऐप

पर जा सकते हैं
#header{ 
background: url(images/sawazine_13.jpg) right top no-repeat, url(images/android-logo.png) left center no-repeat #70af44; 
margin: 0; 
padding: 0; 
height: 120px; 
color: #05310C; 
+0

के रूप में काम करने वाली साइट प्राप्त करना चाहती है यह स्पष्ट नहीं है कि आप प्रश्न का उत्तर देने या फिर एक ही बार पूछने की कोशिश कर रहे हैं। जैसा कि स्वीकृत उत्तर में बताया गया है, यह नहीं किया जा सकता है। – jlh

संबंधित मुद्दे