ඔබේ වෙබ් හා බ්ලෝග් සයිට් එකේ ඇති ජායාරුපයකට , Mouse එකේ ඊතල කොටස ගෙන ගිය විටම , ඒම ජායාරුපය වෙනස් වෙන විධියට සාදන ආකාරය. [ How To Create a Rollover Image Effect. ]

හරි , අද අපි කියන්නේ බ්ලෝග් සයිට් කරන අයට වැදගත් වෙන දේයක්.

ඒ තමයි , ඔයාගේ සයිට් එකේ තියේන පින්තුරයක් උඩට , Mouse එකේ ඊතල කොටස අරන් ගියාම , ඒ පින්තුරය වෙනස් වෙන විධියට හදන්නේ කොහමද කියලයි , අද කියල දෙන්නේ.

මේ වගේ දේයක් , ඔබට ඕනැම දේයකට  භාවිතා කරන්න පුලුවන්. ඔබේ සයිට් එකේ විවිධ දැන්විම් පළ කරද්දි වැනි අවස්ථා වලදි වගේ , ඕනැම දේයකට ගන්න පුලුවන්.

මේක ක්‍රියාත්මක වන ආකාරය බලන්න ඕන නම් , මේ පහල පින්තුරයට Mouse එකේ ඊතල කොටස අරන් ගිහින්ම බලන්න.

දැක්කා නේද ?? අන්න , ඒක තමයි අපි දැන් හදන්නේ.

1. ) මේ පහලින් තියේන Code එක Copy කරගන්න.

<a href="Link" target="_blank"><img src="First Picture Link" onmouseover="this.src='Second Picture Link'" onmouseout="this.src='First Picture Link'" /></a>

මේ දිල තියේන Code එකේ , පහලින් කියල තියේන දේවල් ටික , ඔබට අදාලව ලබා දෙන්න.

* Link කියන තැනට , ඒ පින්තුරය ක්ලික් කරාම , මොකක් හරි පොස්ට් එකකට හෝ සයිට් එකකට යවන්න ඕන නම් , ඒ අදාල ලින්ක් එක ලබා දෙන්න.

* First Picture Link කියන තැනට , උඩින්ම ( පළමුව ) තියේන්න ඕන පින්තුරයේ Link එක ( Image URL එක ) ලබා දෙන්න.

* Second Picture Link කියන තැනට , එකේ ඊතල කොටස රැගෙන ගිය විට පෙන්විය යුතු , පින්තුරයේ Link එක ( Image URL එක ) ලබා දෙන්න.

2. ) දැන් , Blogger Dashboard එකේ Layout එකට ගිහින් , එතනින් Add a Gadget කියන එක ක්ලික් කරන්න.
එවිට එන Box එකේ HTML/Java Script කියන එක ක්ලික් කරන්න. එවිට එන Box එකේ Content කියන තැනට , අර අපි කලින් Copy කර ගත්ත Code එක , Paste කරන්න. ඒ වගේම , ඒ Box එකේම තියේන Tittle කියන එකට කැමති නම් පමණක් නමක් ලබා දි හෝ නොදි , Save කරන්න.
( අර , අපි ඉහලින් කිව්ව දේවල් , මේ Code එකට මුලින්ම දාල තියේන්න ඕන. )

3. ) දැන් , ඔබේ සයිට් එකට ගිහින් බලන්න. වැඩේ හරි නේද !!