Ads

Html Image Link in Bengali | এইচটিএমএল লিঙ্ক

Mouse-Sensitive Image:

HTML এ আপনি ব্যবহার করে Mouse-Sensitive ("Image Mouse" নামেও পরিচিত) ছবি তৈরি করতে পারেন <map> এবং<area> উপাদান এই উপাদানগুলি আপনাকে একটি চিত্রের মধ্যে ক্লিকযোগ্য এলাকাগুলিকে সংজ্ঞায়িত করতে দেয় যা মাউস ইভেন্টগুলিতে প্রতিক্রিয়া জানায়, যেমন মাউস ক্লিক বা মাউসওভার ইভেন্ট ৷ 

এখানে একটি উদাহরণঃ- 

<!DOCTYPE html> <html> <head> <title>Mouse-Sensitive Image Example</title> </head> <body> <h1>Mouse-Sensitive Image Example</h1> <img src="/path/to/image.jpg" alt="Example Image" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="0,0,100,100" href="/link1.html" alt="Link 1"> <area shape="circle" coords="150,150,50" href="/link2.html" alt="Link 2"> <area shape="poly" coords="300,0,400,100,350,200" href="/link3.html" alt="Link 3"> </map> </body> </html>

এই উদাহরণে, একটি চিত্র ব্যবহার করে প্রদর্শিত হয় <img> উপাদান, এবং একটি <map> উপাদানটি চিত্রের মধ্যে ক্লিকযোগ্য এলাকা নির্ধারণ করতে ব্যবহৃত হয়। <map> উপাদান দেওয়া হয় Name Attributes, যা একটি রেফারেন্স হিসাবে ব্যবহৃত হয় ব্যবহার মানচিত্র এর বৈশিষ্ট্য <img> মানচিত্রের সাথে চিত্রটিকে সংযুক্ত করার উপাদান।

ভিতরে <map> উপাদান, <area> উপাদানগুলি চিত্রের মধ্যে ক্লিকযোগ্য অঞ্চলগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। দ্যআকৃতি অ্যাট্রিবিউট ক্লিকযোগ্য এলাকার আকৃতি নির্দিষ্ট করে, যা আয়তক্ষেত্রের জন্য "রেক্ট", বৃত্তের জন্য "বৃত্ত" বা বহুভুজের জন্য "পলি" হতে পারে। 

coords attribute ক্লিকযোগ্য এলাকার স্থানাঙ্ক নির্দিষ্ট করে, যা আকৃতির উপর নির্ভর করে। আয়তক্ষেত্রের জন্য,coords বৈশিষ্ট্যের চারটি মান থাকা উচিত যা বাম, উপরে, ডান এবং নীচের স্থানাঙ্কগুলিকে প্রতিনিধিত্ব করে। 

চেনাশোনাগুলির জন্য,coords attribute-এর কেন্দ্রের x এবং y স্থানাঙ্ক এবং ব্যাসার্ধের প্রতিনিধিত্বকারী তিনটি মান থাকা উচিত। বহুভুজের জন্য,coords অ্যাট্রিবিউটে x এবং y স্থানাঙ্কের একটি তালিকা থাকা উচিত যা বহুভুজের শীর্ষবিন্দুগুলিকে সংজ্ঞায়িত করে।

href অ্যাট্রিবিউট সেই URLটি নির্দিষ্ট করে যা ক্লিকযোগ্য এলাকায় ক্লিক করার সময় নেভিগেট করা উচিত এবংসবকিছু অ্যাট্রিবিউট অ্যাক্সেসযোগ্যতার উদ্দেশ্যে বিকল্প পাঠ্য সরবরাহ করে।

ব্যবহারকারী যখন সংজ্ঞায়িত ক্লিকযোগ্য এলাকায় মাউসের সাথে ইন্টারঅ্যাক্ট করে, তখন ব্রাউজার উপযুক্ত মাউস ইভেন্টগুলিকে ট্রিগার করবে, যেমন ক্লিক বা মাউসওভার ইভেন্ট, যা আপনাকে জাভাস্ক্রিপ্ট বা অন্যান্য উপায়ে ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে কাস্টম ক্রিয়া সম্পাদন করার জন্য এই ইভেন্টগুলি পরিচালনা করতে দেয়। মাউস সংবেদনশীল ইমেজ সঙ্গে। 

