தொட்டால் விவரிக்கும் இணைப்புகள் (Tool Tip) # 2

இணையத்தின் அடிப்படையே இணைப்புகள் (links) தான் ஏனென்றால் இந்த இணைப்புகளை வைத்து தான் வேறு வேறு பக்கங்களுக்கு நாம் செல்கிறோம் .
இணைப்புகள் இல்லை என்றால் இணைய இல்லை என்று கூறலாம்.
காரணம் அது தான் ஆரம்பம் . அதனை இணைய முகவரி என்று அழைக்கலாம் .
ஏற்கனவே எழுதிய பதிவில் பல நண்பர்கள் விரிவாக எழுதும் படி கேட்டு கொண்டார்கள் . சாதாரணமாக கீழ் உள்ள வாறு HTML code-ஐ கொடுக்கிறோம்.


<a href="www.google.com" >GOOGLE </a>

தொட்டால் விவரிக்கும் இணைப்புகள் கீழ் உள்ளவாறு:

<a href="URL HERE " title="EXPLANTION ...">LINK TITLE</a>

மஞ்சள் நிறத்தில் உள்ள இடத்தில் என்ன எழுதுகிறோமோ அது லிங்க்-ஐ தொடும் போது தோன்றும்.

 அதாவது அந்த லிங்க்களை தொட்டால் அதன் விளக்கத்தை காட்டும். பதிவுகளையே இது போன்ற தொட்டால்

விவரிக்கும் இணைப்புகளில் கொடுக்க முடியும் . எப்படி என்று பார்போம் .

ஒரு முறை இதை செய்து விட்டால் வலைப்பதிவின் எந்த இடத்திலும்

அதன் HTML-ஐ மட்டும் Paste செய்தால் Tool Tip வேலை செய்யும் .

]]</b:skin> -க்கு முன்னால் கீழ் உள்ள code_ஐ முதலில் Paste செய்யவும் .

 a.wb-tooltip {outline:none; }
 a.wb-tooltip strong {line-height:30px;}
 a.wb-tooltip:hover {text-decoration:none !important;}
a.wb-tooltip span {
 z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:240px; line-height:16px;
 }
a.wb-tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
 a.wb-tooltip span
{
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
width:800px;line-height:1.6em;height:200px; 
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 840px;
line-height: 16px;
}

 அடுத்து எந்த இடத்தில் பயன்படுத்த வேண்டுமோ அந்த இடத்தில கீழே உள்ள

 HTML code-ஐ பேஸ்ட் செய்யவும் . பதிவில் கொடுக்க (பதிவு எழுதும் போது HTML mode-ல் வைத்து Paste செய்யவும் .) விட்ஜெட்-ல் வைக்க Add page element -HTML & java Script -விட்ஜெட் -ஐ தேர்வு செய்து அங்கே paste செய்யவும் . எங்கு பயன்படுத்த வேண்டுமாலும் அங்கே HTML code-ஐ Paste செய்யவும் .

 <a href="#" class="wb-tooltip">
  wb-tooltip
<span>
<img class="callout" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFbeGsLFN4FJlYbB-sScyx_8D7SDkcxwiB2u_hw1Bb34LYL8LqbfEWUuD0P4iB7gjj8w1f27OJsPplG25w3HRcNSi2lfJNSOhTTfO_JMAbS231M_YAE-LdXiKjwkeaNr-GLWAUh2S/s1600/callout.gif" />
<strong>Wesmob.blogspot.com by wb-tooltip</strong><br />
தொட்டால் விவரிக்கும் இணைப்புகள்.
</span>
</a>
<a href="#" class="wb-tooltip">
<img src="#Image link" />
 <span>
<img class="callout" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFbeGsLFN4FJlYbB-sScyx_8D7SDkcxwiB2u_hw1Bb34LYL8LqbfEWUuD0P4iB7gjj8w1f27OJsPplG25w3HRcNSi2lfJNSOhTTfO_JMAbS231M_YAE-LdXiKjwkeaNr-GLWAUh2S/s1600/callout.gif" />
<strong>CSS only wb-tooltip</strong><br />
<img src="#Image link" style="float:right;" />
தொட்டால் விவரிக்கும் இணைப்புகள் .
</span>
</a>

#image link என்ற இடத்தில் படம் பயன்படுத்தினால் அதன் இணைப்பை கொடுக்கவும் .

பதிவு முழுவதையும் Tool Tip-ல் காட்ட பதிவு முழுவதையும் எழுதி விட்டு

அதன் அனைத்து HTML Code-யும் மஞ்சள் நிறத்தில் உள்ள இடத்தில் Paste செய்து HTML Mode -ல் வைத்து Paste செய்யவும் .
#image link என்ற இடத்தில் படம் பயன்படுத்தினால் அதன் இணைப்பை கொடுக்கவும் .

பதிவு முழுவதையும் Tool Tip-ல் காட்ட பதிவு முழுவதையும் எழுதி விட்டு

அதன் அனைத்து HTML Code-யும் மஞ்சள் நிறத்தில் உள்ள இடத்தில் Paste செய்து HTML Mode -ல் வைத்து Paste செய்யவும் .இதை இடுகையில் செய்தால் HTML பகுதியில் வைத்தே Paste செய்யவும் .

டெமோ-Demo

கீழே உள்ள link-ஐ  தொடவும்





<

1. புனையப்படாத நாவல்தான் வாழ்க்கை; புனையப்பட்ட வாழ்க்கைதான் நாவல்
2. காலம் இறந்துவிடுகிறது; ஆனால், அது மனிதனின் செயல்களால் வாழ்ந்துகொண்டிருக்கிறது
3. இலட்சியமில்லாத வாழ்க்கை ஆணியில் தொங்குகிற சட்டை மாதிரி உள்ளீடற்றுத் தள்ளாடுகிறது
4. நமது கல்வி விரல்களைத்தான் வேலை வாங்குகிறதே தவிர மூளையையும் மனசையும் முழுமையாக்கவில்லை
5. பலர் நாற்காலி கிடைக்கும் வரை தீயைப்போல சுறுசுறுப்பாய் இருக்கிறார்கள். கிடைத்தபிறகோ, அந்த நாற்காலியைப் போல் விறைத்துப் போகிறார்கள்
6. நம்முடைய அகராதியில் அரசாங்க ஊழியன் என்பவன் ஒன்றாம்தேதி மட்டும் உறங்காதவன். மருத்துவன் என்பவன் தும்மிக்கொண்டே ஜலதோசத்துக்கு மருந்துகொடுப்பவன்
7. (நமது கல்வியில்) தேர்வு முறை என்பது அறியாமையை அளக்கிற அளவுகோல் தானே தவிர அறிவை அளக்கும் அளவுகோல் அல்ல.
8. களத்திற்கு வந்தபிறகு நீ கத்தியைத் தீட்டிக் கொண்டிருக்க முடியாது
9. புகழின் பின்னால் நீ போனால் அது பொய்மான்; புகழ் உன் பின்னால் வந்தால் அது நிஜமான்; அப்போதுதான் நீ அதற்கு எஜமான்

இங்கே என்னை தொடவும்


<

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

Touch Here