Tuesday, July 31, 2012

தொட்டால் விவரிக்கும் இணைப்புகள் (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="http://4.bp.blogspot.com/-kQGojoFmwR0/UBdoMbEK2hI/AAAAAAAABug/cVDkoKWiRvI/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="http://4.bp.blogspot.com/-kQGojoFmwR0/UBdoMbEK2hI/AAAAAAAABug/cVDkoKWiRvI/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


10 comments:

  1. மிரட்டுது தல!

    சிந்தனை துளிகள் சூப்பர்!

    ReplyDelete
  2. Demo அசத்தலா இருக்கு...
    அதில் உள்ள கருத்துக்கள் அருமை...

    //// மஞ்சள் நிறத்தில் உள்ள இடத்தில்..... ////

    மஞ்சள் நிறமே மார்க் செய்யவில்லை நண்பரே....
    கவனிக்கவும்.

    மறுபடியும் வருவேன்.... நன்றி.

    ReplyDelete
    Replies
    1. மன்னிக்கவும் நண்பரே திருத்தப்பட்டுள்ளது

      Delete
  3. கலக்கல் பதிவு நண்பா.....
    பட் மஞ்சள் நிறம்தான் தெரியவில்லை ஒரு வேளை வைத்தியருக்கிட்ட என் கண்ணைக் காட்டனும் போல.....

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

    அசத்தலான பதிவு.. அருமையான சிந்தனைகள் நன்றி நண்பா.

    ReplyDelete
    Replies
    1. நண்பா இவை அனைத்தும் கவிப்பேரரசு வைரமுத்துவின் " மேற்கோள்கள் "
      தங்கள் வருகைக்கு நன்றி பல சென்று வந்துள்ளீர்கள்

      Delete
  5. பயனுள்ள தகவலை தெரிவித்த நண்பனுக்கு நன்றி

    ReplyDelete
  6. நல்லா இருக்கே , செய்து பார்க்கிறேன் , பதிவிற்கு நன்றிகள் பல ........

    ReplyDelete
  7. பயனுள்ள பதிவு. தொடருங்கள்.

    ReplyDelete
  8. வணக்கம்
    அருமையாய் எளிமையாய் சொல்லுகின்றீர்கள்
    தங்கள் வலைப்பதிவு மிக அருமை
    என்னுடைய புதிய வலை பதிவு ( blog ) .
    என் கவிதுளிகளின் தொகுப்பு இங்கே ,
    வாசிக்க இங்கே சொடுக்கவும்
    http://kavithai7.blogspot.in/
    புது கவிதை மழையில் நனைய வாருங்கள்
    நீங்கள் தமிழர் என்ற பெருமிதத்துடன்
    என்றும் அன்புடன்
    செழியன்.....

    ReplyDelete