Server-Side Image Maps:

HTML এ সার্ভার-সাইড ইমেজ ম্যাপ ব্যবহার করে তৈরি করা হয়<form> উপাদান এবং সার্ভার-সাইড স্ক্রিপ্টিং ভাষা যেমন পিএইচপি, এএসপি, বা পার্ল। 

ক্লায়েন্ট-সাইড ইমেজ ম্যাপের বিপরীতে, যা ব্যবহার করে <map> এবং <area> একটি চিত্রের মধ্যে ক্লিকযোগ্য এলাকাগুলিকে সংজ্ঞায়িত করার জন্য উপাদানগুলি, সার্ভার-সাইড চিত্র মানচিত্রগুলি ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রক্রিয়াকরণ পরিচালনা করতে ফর্ম উপাদান এবং সার্ভার-সাইড স্ক্রিপ্টগুলি ব্যবহার করে৷

সার্ভার-সাইড স্ক্রিপ্টিং ভাষা হিসাবে PHP ব্যবহার করে আপনি কীভাবে HTML- এ একটি সার্ভার-সাইড চিত্র মানচিত্র তৈরি করতে পারেন তার একটি উদাহরণ এখানে রয়েছেঃ- 

<!DOCTYPE html> <html> <head> <title>Server-Side Image Map Example</title> </head> <body> <h1>Server-Side Image Map Example</h1> <form action="/process_form.php" method="post"> <input type="image" src="/path/to/image.jpg" alt="Example Image" name="image" /> </form> </body> </html>

এই উদাহরণে, একটি ব্যবহার করে একটি চিত্র প্রদর্শিত হয়<ইনপুট টাইপ="চিত্র"> উপাদান, যা একটি ফর্মের জন্য একটি জমা বোতাম হিসাবে কাজ করে। src অ্যাট্রিবিউট ইমেজের URL নির্দিষ্ট করে এবংসবকিছু অ্যাট্রিবিউট অ্যাক্সেসযোগ্যতার উদ্দেশ্যে বিকল্প পাঠ্য সরবরাহ করে।

যখন ব্যবহারকারী ছবিটিতে ক্লিক করেন, ফর্মটি সার্ভার-সাইড স্ক্রিপ্টে জমা দেওয়া হয় (/process_form.php এই উদাহরণে) HTTP POST পদ্ধতি ব্যবহার করে। সার্ভার-সাইড স্ক্রিপ্ট তখন চিত্রের ক্লিক ইভেন্টের স্থানাঙ্ক সহ ফর্ম ডেটা প্রক্রিয়া করতে পারে এবং ফর্ম ডেটার উপর ভিত্তি করে যথাযথ পদক্ষেপ নিতে পারে।

সার্ভার-সাইড স্ক্রিপ্ট (যেমন,/process_form.php) আপনার পছন্দের সার্ভার-সাইড স্ক্রিপ্টিং ভাষায় (যেমন, পিএইচপি, এএসপি, পার্ল) প্রয়োগ করা যেতে পারে এবং এটি ফর্ম ডেটা থেকে ক্লিক ইভেন্টের স্থানাঙ্ক পুনরুদ্ধার করতে পারে, এটি প্রক্রিয়া করতে পারে এবং উপযুক্ত প্রতিক্রিয়া তৈরি করতে পারে বা পছন্দসই ক্রিয়া সম্পাদন করতে পারে সার্ভার-সাইড চিত্র মানচিত্রের সাথে ব্যবহারকারীর মিথস্ক্রিয়াগুলির উপর ভিত্তি করে সার্ভারের দিকে।

Client-Side Image Maps:

