এইচটিএমএল চিত্র মানচিত্র এখনও ব্যবহার করা হয়?


113

লোকেরা কি এখনও পুরানো এইচটিএমএল চিত্র মানচিত্র ব্যবহার করে? যাদের সাথে:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

নাকি আরও নতুন, আরও ভাল বিকল্প আছে?


1
আপনি যখন জিজ্ঞাসা করেন কিছু ভাল আছে কি না, আপনার তুলনা করার জন্য একটি উপায় দেওয়া উচিত। কীভাবে ভাল, বা কোন উদ্দেশ্যে? আমাদের নিষ্পত্তির ক্ষেত্রে চিত্রের মানচিত্রের চেয়ে আরও শক্তিশালী সরঞ্জাম রয়েছে, আরও জটিল ...
জেফ পার্কার

2
ভাল কথা - আমি দীর্ঘদিন ধরে কোনও চিত্রের মানচিত্র ব্যবহার করি নি এবং ভেবেছিলাম কোডিংয়ের একটি উন্নত পদ্ধতি দ্বারা এটি বাতিল হয়ে যেতে পারে।
ss888

1
জাভাস্ক্রিপ্ট / স্তর ভিত্তিক কার্যকারিতা এবং ফ্ল্যাশ আমার সমস্ত কিছু জুড়েই চিত্রের মানচিত্রগুলি প্রতিস্থাপন করেছে ... সক্রিয় কর্তব্যকালে আমি শেষবারের মতো দেখেছি মনে করতে পারছি না। যদিও আপনার যদি মনে একটি নির্দিষ্ট উদ্দেশ্য থাকে তবে আরও একটি সুনির্দিষ্ট উত্তর আরও সহজেই পাওয়া যায় :)
জেফ পার্কার

21
আমি বরং এই দিনে এবং বয়সে ফ্ল্যাশ এড়াতে চাই।
ss888

4
যদি আপনি কিছু দ্রুত করার জন্য, দ্রুত চালানো এবং কেবলমাত্র হালকা খারাপের সন্ধান করেন তবে চিত্রের মানচিত্রগুলি কাজটি করবে। এখানে কোনও বহুল সমর্থিত প্রতিস্থাপন নেই যা কাজটি আমার মনে একই গতিতে করবে। এখন আপনার যদি এসভিজি, ক্যানভাসের জন্য সময় থাকে এবং আপনার সমর্থিত ব্রাউজারের তালিকা থেকে আইই বাদ দিতে কিছু মনে করেন না ...
জেফ পার্কার

উত্তর:


53

হ্যাঁ, লোকেরা এখনও চিত্রের মানচিত্র ব্যবহার করে। পরম অবস্থান এবং সিএসএস ব্যবহার করে উপাদানগুলির অবস্থানের বিকল্প হতে পারে তবে এটি আরও ভাল নয়। এটি আপনাকে চিত্রের মানচিত্রের মতো আকার ধারণ করতে দেয় না


ঠিক আছে, তাই এইচটিএমএল চিত্র মানচিত্র এখনও ভাল? হোভার / রোলওভার ইফেক্টগুলি কীভাবে যুক্ত করবেন?
ss888

চিত্রের মানচিত্রগুলির সাথে আমার বড় সমস্যাটি হ'ল তারা যে চিত্রগুলি যুক্ত করে তার বিপরীতে তারা ব্রাউজার বা স্ক্রিন আকারে স্কেল করে না। আমি আশা করব যে ওপি এসভিজি ফর্ম্যাটগুলি গবেষণা করবে
মার্টিন

2
আপনাকে এটি চিত্রের আকার দিয়ে স্কেল করতে হবে। উইন্ডো আকারের তুলনায় আপনার চিত্রের আকার তৈরি করা। তারপরে সর্বদা চিত্রের মানচিত্রের অনুপাতের সাথে প্রস্থ / উচ্চতার অনুপাতের তুলনা করুন এবং তারপরে স্থানাঙ্কগুলিকে ওভাররাইট করতে জাভাস্ক্রিপ্ট ব্যবহার করুন। Jquery ভিত্তিক চিত্র আকারের ইভেন্ট হ্যান্ডলারটি হ'ল window (উইন্ডো)।। আকার (ফাংশন () {.... আপনারকোড ...});
skidadon

46

এগুলি এইচটিএমএল 5 স্পেসিফিকেশনে রয়েছে , তাই তারা হ্রাস পাবে না।

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


19

সিএসএস বা চিত্র মানচিত্র ব্যবহারের বিকল্প সমাধান হ'ল এইচটিএমএল ডোমে এমবেড থাকা এসভিজি গ্রাফিক্সের ব্যবহার করা।

কিভাবে এই টেকনিক ব্যবহার মাউসওভার প্রভাব অর্জন উপর এক টিউটোরিয়াল এই টিউটোরিয়াল এ বর্ণিত হয়: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

