எளிய CSS இல் ஹோவர் படத்துடன் இணைப்பு உருவாக்க எப்படி

எழுதிய கட்டுரை:
  • இணைய வடிவமைப்பு
  • புதுப்பிக்கப்பட்டது: ஆகஸ்ட் 29, 2011

ஒரு மிதவை என்ன? வரையறை மேற்கோள் UWStout.edu:

'ஹோவர்' என்பது எந்தவொரு இணைப்பிற்கும் மேலாக நீங்கள் கர்சரை வைக்கும்போது ஏற்படும் ஒரு விளைவு. வண்ணத்தை மாற்றுவதன் மூலமோ, புதிய கிராஃபிக் காண்பிப்பதன் மூலமோ அல்லது ஒலி கோப்பை இயக்குவதன் மூலமோ ஹோவர் பதிலளிக்க இணைப்பை குறியிடலாம்.

மிதவை விளைவை வலை பயன்பாட்டினை அதிகரிக்கிறது மற்றும் வலை உரிமையாளர்களுக்கு வலை வலைதளங்களை இயக்குவதற்கு உதவுகிறது. உங்கள் இணைய பயனர்கள் சிறப்பு இணைப்புக்கு கூடுதல் கவனம் செலுத்த வேண்டுமெனில், அவ்வாறு செய்ய ஒரு நல்ல வழி கவர்ச்சிகரமான மிதவை விளைவைக் கொண்ட ஒரு இணைப்பை உருவாக்க வேண்டும். ஒரு எளிய மிதவை விளைவு இது போன்ற (ஒரு எளிய அடிக்கோடிட்டு மற்றும் உரை வண்ணத்தின் மாற்றம்) அந்த உரை 'கிளிக்-திறன்' என்பதைக் குறிக்கிறது மற்றும் வலை தொடர்புகளை மேம்படுத்துகிறது. இருப்பினும், உரை வண்ணம் மற்றும் பாணிகளை மாற்றுவது (அடிக்கோடிட்டு / ஓவர்லைன் / தடித்தது) மிகவும் அடிப்படைகள் மற்றும் ஹோவர் மூலம் இன்னும் நிறைய செய்ய முடியும்.

இந்த கட்டுரையில், ஹோவர் எஃபெக்ட் மூலம் நீங்கள் எவ்வாறு அழகிய இணைப்புகளை உருவாக்க முடியும் என்பதைக் காட்டப் போகிறேன்.

எடுத்துக்காட்டாக XHTML: மிதவை பொத்தானை இணைப்பு

முதலாவதாக, உழைக்கும் எடுத்துக்காட்டு (பக்கத்தின் மீது சுட்டியை மாற்றவும் - இது எவ்வாறு வேலை செய்கிறது என்பதைப் பார்க்க)

உதாரணம் XHTML - மிதவை பொத்தானை படம் இணைப்பு

இந்த உதாரணம் கட்டப்பட்டது என்ன நிறைவு பதிப்பு.

எப்படி நாங்கள் அதை எளிய CSS இல் உருவாக்க வேண்டும்?

பட்டன் படம்

