ஆசிரியரிடமிருந்து:வணக்கம். டூல்டிப் என்பது ஒரு உறுப்பின் மீது, பொதுவாக ஒரு படத்தின் மீது வட்டமிடும்போது தோன்றும் ஒரு சிறிய விளக்க உரை. HTML இல் பல்வேறு வழிகளில் உதவிக்குறிப்பை எவ்வாறு உருவாக்குவது என்பதை இன்று பார்ப்போம்.

நிலையான குறிப்பு

முன்னிருப்பாக, விளக்க உரையைக் காண்பிக்க தலைப்பு பண்புக்கூறு பொறுப்பாகும். இது பல்வேறு கூறுகளுக்குப் பயன்படுத்தப்படலாம், ஆனால் பொதுவாக அவை எதைக் காட்டுகின்றன என்பதை விளக்குவதற்கு மட்டுமே பயன்படுத்தப்படுகிறது.

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

< img src = "tiger.jpg" title = "இது ஒரு புலி" >

ஒரு வார்த்தை அல்லது பல வாக்கியங்கள் இருக்கலாம். மேலும் இது போல் தெரிகிறது:

குறிப்பு சுமூகமாக தோன்றும், வட்டமிட்ட பிறகு உடனடியாக அல்ல, ஆனால் சிறிது நேரம் கழித்து. இது இயல்புநிலை நடத்தை.

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

தூய css முறை

ஒரு படத்திற்கான குறிப்பை அழகாகக் காட்ட உங்களை அனுமதிக்கும் மிகவும் சுவாரஸ்யமான வழி. HTML மார்க்அப் எளிமையானது, படம் மட்டும் ஒரு தொகுதி கொள்கலனில் இணைக்கப்பட வேண்டும், அதற்கு ஒரு அடையாளங்காட்டியை ஒதுக்குவோம், அதன் மூலம் அதை பாணிகளில் பின்னர் குறிப்பிடலாம்:

< div id = "tiger" data - name = "சுமத்ரா புலி"> < img src = "tiger.jpg" > < / div >

இங்கே உங்களுக்குத் தெளிவாகத் தெரியாத ஒரே விஷயம் தரவு-பெயர் பண்புக்கூறு. விஷயம் என்னவென்றால், இது தரவு பண்புக்கூறு என்று அழைக்கப்படுகிறது, அது சொந்தமாக எதையும் செய்யாது, ஆனால் அதன் மதிப்பை css மற்றும் javascript இல் பயன்படுத்தலாம், இது சில சந்தர்ப்பங்களில் பயனுள்ளதாக இருக்கும். இதை நீங்கள் அடுத்து பார்க்கலாம்.

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

#புலி(நிலை: உறவினர்; காட்சி: இன்லைன்-பிளாக்; )

#புலி( நிலை: உறவினர்; காட்சி: இன்லைன் - தொகுதி;

பிளாக்-லைன் டிஸ்ப்ளே, பிளாக் (அதன் மூலம் நாம் உருவாக்கும் உதவிக்குறிப்பு கொண்ட தொகுதி) சாளரத்தின் முழு அகலத்திலும் நீட்டுவதைத் தடுக்கும். குறிப்பை உருவாக்குவது மட்டுமே எஞ்சியுள்ளது. CSS இல் போலி உறுப்புகளைப் பயன்படுத்தி இதைச் செய்வது மிகவும் வசதியானது. இது போன்ற:

#புலி:ஹோவர்:பிறகு (உள்ளடக்கம்: attr(தரவு-பெயர்); நிலை: முழுமையான; இடது: 0; கீழே: 0; பின்னணி: rgba(5,13,156,.55); நிறம்: #fff; உரை-சீரமைப்பு: மையம் ; font-family: cursive; எழுத்துரு அளவு: 14px; திணிப்பு: 3px 0; அகலம்: 100%; )

#புலி:ஹோவர்:பின் ( உள்ளடக்கம்: attr (தரவு - பெயர்); நிலை: முழுமையான; இடது: 0; கீழே: 0; பின்னணி: rgba(5, 13, 156, . 55); நிறம் : #fff; text - align : மையம் ; எழுத்துரு குடும்பம் : கர்சீவ் ; எழுத்துரு அளவு: 14px; திணிப்பு: 3px 0; அகலம்: 100%;

நிறைய குறியீடு உள்ளது, ஆனால் இங்கே சிக்கலான எதுவும் இல்லை. #tiger:hover:after selector என்பது பின்வருவனவற்றைக் குறிக்கிறது: ஒரு படத்துடன் ஒரு தொகுதியின் மீது நாம் வட்டமிடும்போது, ​​போலி உறுப்புக்குப் பின் ஒன்றை உருவாக்க வேண்டும் (பின்னர் விதிகள் சுருள் பிரேஸ்களில் பட்டியலிடப்பட்டுள்ளன). உள்ளடக்கம்: attr(data-name) பண்பு தொகுதியின் உரை மதிப்பை அமைக்கிறது. இது பட ரேப்பர் தொகுதியின் தரவு-பெயர் பண்புக்கூறில் எழுதப்பட்டதற்கு சமமாக இருக்கும்.

