سادہ سی ایس ایس میں ہور کی تصویر کے ساتھ لنک بنانے کا طریقہ

آرٹیکل نے لکھا:
  • ویب سائٹ کے ڈیزائن
  • اپ ڈیٹ: اگست 02، 2013

ہوور کیا ہے؟ تعریف سے حوالہ دیا گیا ہے UWStout.edu:

'ہوور' ایک ایسا اثر ہے جو اس وقت ہوتا ہے جب آپ کرسر کو کسی بھی قسم کے لنک پر ڈال دیتے ہیں۔ لنک کو رنگ تبدیل کرکے ، نیا گرافک دکھا کر ، یا یہاں تک کہ ساؤنڈ فائل چلا کر ہوور کا جواب دینے کے لئے کوڈ کیا جاسکتا ہے۔

ہور اثر کو ویب کے استعمال میں بہتری ملتی ہے اور ویب مالکان کو اپنے ویب ٹریفک کو ہدایت دیتا ہے. جب آپ اپنے ویب صارفین کو خصوصی لنک پر اضافی توجہ دینا چاہتے ہیں، تو ایسا کرنے کا ایک اچھا طریقہ کشش ہور اثر کے ساتھ ایک لنک بنانا ہے. ایک سادہ ہور اثر اس طرح (ایک سیدھا سادہ خاکہ اور متن کے رنگ کی تبدیلی) ان متنوں کی نشاندہی کرتی ہے جو 'کلک قابل' ہیں اور ویب روابط کو بہتر بناتے ہیں۔ تاہم ، متن کا رنگ اور شیلیوں کو تبدیل کرنا (انڈر لائن / اوور لائن / بولڈ) بہت بنیادی باتیں ہیں اور ہوور کے ساتھ بہت کچھ کیا جاسکتا ہے۔

اس مضمون میں ، میں یہ ظاہر کرنے جارہا ہوں کہ آپ کس طرح ہور اثر کے ساتھ اچھ lookingے لنکس تیار کرسکتے ہیں۔

مثال 1: ہور بٹن کے ساتھ لنک

سب سے پہلے، کام کرنے والے مثال پر ایک نظر (لنک پر ماؤس کی جگہ دیکھیں کہ یہ کس طرح کام کرتا ہے - طرف کی آئکن کی تبدیلی).

مثال 1 - ہور بٹن تصویر کے ساتھ لنک

یہ اس مثال میں کیا تعمیر کیا جائے گا کا مکمل ورژن ہے.

ہم اسے سادہ سی ایس ایس میں کس طرح تخلیق کرتے ہیں؟

بٹن کی تصویر

