தொட்டால் விவரிக்கும் இணைப்புகள் (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/AVvXsEgGsA3D5vM1PY5I_5HdoszUW5XKgpMsFTRxJMlLrgmmpvK5_3KjxnRuGPROo6TrrjY4hnvVubXCHYk0n9jlw-Z4rd8LFUVR32ODEx25KbLg1JmmbUdfFqdIdo_PwCLM50UwXV1N-N0Q/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/AVvXsEgGsA3D5vM1PY5I_5HdoszUW5XKgpMsFTRxJMlLrgmmpvK5_3KjxnRuGPROo6TrrjY4hnvVubXCHYk0n9jlw-Z4rd8LFUVR32ODEx25KbLg1JmmbUdfFqdIdo_PwCLM50UwXV1N-N0Q/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-ஐ  தொடவும்






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