நீங்கள் படத்தின் மேல் வட்டமிடும்போது இந்த உதவிக்குறிப்பு தோன்றும், ஆனால் நிலையான ஒன்றைப் போலல்லாமல், இது திடீரென்று இதைச் செய்கிறது, மேலும் வட்டமிடும் தருணத்தில் தோற்றம் உடனடியாக நிகழ்கிறது. இந்த வழக்கில், ஒரு மென்மையான மாற்றத்தை செயல்படுத்த முடியாது, ஏனெனில் போலி கூறுகளுக்கு மென்மையான மாற்றங்கள் ஆதரிக்கப்படவில்லை.

முறை 2. தூய css மற்றும் மென்மையான தோற்றம்

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

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

டூல்டிப் உள்ளடக்கம் காட்சிக்கு பதிலாக எதிர்மறை விளிம்பு-இடது பண்பைப் பயன்படுத்துவதன் மூலம் பார்வையில் இருந்து அகற்றப்படுகிறது: எதுவுமில்லை அல்லது தெரிவுநிலை: சில திரை வாசகர்கள் இந்த பண்புகளை புறக்கணிப்பதால் மறைக்கப்பட்டுள்ளது.

உதவிக்குறிப்புகளுக்கான CSS பாணிகள்

விரைவில் பல்வேறு உலாவிகளில் டூல்டிப்களை ஒரே மாதிரியாகச் செயல்பட வைப்போம். இப்போது CSS குறியீட்டின் சில வரிகளைச் சேர்ப்போம்.

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

உதவிக்குறிப்பைக் காண்பிப்பதற்கான CSS

.tooltip:hover span ( எழுத்துரு குடும்பம்: Calibri, Tahoma, Geneva, sans-serif; நிலை: முழுமையானது; இடது: 1em; மேல்: 2em; z-இண்டெக்ஸ்: 99; விளிம்பு-இடது: 0; அகலம்: 250px; ) . உதவிக்குறிப்பு:ஹோவர் img (எல்லை: 0; விளிம்பு: -10px 0 0 -55px; மிதவை: இடது; நிலை: முழுமையானது; ) .tooltip: hover em ( எழுத்துரு குடும்பம்: Candara, Tahoma, Geneva, sans-serif; எழுத்துரு அளவு : 1.2em; எழுத்துரு-எடை: தடிமனான; காட்சி: தொகுதி; திணிப்பு: 0.2em 0 0.6em 0; ) .கிளாசிக் (திணிப்பு: 0.8em 1em; ) .கஸ்டம் (திணிப்பு: 0.5em 0.8em 0.8em 2em; ) * html a:hover (பின்னணி: வெளிப்படையானது; )

* html சரம் தேவை

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

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

உதவிக்குறிப்புகளுக்கு வண்ணத் திட்டத்தை அமைக்கவும்/

பின்வரும் குறியீடு ஐந்து உதவிக்குறிப்பு பாணிகளில் ஒவ்வொன்றிற்கும் ஒரு வண்ணத் திட்டத்தை அமைக்கிறது.

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

வண்ணத் திட்டத்திற்கான CSS குறியீடு

பாரம்பரியம் (பின்னணி: #9FDAEE; எல்லை: 1px திட #2BB0D7; ) .எச்சரிக்கை (பின்னணி: #FFFFAA; எல்லை: 1px திட #FFAD33; )

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

மேம்பட்ட உதவிக்குறிப்பு காட்சிக்கு CSS3 இன் சில தொடுதல்கள்

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

இந்த பண்புகள் எதுவும் உலகளவில் ஆதரிக்கப்படாததால், அவை சில புதிய உலாவி பதிப்புகளில் மட்டுமே செயல்படும். ஆனால் அவர்கள் வேலை செய்யும் இடத்தில், உதவிக்குறிப்புகள் நேர்த்தியாகவும் கவர்ச்சியாகவும் இருக்கும்!

கீழே உள்ள குறியீட்டைச் சேர்ப்போம்.tooltip:hover span மற்றும் பக்கத்தைப் புதுப்பிக்கவும்.

பார்டர், நிழல் மற்றும் வெளிப்படைத்தன்மைக்கான விஷுவல் எஃபெக்ட்கள் பக்கத்தின் உரைக்கு மேலே உள்ள உதவிக்குறிப்பை உயர்த்தி, தகவலை மாறுபட்டதாகவும் எளிதாகவும் படிக்க வைக்கும்.

அதிகாரப்பூர்வ CSS3 பண்புகள் பயன்படுத்தப்படுவதை நீங்கள் கவனிக்கலாம், ஆனால் Mozilla மற்றும் WebKit க்கான நீட்டிப்புகளும் பயன்படுத்தப்படுகின்றன.

புதிய உலாவிகளுக்கான கூடுதல் CSS பண்புகள்

எல்லை-ஆரம்: 5px 5px; -moz-எல்லை-ஆரம்: 5px; -வெப்கிட்-பார்டர்-ஆரம்: 5px; பெட்டி-நிழல்: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

சுருக்கம்

இந்த டுடோரியல் இடைமுகத்தை மேம்படுத்த அதிக முயற்சி தேவையில்லை என்பதை நிரூபிக்கிறது. கூடுதலாக, CSS ஐப் பயன்படுத்துவதற்கான அனுபவத்தை மதிப்பாய்வு செய்வது மதிப்புக்குரியது, இது வலை பயன்பாட்டிற்கான புதிய அளவிலான ஊடாடுதலை அமைப்பதில் பயனுள்ளதாக இருக்கும்.