কী takeaway হচ্ছে যে করা SVG উপাদানগুলিকে সহ ঐতিহ্যগত ডোম ঘটনা আরম্ভ onmouseover এবং onmouseout


1
ইমেজম্যাপগুলির জন্য +1 এসভিজি হ'ল সেরা প্রত্যক্ষ বিকল্প, কারণ কোনও ইচ্ছামত আকারের সাথে ইন্টারঅ্যাকশন হতে পারে। চিত্রম্যাপগুলির সাথে একেবারে অনুরূপ কিছু তৈরি করা যেতে পারে যেখানে ভেক্টর এসভিজি উপাদানগুলিকে একটি চিত্র ভরাট করে , রাস্টার পিক্সেল চিত্রগুলি কাটা আপ করে । তবে তারপরেও, ক্ষেত্রের মানচিত্রগুলি কিছু ক্ষেত্রে ভাল হতে পারে (এগুলি সহজ, এবং চিত্রটি কাটাবেন না, যা কখনও কখনও কাম্য হতে পারে)।
user56reinstatemonica8

18

হ্যাঁ এইচটিএমএল চিত্রের মানচিত্রগুলি বিশেষত যদি আপনি চান যে আপনার অঞ্চলটি বহুভুজ হয়ে উঠুক। জাভাস্ক্রিপ্টের সাহায্যে আপনি মানচিত্রে রোলওভার প্রভাবগুলি যুক্ত করতে পারেন। এখানে একটি দুর্দান্ত টিউটোরিয়াল এবং ডেমো রয়েছে:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484


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

10

চিত্র মানচিত্রগুলি এখনও সমস্ত ব্রাউজার দ্বারা সমর্থিত এইচটিএমএল 5 নির্দিষ্টকরণে রয়েছে।

এগুলি jQuery আরডাব্লুডি চিত্র মানচিত্র ব্যবহার করে প্রতিক্রিয়াশীল নকশায় অভিযোজিত হতে পারে: https://github.com/stowball/jQuery-rwdImageMaps

এটি চিত্রের মানচিত্রের স্থানাঙ্কগুলি সনাক্ত করে এবং স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে।

এটি ওয়ার্ডপ্রেস বিকাশকারীদের প্লাগইন হিসাবেও উপলভ্য: http://wordpress.org/plugins/responsive-image-maps/

সহজ এবং কার্যকর সমাধান।


9

হ্যাঁ, আমি এখনও চিত্রের মানচিত্র ব্যবহার করি, তবে আমার শেষ প্রকল্পটি রাফায়েল ব্যবহার করেছে। কিছু পেতে এবং চলমান এটি বেশ সহজ ছিল।

http://dmitrybaranovskiy.github.io/raphael/

তাদের ওয়েব সাইট থেকে:

