தெரிந்த தளம் தெரியாத விஷயங்கள்...

                                                              HTML அறிவோம்...(3)

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

கடந்த பதிவுகளில், உங்களது வார்த்தைகளை நகர வைத்து, அவற்றின் நிறம், Background நிறம் போன்றவற்றை மாற்றும் முறைகளைப் பற்றி பார்த்தோம்.

இனி இன்னும் பல தகவல்களை அறிந்துக் கொள்வோம்.

சில தளங்களில், செய்திகள் scrolling ஆகிக் கொண்டிருக்கும்போது, scroll செய்யப்படுகிற செய்திகளுக்கு அருகே உங்களது கணினி mouse -ஐ கொண்டு சென்றால் அவைத் தனது வேகத்தை இழந்து நின்று விடும்.

எடுத்துக்காட்டு:


www.facebook.com/ikitotk


மேலே scroll ஆகிக்கொண்டிருக்கும் வார்த்தைகளின் மீது உங்களது mouse pointer -ஐ வைத்தால், அவை நின்று விடும்.

கவனித்தீர்களா?

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

பொதுவாக, ஒரு வார்த்தையை HTML -ஐப் பயன்படுத்தி நகர வைக்க,

எடுத்துக்காட்டாக

<marquee>உங்களது வார்த்தை</marquee>

இதற்கான பிரதிபலிப்பு

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

இது நான் ஏற்கெனவே அறிவித்த ஒன்று.

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

எடுத்துக்காட்டாக,

<marquee scrollamount="10" >உங்களது வார்த்தை</marquee>

இதற்கான பிரதிபலிப்பு

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


இதுவும் நான் ஏற்கனவே கூறிய ஒன்று.

இங்கே scrollamount -ன் மதிப்பு குறையும் பொழுது அதன் வேகம் குறைகிறது.

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

இந்த செயலை செய்வதற்கேற்றவாறு அதற்குரிய code -களும் இயக்கப் படுகிறது.

உதாரணமாக,

mouse இதன் மீது வைக்கப்படும்போது="இதன் குணம் scrollamount 0 என இருக்க வேண்டும்."
mouse வெளிஎடுக்கப் படும்போது="இதன் குணம் scrollamount 6 என இருக்க வேண்டும்."

இதை ஆங்கிலத்தில் சொல்லும்போது,

onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"

இவைத் தமிழில் கண்டவற்றைவிட சிறிது மாற்றம் கொண்டிருந்தாலும், இதைத் தான் இந்த செயலைச் செய்ய பயன்படுத்துகிறார்கள்.

இப்போது ஆங்கிலத்தில் நீங்கள் காண்பவற்றை உங்களது HTML code -களுக்காக பயன் படுத்தும்பொழுது,

எடுத்துக்காட்டாக,

<marquee onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">உங்களது வார்த்தை</marquee>

இதற்கான பிரதிபலிப்பு


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


mouse -ஆனது வைக்கப்படும்போது, உங்களது வார்த்தை மிகக் குறைந்த வேகத்தில் நகர வேண்டும் என நீங்கள் விரும்பினால், onmouseover="this.setAttribute('scrollamount', 0, 0);" என்பதில், scrollamount மதிப்பை சிறிது அதிகரிக்க வேண்டும்.

உதாரணத்திற்காக,


<marquee onmouseover="this.setAttribute('scrollamount', 2, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);" >
உங்களது வார்த்தை
</marquee>

இதற்கான பிரதிபலிப்பு


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

இது scrolling செய்வதற்கு மட்டும் பொருந்தும் என்பதில்லை..

இவற்றை Bouncing, Jumping, slide போன்றவற்றில் பயன்படுத்திப்பாருங்கள்.

                                                 Bouncing -ல் இதை பயன்படுத்த





எடுத்துக்காட்டு

<marquee behavior="alternate" onmouseover="this.setAttribute('scrollamount', 2, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);" >
உங்களது வார்த்தை
</marquee>

இதற்கான பிரதிபலிப்பு


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


இதை Background -உடன் அமைத்திட,

எடுத்துக்காட்டு:

<font color="white"><marquee behavior="alternate" bgcolor="blue" height="20" onmouseout="this.setAttribute('scrollamount', 6, 0);" onmouseover="this.setAttribute('scrollamount', 2, 0);" width="600">உங்களது வார்த்தை</marquee>

இதற்கான பிரதிபலிப்பு:

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

இவை சாத்தியமாகுமா என தோன்றுகிறதா?

நமது தளத்தின் வலது புறம் கொடுக்கப்பட்டுள்ள HTML code Tester -ல் உங்களது code -களை இட்டுப் பாருங்கள்.

உங்களது code -களுக்கு விடை அதன் கீழ்ப் புறம் பிரதிபலிக்கும்..

                                                                                                                           

இந்த பதிவு உங்களுக்கு புடிச்சிருக்கா?