مرحلہ 1، جیسا کہ آپ دیکھ سکتے ہیں، ہمیں دو مختلف ورژنوں میں ایک تیر شبیہیں کی ضرورت ہے. ہمارے مثال میں، میں نے سرخ (# سی سی ایکس این ایم ایکس) کو ڈیفالٹ لنک کے بٹن کے طور پر استعمال کیا تھا؛ اور ہور اثر کے لئے بھوری رنگ (#3300). کسی بھی تصویر میں ترمیم سافٹ ویئر کا استعمال کرتے ہوئے اس بٹن کو آسانی سے بنایا جا سکتا ہے.

اب ہمارے پاس سرخ رنگ کے بٹن ہے (کہیں، B1.png) اور ریسی رنگ (بٹن کا کہنا ہے کہ، B2.png). B1.png کے اوپر ان دووں کو ایک تصویر فائل میں ضم کریں B2.png. یہ لنک کے لئے ہماری حتمی تصویر ہوگی. اس کا نام (کہتے ہیں، x.png) اور مطلوبہ مقام اپ لوڈ کریں (میرے معاملے کے لئے، میں نے اسے اپنے WP ٹیمپلیٹ فولڈر میں رکھا).

آپ اکی معلومات کےلئے:

b1.png ، B2.png ، اور x.png

سی ایس ایس کوڈ

اگلا، سی ایس ایس کوڈ پر. بنیادی طور پر ہم جو حاصل کرنا چاہتے ہیں، بٹن کے لئے جگہ بنانے کے حق سے تھوڑا سا لنک ٹیکسٹ انڈین کرنا ہے. اور ایک ہی وقت میں، لنک ہور ریاست میں ہے جب ایک مختلف تصویر دکھائیں. یہ بہت بنیادی چیزیں ہیں، اس کے علاوہ ہمیں پس منظر کی پوزیشن پر تھوڑا موڑ کی ضرورت ہے. چال اصل لنک کے لئے تصویر (سرخ بٹن) کا سب سے بڑا حصہ دکھاتا ہے؛ اور جب ہور، پس منظر کی تصویر کو ایک -11PX کے ساتھ خارج کردیں (یہ آپ کی ویب سائٹ پر مختلف ہو سکتا ہے) بھوری رنگ کے بٹن کو دکھانے کے لئے مارجن.

.xa {رنگ: #cc3300؛ پیکنگ بائیں: 14PX؛ فونٹ وزن: بولڈ؛ پس منظر کی تصویر: url (تصاویر / x.png)؛ پس منظر کی پوزیشن: 0 2PX؛ پس منظر دوبارہ: کوئی دوبارہ نہیں؛ }
.xa: ہور {رنگ: #333333؛ پیکنگ بائیں: 14PX؛ فونٹ وزن: بولڈ؛ پس منظر کی تصویر: url (تصاویر / x.png)؛ پس منظر کی پوزیشن: 0 -11PX؛ پس منظر دوبارہ: کوئی دوبارہ نہیں؛ }

عمل

اس ہوور اثر کو ظاہر کرنے کے لئے ، صرف مخصوص علاقے میں کلاس X داخل کریں۔ یہاں ایک مثال ہے کہ آپ اسے کیسے کرسکتے ہیں۔

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> مرکزی صفحہ </a> </ p>

مثال 2: ہور پس منظر میں لنک

اسی تصور کے ساتھ ، یہاں بہت سے طریقے ہیں جن سے آپ اپنے لنکس کو ٹھنڈا نظر آسکتے ہیں۔ یہاں ایک اور مثال ہے کہ ہم تھوڑا سا مختلف طریقہ سے ہور اثرات کے ساتھ کیا کرسکتے ہیں۔ ایک بار پھر ، تیار ورژن پر ایک نظر ڈالیں۔

مثال 2 - ہور پس منظر میں لنک

اس مثال میں، میں کیا کروں گا، اس بٹن کو پسند کرنا ہے. پسند ہائپر لنکس جہاں پس منظر اس وقت تبدیل ہوجائے گا جب صارفین اس پر اپنے ماؤس کو رکھیں.

ہم اسے سادہ سی ایس ایس میں کس طرح تخلیق کرتے ہیں؟

پس منظر کی تصاویر

پہلے گول گول مستطیل کی دو تصاویر بنائیں۔ مظاہرے کے مقصد کے ل we ، ہم ان دو تصاویر کو اس مثال میں ضم نہیں کریں گے۔ ہم سرخ (#CC3300) مستطیل کا نام b1.png رکھیں گے۔ اور مرون (#9F2800) مستطیل بطور b2.png۔

سی ایس ایس کوڈ

اگلا ، آپ کے اسٹائل شیٹ کے کوڈ یہ ہیں (ہم اس دوسری مثال میں 'y' کلاس کا نام دے رہے ہیں)۔

ہاں {چوڑائی: 280PX؛ اونچائی: 42PX؛ رنگ: #000000؛ بھرتی: 10px؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ ڈسپلے: بلاک؛ فونٹ وزن: بولڈ؛ پس منظر کی تصویر: url (تصاویر / b1.png)؛ پس منظر دوبارہ: کوئی دوبارہ نہیں؛ }
ہاں: ہور {چوڑائی: 280PX؛ اونچائی: 42PX؛ رنگ: #FFFFFF؛ بھرتی: 10px؛ فونٹ وزن: بولڈ؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ ڈسپلے: بلاک؛ پس منظر کی تصویر: url (تصاویر / b2.png)؛ پس منظر دوبارہ: کوئی دوبارہ نہیں؛ }

عمل

لنک کو ظاہر کرنے کے لئے، آپ کے ذریعہ کوڈ میں <a href="> ٹیگ میں کلاس (y) کو سادہ ڈالیں. مثال:

<a href="http://www.webhostingsecretrevealed.com" class="y"> مرکزی صفحہ </a>

اپ ریپنگ

مجھے امید ہے کہ یہ مضمون آپ کے لئے قابل قدر معلومات لے کر آیا ہے اور آپ میں سے کچھ کو تخلیقی انداز میں سی ایس ایس کا استعمال کرنے کی ترغیب دیتا ہے۔ اگر آپ کے خیال میں کوئی دوسرا نکات ہے جو مجھے لگتا ہے کہ مجھے اس رہنما میں شامل کرنا چاہئے تو ، آزادانہ طور پر اپنے خیالات کو تبصرہ کے حصے میں چھوڑیں۔

زیادہ سی ایس ایس سبق

اگر آپ اس پوسٹ کو پسند کرتے ہیں، تو چیک کرنے کے لئے بھی یقینی بنائیں CSS 3 حرکت پذیری کے اچھے استعمال کو کس طرح بنانے کے لئے, CSS 3 سبق 2012 پڑھنا ضروری ہے، اسی طرح اپنی سی ایس ایس 3 تکنیکوں کے ساتھ اپنی ویب سائٹ کو ٹھنڈا کریں.

جیری کم کے بارے میں

WebHostingSecretRevealed.net کے بانی (WHSR) - ایک میزبان جائزہ لینے کے قابل اور 100,000 کے صارفین کی طرف سے استعمال کیا جاتا ہے. ویب ہوسٹنگ، ملحق مارکیٹنگ، اور SEO میں 15 سال کا تجربہ سے زیادہ. شراکت دار ProBlogger.net، Business.com، SocialMediaToday.com، اور مزید میں.