এইচটিএমএল-এ ক্লায়েন্ট-সাইড চিত্র মানচিত্রগুলি একটি চিত্রের মধ্যে ক্লিকযোগ্য অঞ্চলগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়, যেখানে চিত্রের বিভিন্ন ক্ষেত্রগুলি বিভিন্ন হাইপারলিঙ্ক বা ক্রিয়াগুলির সাথে যুক্ত হতে পারে। ক্লায়েন্ট-সাইড চিত্র মানচিত্র ব্যবহার করে সংজ্ঞায়িত করা হয়<map> এবং<area> HTML এ উপাদান।

আপনি কীভাবে HTML-এ একটি ক্লায়েন্ট-সাইড চিত্র মানচিত্র তৈরি করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হল:

<!DOCTYPE html> <html> <head> <title>Client-Side Image Map Example</title> </head> <body> <h1>Client-Side Image Map Example</h1> <img src="/path/to/image.jpg" alt="Example Image" usemap="#exampleMap" /> <map name="exampleMap"> <area shape="rect" coords="0,0,50,50" href="/link1.html" alt="Link 1" /> <area shape="circle" coords="100,100,50" href="/link2.html" alt="Link 2" /> <area shape="poly" coords="200,0,200,50,250,25" href="/link3.html" alt="Link 3" /> </map> </body> </html>

এই উদাহরণে, একটি চিত্র ব্যবহার করে প্রদর্শিত হয় <img> উপাদান, এবং একটি ক্লায়েন্ট-সাইড চিত্র মানচিত্র ব্যবহার করে সংজ্ঞায়িত করা হয় <map> নাম বৈশিষ্ট্য সহ উপাদান "exampleMap" এ সেট করা হয়েছে। 

<area> উপাদানগুলি ক্লিকযোগ্য অঞ্চলগুলিকে সংজ্ঞায়িত করতে বিভিন্ন আকার (আয়তক্ষেত্রাকার, বৃত্তাকার এবং বহুভুজ) এবং সংশ্লিষ্ট স্থানাঙ্ক (পিক্সেলে) ব্যবহার করে চিত্রের মধ্যে ক্লিকযোগ্য অঞ্চলগুলিকে সংজ্ঞায়িত করে।

href বৈশিষ্ট্য প্রতিটি ক্লিকযোগ্য এলাকার সাথে যুক্ত করার জন্য হাইপারলিংকের URL নির্দিষ্ট করে এবংসবকিছু অ্যাট্রিবিউট অ্যাক্সেসযোগ্যতার উদ্দেশ্যে বিকল্প পাঠ্য সরবরাহ করে।

যখন ব্যবহারকারী চিত্রের মধ্যে সংজ্ঞায়িত কোনো এলাকায় ক্লিক করেন, তখন সংশ্লিষ্ট হাইপারলিঙ্ক বা অ্যাকশন href সংশ্লিষ্ট বৈশিষ্ট্য <area> উপাদানটি ট্রিগার করা হবে, ব্যবহারকারীকে একটি ভিন্ন পৃষ্ঠায় নেভিগেট করতে বা তাদের নির্বাচিত ক্লিকযোগ্য এলাকার উপর ভিত্তি করে অন্য কিছু কাজ করার অনুমতি দেয়। 

ক্লায়েন্ট-সাইড চিত্র মানচিত্র সম্পূর্ণরূপে ক্লায়েন্ট-সাইডে প্রক্রিয়া করা হয় (অর্থাৎ, ব্যবহারকারীর ওয়েব ব্রাউজারে) এবং সার্ভার-সাইড প্রক্রিয়াকরণের প্রয়োজন হয় না।

Coordinate System:


HTML এ স্থানাঙ্ক সিস্টেমটি একটি ওয়েব পৃষ্ঠায় উপাদানগুলির অবস্থান এবং বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। 

এটি একটি কার্টেসিয়ান স্থানাঙ্ক ব্যবস্থা যেখানে X-অক্ষ অনুভূমিক দিক (বাম থেকে ডানে) এবং Y-অক্ষ উল্লম্ব দিক (উপর থেকে নীচে) প্রতিনিধিত্ব করে। মূল (0,0) ওয়েব পৃষ্ঠার উপরের বাম কোণে অবস্থিত।