படி 1, நீங்கள் பார்க்க முடியும் என, நாம் இரண்டு வெவ்வேறு பதிப்புகளில் ஒரு அம்புக்குறி சின்னங்கள் வேண்டும். எங்கள் எடுத்துக்காட்டுக்கு, இயல்புநிலை இணைப்பு பொத்தானாக சிவப்பு (#CC3300) பயன்படுத்தினேன்; மற்றும் சாம்பல் (#333333) மிதவை விளைவு. இத்தகைய பொத்தானை எளிதாக எந்த பட எடிட்டிங் மென்பொருள் பயன்படுத்தி செய்ய முடியும்.

இப்போது சிவப்பு வண்ணம் கொண்ட பொத்தானைக் கொண்டிருக்கிறோம் (சொல்ல, b1.png) மற்றும் ரே நிறம் (பொத்தான், b2.png). B1.png மேல் இந்த இரண்டு படங்களையும் ஒரு bxNUMX.png உடன் இணைக்கவும். இது இணைப்புக்கான இறுதி படம். அதை (பெயர்ச்சொல் x.png) பெயரிடவும் விரும்பிய இடத்தைப் பதிவேற்றவும் (என் விஷயத்தில், என் WP டெம்ப்ளேட்டை கோப்புறையில் வைக்கிறேன்).

உங்களது பார்வைக்கு:

b1.png , b2.png , மற்றும் x.png

CSS கோட்

அடுத்து, CSS குறியீட்டில். நாம் எதைச் சாதிக்க விரும்புகிறோமோ அந்த அளவுக்கு பொத்தானை இடமாற்றம் செய்வதற்கான உரிமையை சிறிது சிறிதாக இணைக்க வேண்டும்; அதே நேரத்தில், இணைப்பு மிதவை நிலையில் இருக்கும் போது வேறு ஒரு படத்தை காட்டவும். இவை பின்னணியில் ஒரு சிறிய திருப்பம் தேவை என்பதைத் தவிர்த்து அழகான அடிப்படை விஷயங்கள். அசல் இணைப்புக்கான படத்தின் மேல் பகுதி (சிவப்பு பொத்தானை) காட்ட வேண்டும்; மற்றும் போது மிதவை, சாம்பல் பொத்தானை காட்ட ஒரு -11px (இது உங்கள் வலைத்தளத்தில் வேறுபடலாம்) பின்னணி படத்தை இடமாற்றம்.

.xa {color: #cc3300; திணிப்பு-இடது: 14px; எழுத்துரு-எடை: தடித்த; பின்னணி-படம்: url (images / x.png); பின்னணி-நிலை: 0 2px; பின்னணி-மீண்டும்: இல்லை மீண்டும்; }
.xa: hover {color: #333333; திணிப்பு-இடது: 14px; எழுத்துரு-எடை: தடித்த; பின்னணி-படம்: url (images / x.png); பின்னணி-நிலை: 0-11px; பின்னணி-மீண்டும்: இல்லை மீண்டும்; }

நடைமுறைப்படுத்தல்

இந்த மிதவை விளைவைக் காட்ட, நியமிக்கப்பட்ட பகுதியில் x வகுப்பைச் செருகவும். நீங்கள் அதை எவ்வாறு செய்யலாம் என்பதற்கான எடுத்துக்காட்டு இங்கே.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> முகப்பு </a> </ p>

எடுத்துக்காட்டாக XHTML: மிதவை பின்னணி இணைப்பு

அதே கருத்துடன், உங்கள் இணைப்புகளை அழகாக மாற்ற முடிவற்ற வழிகள் உள்ளன. சற்றே வித்தியாசமான முறையுடன் ஹோவர் விளைவுகளை நாம் என்ன செய்ய முடியும் என்பதற்கான மற்றொரு எடுத்துக்காட்டு இங்கே. மீண்டும், முடிக்கப்பட்ட பதிப்பைப் பாருங்கள்.

உதாரணம் XHTML - மிதவை பின்புலத்தில் இணைப்பு

இந்த எடுத்துக்காட்டில், நான் என்ன செய்வேன் என்பது ஒரு பொத்தானை விரும்பிய ஹைப்பர்லிங்கை உருவாக்குவதாகும், அதில் பயனர்கள் தங்கள் சுட்டி மீது பின்னணி இருக்கும் போது பின்னணி மாறும்.

எப்படி நாங்கள் அதை எளிய CSS இல் உருவாக்க வேண்டும்?

பின்னணி படங்கள்

முதலில், வட்டமான செவ்வகத்தின் இரண்டு படங்களை உருவாக்கவும். ஆர்ப்பாட்ட நோக்கத்திற்காக, இந்த இரண்டு படங்களையும் இந்த எடுத்துக்காட்டில் இணைக்க மாட்டோம். சிவப்பு (#CC3300) செவ்வகத்தை b1.png என்று பெயரிடுவோம்; மற்றும் மெரூன் (#9F2800) செவ்வகம் b2.png ஆக உள்ளது.

CSS கோட்

அடுத்து, உங்கள் நடை தாளின் குறியீடுகள் இங்கே உள்ளன (இந்த இரண்டாவது எடுத்துக்காட்டில் வகுப்பிற்கு 'y' என்று பெயரிடுகிறோம்).

ay {width: 280px; உயரம்: 42px; வண்ணம்: #000000; திணிப்பு: 10px; உரை அலங்காரம்: யாரும்; காட்சி: தடுப்பு; எழுத்துரு-எடை: தடித்த; பின்னணி-படம்: url (படங்கள் / b1.png); பின்னணி-மீண்டும்: இல்லை மீண்டும்; }
ay: hover {width: 280px; உயரம்: 42px; வண்ணம்: #FFFFFF; திணிப்பு: 10px; எழுத்துரு-எடை: தடித்த; உரை அலங்காரம்: யாரும்; காட்சி: தடுப்பு; பின்னணி-படம்: url (படங்கள் / b2.png); பின்னணி-மீண்டும்: இல்லை மீண்டும்; }

நடைமுறைப்படுத்தல்

இணைப்பைக் காட்ட, உங்கள் மூல குறியீட்டில் உள்ள <a href> குறியீட்டில் வகுப்பை (y) எளிதில் செருகவும். உதாரணமாக:

<a href="http://www.webhostingsecretrevealed.com" class="y">> முகப்பு> </a>

வரை போடு

இந்த கட்டுரை உங்களுக்கு மதிப்புமிக்க தகவல்களைக் கொண்டு வந்து, உங்களில் சிலருக்கு CSS ஐ ஆக்கபூர்வமான வழியில் பயன்படுத்த ஊக்கப்படுத்தியது என்று நம்புகிறேன். இந்த வழிகாட்டியில் நான் சேர்க்க வேண்டும் என்று நீங்கள் நினைக்கும் வேறு ஏதேனும் புள்ளிகள் இருந்தால், உங்கள் கருத்துக்களை கருத்துப் பிரிவில் விடலாம்.

மேலும் CSS பயிற்சி

இந்த இடுகையை நீங்கள் விரும்பினால், சரிபார்க்கவும் CSS 3 அனிமேஷன்களைப் பயன்படுத்துவது எப்படி, CSS XHTML பாடநெறிகளை படிக்க வேண்டும், அதே போல் உங்கள் CSS இந்த CSS XHTML நுட்பங்களுடன் கூடியதாக்குங்கள்.

ஜெர்ரி லோ பற்றி

WebHostingSecretRevealed.net (WHSR) இன் நிறுவனர் - 100,000 இன் பயனர்களால் நம்பப்பட்ட மற்றும் பயன்படுத்தப்படும் ஒரு ஹோஸ்டிங் மதிப்புரை. வலை ஹோஸ்டிங், இணை சந்தைப்படுத்தல் மற்றும் எஸ்சிஓ ஆகியவற்றில் 15 வருடங்களுக்கும் மேலான அனுபவம். ProBlogger.net, Business.com, SocialMediaToday.com மற்றும் பலவற்றிற்கான பங்களிப்பாளர்.

நான்"