রাফাল ['রেফেল] গ্রাফিক্স তৈরির জন্য বেস হিসাবে এসভিজি ডাব্লু 3 সি সুপারিশ এবং ভিএমএল ব্যবহার করে। এর অর্থ আপনার তৈরি প্রতিটি গ্রাফিকাল অবজেক্টটিও একটি ডিওএম অবজেক্ট, যাতে আপনি জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন বা পরে তাদের সংশোধন করতে পারেন। রাফালের লক্ষ্য একটি অ্যাডাপ্টার সরবরাহ করা যা ভেক্টর আর্টকে সামঞ্জস্যপূর্ণ ক্রস ব্রাউজার এবং সহজ করে তুলবে।

দুর্দান্ত চিত্রের মানচিত্রের উদাহরণ:

http://dmitrybaranovskiy.github.io/raphael/australia.html


2
আপনার লিংকটি হাহাকার এবং নিম্নচাপের পরিবর্তে নিজেকে ঠিক করার পক্ষে খুব বেশি কিছু নেওয়া উচিত ছিল না :(
ডেভিড নিউকম্ব

2
প্রিয় ডেভিড, আমি ডাউনটা সরিয়েছি। আপনি কীভাবে চান যে আমি লিঙ্কটি ঠিকভাবে ভাঙ্গা ঠিক করেছি? আমি http://raphaeljs.com/সম্পূর্ণরূপে অপসারণ করব এবং কেবল গিথুব উদাহরণ সরবরাহ করব।
orschiro

6
স্ট্যাক-সাইটের মূল বিষয় হল সহযোগিতা। যদি আপনি কোনও ভাঙা লিঙ্ক দেখতে পান তবে পারলে এটি ঠিক করুন। ভাঙা লিঙ্কগুলির বিচারে এটি ভাববেন না, তারা সংস্থানসমূহের সংস্থানস্থল broken যদি সংস্থানটি সরানো থাকে, তবে লিঙ্কটি আপডেট করুন যাতে এটি সংস্থানটির নতুন অবস্থানের দিকে নির্দেশ করে: এটি গুরুত্বপূর্ণ বিষয়। রাফেলজগুলির নিজস্ব সাইট ছিল তবে এটি স্পষ্টতই গিটহাবে চলে গেছে। আমরা এখন গুগলে লোকেরা কোথায় বাস করি তা খুঁজে দেওয়ার জন্য? বা আমরা কি তাদের এখান থেকে যেতে সাহায্য করব? অস্ট্রেলিয়া উদাহরণ একই উদাহরণ এটি অন্য কোথাও আলাদা বাস।
ডেভিড নিউকম্ব

http://raphaeljs.com/লিংক অবশেষে ভঙ্গ করবে যখন ডোমেইন রেজিস্ট্রেশন মেয়াদ শেষ কিন্তু পুনরায় সরাসরি এটিতে এখন সবাই তাদের লিঙ্কগুলি আপডেট করার সুযোগ দিতে (বিশ্বের) হয়। সম্ভবত @orschiro আপনি নিবন্ধটির একটি দিয়ে শুরু করতে এবং এসওতে এখানে সহযোগী প্রচেষ্টাতে যোগ করতে পারেন।
ডেভিড নিউকম্ব

1
বোঝা গেল, ধন্যবাদ ডেভিড! আমি উত্তরটি আপডেট করেছি এবং লিঙ্কটি ঠিক করেছি। :-)
orschiro

4

যদিও আমি তাদের আর আধুনিক ওয়েবসাইটগুলিতে খুব কমই ব্যবহার করতে দেখছি, তারা আমার ক্লায়েন্টরা তাদের ইমেল প্রচারে ব্যবহার করেছে বলে মনে হয়। তবে, আমি লক্ষ্য করেছি এবং নিশ্চিত করেছি যে মোবাইল ডিভাইসগুলিতে স্থানাংক সিস্টেমের সাথে কিছু স্কেলিং সমস্যা রয়েছে।

** আমি জানি যে এই থ্রেডটি পুরানো, আমি সাম্প্রতিক ইমেল প্রচারণার ইস্যুটির জন্য এটি সম্পর্কে আরও কিছু গবেষণা করছিলাম এবং ভেবেছিলাম এটি অন্য কাউকে এই লাইনে ফেলে সহায়তা করতে পারে।

তৃতীয় পক্ষের সম্পাদনা

Litmus.com প্রশ্ন চিত্র ম্যাপ সাপোর্টে 04/2014 থেকে

চিত্রের মানচিত্রগুলি ALT ট্যাগগুলিকে সমর্থন করে না, যখন চিত্রগুলি লোড হয় না কিছু ক্লায়েন্টে প্রদর্শিত হয় না।

চিত্র মানচিত্রের ব্যবহারের ফলে সাধারণত বড় আকারের চিত্র ব্যবহার করা যায় যা বিতরণযোগ্যতার সমস্যা সৃষ্টি করতে পারে এবং ডাউনলোডের গতি বাধাগ্রস্থ করতে পারে (বিশেষত মোবাইল ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ)।

এবং সর্বাগ্রে গুরুত্বপূর্ণ, আইওএস (আইফোন / আইপ্যাড) যখন চিত্রটি ছোট করে দেওয়া হয় যা লিঙ্কগুলি ভেঙে দেয় তখন চিত্রের মানচিত্রের লিঙ্ক স্থানাঙ্ককে স্কেল করে না। যেহেতু আইওএস একটি বৃহত সংখ্যাগরিষ্ঠ ইমেল খোলার প্রতিনিধিত্ব করে (আইফোন + আইপ্যাড = 38% http://emailclientomothare.com/ এর মাধ্যমে ) এটি গুরুত্বপূর্ণ।


0

হ্যাঁ, এটি এখনও ব্যবহৃত হয়েছে

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

অধিক


-2

চিত্র ম্যাপটি এইচটিএমএল এবং এইচটিএমএল 5 এ বেশ আকর্ষণীয় বিকল্প যা তারা এখনও ব্যবহার করছে এবং আমি ব্যক্তিগতভাবে এটি পছন্দ করি তাই আমি মোবাইল ডিভাইসগুলিতে ইস্যু পেতে আমার সমস্যাটি স্কেলিংয়ের সাথে সম্পর্কিত

হ্যাঁ আমি এটি আমার নিজের অভিজ্ঞতা পেয়েছি তবে আমি এইচটিএমএল এইচটিএমএল 5 তে ভর্তি হওয়া শিক্ষার্থী এবং শিক্ষানবিশদের জন্য আমি ডাব্লু 3 স্কুলগুলির লিঙ্কটি অনুসরণ করতে চাই

http://www.w3schools.com/html/html_images.asp

আপনি এই [পৃষ্ঠাটি থেকে প্রচুর উপার্জন করতে পারবেন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.