HTML-এ, স্থানাঙ্ক সিস্টেমটি বিভিন্ন প্রসঙ্গে ব্যবহৃত হয়, যেমন CSS ব্যবহার করে পজিশনিং এলিমেন্ট, ক্লায়েন্ট-সাইড ইমেজ ম্যাপে ক্লিকযোগ্য এলাকা সংজ্ঞায়িত করা এবং HTML5 ক্যানভাসে আঁকার জন্য স্থানাঙ্ক নির্দিষ্ট করা।

HTML-এ বিভিন্ন প্রেক্ষাপটে সমন্বয় ব্যবস্থা কীভাবে কাজ করে তার একটি সংক্ষিপ্ত বিবরণ এখানে দেওয়া হলঃ- 

1. সিএসএস পজিশনিংঃ- 

সিএসএস বৈশিষ্ট্য যেমন অবস্থান পরম, এবং অবস্থান আপেক্ষিক , সমন্বয় সিস্টেম ব্যবহার করে একটি ওয়েব পৃষ্ঠায় উপাদান অবস্থান করতে ব্যবহৃত হয়। দ্যশীর্ষ, অধিকার, নীচে,  এবং বাম বৈশিষ্ট্যগুলি পিক্সেল বা শতাংশ মান ব্যবহার করে, তার পিতামাতার বা ভিউ পোর্টের সাথে সম্পর্কিত একটি উপাদানের অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।

2. ক্লায়েন্ট-সাইড Image Maps: 

The<মানচিত্র> এবং<এলাকা> উপাদানগুলি সমন্বয় সিস্টেম ব্যবহার করে একটি চিত্রের মধ্যে ক্লিকযোগ্য এলাকাগুলি সংজ্ঞায়িত করতে ব্যবহৃত হয়। দ্যআকৃতি বৈশিষ্ট্য ক্লিকযোগ্য এলাকার (আয়তক্ষেত্রাকার, বৃত্তাকার, বা বহুভুজ) আকৃতি নির্দিষ্ট করে এবংcoords অ্যাট্রিবিউট পিক্সেল মানগুলিতে এলাকার স্থানাঙ্ক নির্দিষ্ট করে।

3. HTML5 Canvas: 

HTML5<ক্যানভাস> উপাদান একটি অঙ্কন পৃষ্ঠ প্রদান করে যেখানে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে গ্রাফিক্স আঁকতে পারেন। ক্যানভাসের স্থানাঙ্ক ব্যবস্থা সামগ্রিক HTML স্থানাঙ্ক সিস্টেমের অনুরূপ, যেখানে ক্যানভাসের উপরের-বাম কোণটি হল উৎপত্তি (0,0), এবং X-অক্ষ ডানদিকে প্রসারিত, এবং Y-অক্ষ নীচের দিকে প্রসারিত। 

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে HTML এবং ওয়েব ডেভেলপমেন্টে, স্থানাঙ্কগুলি প্রায়শই পিক্সেলে নির্দিষ্ট করা হয়, যা ব্যবহারকারীর ডিসপ্লে ডিভাইসের রেজোলিউশনের সাথে সম্পর্কিত। 

বিভিন্ন ডিভাইসের বিভিন্ন স্ক্রীন রেজোলিউশন থাকতে পারে, যা একটি ওয়েব পৃষ্ঠার উপাদানগুলির উপস্থিতি এবং বিন্যাসকে প্রভাবিত করতে পারে। প্রতিক্রিয়াশীল ওয়েব ডিজাইন অর্জনের জন্য, শুধুমাত্র পিক্সেল-ভিত্তিক স্থানাঙ্কের উপর নির্ভর না করে, পজিশনিং এবং লেআউটের জন্য শতাংশ, ইএমএস বা রেমসের মতো আপেক্ষিক ইউনিটগুলি ব্যবহার করা সাধারণ।
Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section