সিএসএস সহ একটি চিত্র মানচিত্র কীভাবে তৈরি করবেন

অপশন

আমি কিছু 'জোকি' চাইছিলাম তাই আমি একটি 'পকেট' গ্রাফিকের বিষয়ে সিদ্ধান্ত নিয়েছিলাম যা আমার ব্লগের জন্য সমস্ত সাবস্ক্রিপশন পদ্ধতি ধারণ করে।

ওয়েব 1.0 এর দিনগুলিতে, প্রতিটি গ্রাফিকের লিঙ্কগুলি দিয়ে আপনার চিত্রকে আলাদা করে তৈরি করার পরে এর মতো লিঙ্কগুলির একটি সংকলন তৈরি করা যেতে পারে, তারপরে একটি টেবিলের সাথে এটি সমস্ত আবার সেলাইয়ের চেষ্টা করে। এটি ব্যবহার করেও সম্পন্ন হতে পারে চিত্র মানচিত্র তবে এর জন্য সাধারণত সমন্বয় ব্যবস্থা তৈরির জন্য একটি সরঞ্জাম প্রয়োজন। ক্যাসকেডিং স্টাইল শিটগুলি ব্যবহার করা এটিকে আরও সহজ করে তোলে ... কোনও ঝাঁকানো চিত্র এবং আপনার সমন্বয় ব্যবস্থা তৈরির জন্য কোনও সরঞ্জাম সন্ধানের চেষ্টা করা হয়নি!

  1. আপনার চিত্রটি ব্যবহার করুন যা আপনি ব্যবহার করতে চান Build আপনি এই গ্রাফিকটি নীচে ব্যবহার করতে পারেন (ডান ক্লিক করুন এবং ডাউনলোড হিসাবে সংরক্ষণ করুন):
    অপশন সমূহ
  2. আপনার চিত্রটি আপনার সিএসএসের সাথে সম্পর্কিত কোনও ডিরেক্টরিতে আপলোড করুন। ওয়ার্ডপ্রেসে, আপনার থিম ডিরেক্টরিতে ইমেজ ফোল্ডারে রেখে এটি সবচেয়ে সহজ করা যায়।
  3. আপনার এইচটিএমএল যুক্ত করুন। এটি দুর্দান্ত এবং সহজ ... একটি ডিভ যার সাথে তিনটি লিঙ্ক রয়েছে:
    > ডিভি আইডি = "সাবস্ক্রাইব">> একটি আইডি = "আরএসএস" href = "[আপনার ফিডের লিঙ্ক]" শিরোনাম = "আরএসএসের সাথে সাবস্ক্রাইব করুন" >> স্প্যান ক্লাস = "আড়াল"> আরএসএস> / স্প্যান </ a>> একটি আইডি = "ইমেল" href = "[আপনার ইমেল সাবস্ক্রাইব লিঙ্ক]" শিরোনাম = "ইমেলের সাথে সাবস্ক্রাইব" >> স্প্যান ক্লাস = "আড়াল"> ইমেল> / স্প্যান </ a>> একটি আইডি = "মোবাইল" href = "[আপনার মোবাইল লিঙ্ক]" শিরোনাম = "মোবাইল সংস্করণ দেখুন" >> স্প্যান ক্লাস = "লুকান"> মোবাইল> / স্প্যান </ a> </ div>
    
  4. আপনার ক্যাসকেডিং স্টাইল শীট সম্পাদনা করুন। আপনি 6 টি বিভিন্ন শৈলী যুক্ত করা হবে। সামগ্রিক ডিভের জন্য 1 স্টাইল, একটি ট্যাগের জন্য 1 যাতে এটি কোনও পাঠ্য সজ্জা প্রদর্শন না করে, পাঠ্যটি আড়াল করার জন্য 1 স্টাইল (অ্যাক্সেসযোগ্যতার জন্য ব্যবহৃত) এবং প্রতিটি লিঙ্কের জন্য 1 টি স্টাইলের স্পেসিফিকেশন:
    # সাবস্ক্রাইব {/ * পটভূমি চিত্র ব্লক * / প্রদর্শন: ব্লক; প্রস্থ: 215px; উচ্চতা: 60px; পটভূমি: ইউআরএল (চিত্র / অপশনগুলি। png) নো-রিপিট; মার্জিন-শীর্ষ: 0 পিক্স; s # সাবস্ক্রাইব একটি {পাঠ্য-সজ্জা: কিছুই নয়; h। hide {দৃশ্যমানতা: লুকানো; } # আরএসএস {/ * আরএসএস লিঙ্ক * / ফ্লোট: বাম; অবস্থান: পরম; প্রস্থ: 50px; উচ্চতা: 50px; মার্জিন-বাম: 20px; মার্জিন-শীর্ষ: 5px; } # ইমেল {/ * ইমেল লিঙ্ক * / ফ্লোট: বাম; অবস্থান: পরম; প্রস্থ: 50px; উচ্চতা: 50px; মার্জিন-বাম: 70px; মার্জিন-শীর্ষ: 5px; m # মোবাইল {/ * মোবাইল লিঙ্ক * / ফ্লোট: বাম; অবস্থান: পরম; প্রস্থ: 50px; উচ্চতা: 50px; মার্জিন-বাম: 130px; মার্জিন-শীর্ষ: 5px; }

অবস্থানটি সুন্দর এবং সহজ ... একটি উচ্চতা এবং প্রস্থ যুক্ত করুন এবং তারপরে চিত্রের বাম দিক থেকে বাম মার্জিন এবং চিত্রের উপরের দিক থেকে শীর্ষ প্রান্তটি সেট করুন!

এই "কিভাবে" পোস্টটি প্রবেশের জন্য গীকস সেক্সি চূড়ান্ত "কীভাবে" প্রতিযোগিতা! একটি দ্রষ্টব্য, এটি সত্য যে কোনও চিত্রের মানচিত্রে আরও অনেকগুলি বহুভুজ থাকতে পারে তবে সত্যিকারের এমন অনেকগুলি জায়গা আমি এখনও দেখিনি। আমি লক্ষ্য করেছি যে গিক্সের বড় ওল আরএসএস চিত্র হ'ল সেক্সি সাইডবার… এটি কোনও লিঙ্কের জন্য ভাল জায়গা। 😉

পরামর্শের সাথে আরও ভাল অ্যাক্সেসযোগ্যতার জন্য 10/3/2007 আপডেট হয়েছে ফিল!

স্পনসর: আপনি যদি ওয়েব ডিজাইনের নবাগত হন, তবে এইচটিএমএল এবং সিএসএস ব্যবহার করে আপনার নিজস্ব ওয়েব সাইটটি সঠিক উপায়ে তৈরি করুন, দ্বিতীয় সংস্করণটি অবশ্যই হওয়া উচিত। সহজে অনুসরণযোগ্য এই গাইডটিতে আপনি কীভাবে কোনও ওয়েবসাইটকে সেরা উপায়ে তৈরি করবেন তা শিখতে পারবেন - নিজে নিজেই!

41 মন্তব্য

  1. 1

    ডগ, এটি একটি দুর্দান্ত পদ্ধতির মতো বলে মনে হচ্ছে তবে এটি খুব অ্যাক্সেসযোগ্য।

    স্ক্রিন রিডার সহ একজন অন্ধ ব্যবহারকারীর কথা বিবেচনা করুন, কেবল পাঠ্য ব্রাউজারযুক্ত ব্যবহারকারী বা সিএসএস বা চিত্রগুলি ব্যতীত সাইটটিতে আসা যে কেউ সক্ষম (যেমন সম্ভবত কোনও মোবাইল ব্যবহারকারী আপনার মোবাইল বন্ধুত্বপূর্ণ সাইটের লিঙ্কটি খুঁজছেন)। তাদের কোনও লেখা নেই বলে এই তিনটি লিঙ্ক সম্পর্কে জানবেন না। চিত্রগুলি বন্ধ থাকলে কোনও ব্যবহারকারী সেখানে কী থাকত তা বর্ণনা করার জন্য এমনকি Alt পাঠ্য দেখতে পাবেন না কারণ এটি একটি ব্যাকগ্রাউন্ড চিত্র।

    চিত্রগুলি টুকরো টুকরো করা, তাদের লিঙ্ক করা, একটি তালিকায় রাখা এবং একে অপরের পাশে ভাসিয়ে নেওয়া আরও ভাল। অথবা লিঙ্কগুলির জন্য পাঠ্যটি ব্যবহার করুন এবং একটি স্ট্যান্ডার্ড চিত্র প্রতিস্থাপন কৌশল ব্যবহার করে পাঠ্যটি প্রতিস্থাপন করুন। এটি সুবিধাজনক বলে মনে হচ্ছে তবে এটি স্ট্যান্ডার্ড গ্রাফিকাল ব্রাউজার ব্যবহার না করে এমন জিনিসগুলিকে অনেক কঠিন / অসম্ভব করে তোলে।

    • 2

      আমি আলতো করে (যেহেতু আপনার আরও দক্ষতা আছে) একমত নন, ফিল, প্রতিটি লিঙ্কের একটি শিরোনাম রয়েছে যাতে প্রতিটি সম্পূর্ণ অ্যাক্সেসযোগ্য। পাঠ্যের শিরোনামগুলি পাঠ করা JAWS এর মতো অ্যাক্সেসযোগ্যতার অ্যাপ্লিকেশনগুলির সক্ষমতা। এখানে একটি লিঙ্কে শিরোনাম এবং অ্যাক্সেসযোগ্যতার উপর এর প্রভাব সম্পর্কে ভাল পোস্ট.

      • 3

        ডগ,

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

        পাঠ্য ব্রাউজারগুলির জন্য, আপনি যে লিঙ্কটি আমাকে সেই লিঙ্ক্সের দিকে দেখিয়েছেন সেটি আপনাকে লিঙ্ক শিরোনামের একটি তালিকাও আনতে দেয়, তবে আমার বক্তব্যটি রয়ে গেছে যে আপনি যদি না জানতেন তবে সেখানে কোনও লিঙ্ক ছিল, কারণ প্রথম স্থানটিতে কোনও পাঠ্য ছিল না there , আপনি কেন শিরোনাম পাঠ্যের জন্য সন্ধান করবেন?

        শেষ অবধি, লিঙ্ক শিরোনাম বৈশিষ্ট্যগুলি চিত্রের সক্ষম বা CSS সক্ষম ব্যতীত ব্রাউজিংয়ের জন্য এখনও উপস্থিত হবে না।

        সুতরাং হ্যাঁ, শিরোনামগুলির সাথে লিঙ্কগুলি বাইরেরগুলির চেয়ে ভাল তবে এই ক্ষেত্রে এটি কেবলমাত্র প্রান্তিক।

        এ কারণেই কোনও চিত্র ব্যবহার করে, যাতে Alt পাঠ্যটি পড়তে পারে বা চিত্র প্রতিস্থাপন করা যায়, যাতে পাঠ্যটি সেখানে থাকে অনেক বেশি নিরাপদ, আরও অ্যাক্সেসযোগ্য এবং আরও ব্যবহারযোগ্য বিকল্প।

        • 4

          ভাল তথ্য, ফিল। আমি এটি পাঠ্যের সাহায্যে আরও বাড়ানোর চেষ্টা করতে যাচ্ছি তবে কেবল পাঠ্যটি আড়াল করব - সেইভাবে JAWS এর মতো একটি অ্যাক্সেসযোগ্য পণ্য লিঙ্কের পাঠ্যটি পড়বে এবং CSS বা চিত্রগুলি অক্ষম করা থাকলে পাঠ্যটি প্রদর্শিত হবে।

          আমি একমত নই যে, কেবলমাত্র একটি অ্যাক্সেসযোগ্য সমাধান হ'ল কোনও লিঙ্ক সহ কোনও চিত্র রাখা to

  2. 5
    • 6
      • 7

        এটি এমন কিছু যা আমরা প্রায়শই মনোযোগ দিই না, ফিল! পাশাপাশি, আপনার অ্যাপ্লিকেশনটিকে অ্যাক্সেসযোগ্য করার ক্ষেত্রে প্রায়শই ভাল অনুসন্ধান ইঞ্জিনের ফলাফলও রয়েছে।

        আমি সত্যিই দক্ষতা এবং প্রতিক্রিয়া প্রশংসা করি!

  3. 8

    আমি এটি চুরি করেছিলাম. সেখানে, আমি এটা বলেছি।

    ডগ, গ্রাফিকগুলি দুর্দান্ত এবং কোডিংটি এতটাই অবিশ্বাস্যরকম সহজ যে আমাকে ভয় দেয় (সিএসএসের সাথে খেলছে এবং এখন অবশেষে আমি "এটি পেয়েছি")।

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

    আমি আপনাকে এখনও এই কফি কিনতে হবে!

  4. 10

    ডগ,

    আমি একটি মতবিরোধ হতে চলেছি, উদাহরণ হিসাবে আমার অভিজ্ঞতা ব্যবহার করে। আমি আমার ইমেলগুলি মনে করি যখন আমার বাড়ির ইমেলগুলি পরিবর্তিত হয়েছিল এবং আপনি উল্লেখ করেছেন যে আমাকে কেবল আমার নতুন ইমেলটি বেছে নিতে হয়েছিল। আমাকে স্বীকার করতে হবে যে আপনার সাইটের নতুন বৈশিষ্ট্যটি আবার বেছে নেওয়ার জন্য আমার কাছে "আবিষ্কার" করার সময় ছিল time এর অংশটি ছিল কারণ আসল লিঙ্কটি কিছুটা বেশি traditionalতিহ্যবাহী ছিল এবং আমি এটি অস্পষ্টভাবে মনে রেখেছিলাম one অন্যটি ছিল কারণ পাশের পাশে অর্ধেক খামটি আমার কাছে প্রথমে খামের মতো লাগে না। প্রায় 5 বা ততোধিক মিনিট পরে আমি প্রতিটি চিত্রের উপর দিয়ে আমার মাউসটি ঘূর্ণন শুরু করি এবং যখন "ইমেলের সাথে সাবস্ক্রাইব করুন" শিরোনামটি প্রদর্শিত হয়, তখন আমি জানতাম যে আমি ব্যবসা করছি। আমার মস্তিষ্কও লিঙ্ক ছবিটি কী তা বুঝতে পেরেছিল।

    তবে কমপক্ষে আমার কাছে, পাশের একটি খামটি ইমেল বিজ্ঞপ্তিগুলিতে সাবস্ক্রাইব করার জায়গা হিসাবে আমার পক্ষে স্বজ্ঞাত ছিল না। এবং (কারণ আমাকে সর্বদা সুন্দর কিছু দিয়ে শেষ করতে বলা হয়েছিল) আমি উপরে ফিলের সাথে একমত; পদ্ধতিটি সত্যিই সহজ এবং পুরো আইটেমটি দুর্দান্ত কাজ করে। আপনার ডিজাইনের সরঞ্জামটি আপনাকে 3 টি বিভাগের সঠিক মাত্রা দিতে সহায়তা করেছে; এটা কি সঠিক অনুমান? আমাকে ধরে নিতে হবে, যেহেতু আমার কাছে যদি বলি, একটি 400 পিক্সেল প্রশস্ত চিত্র আমার সঠিক সেটিংস ইত্যাদি জানা দরকার etc.

    • 11

      বব

      এটা দুর্দান্ত প্রতিক্রিয়া! আমি চিত্রটির উপরে একটি সামান্য নোট যুক্ত করেছি যা সরাসরি লোকদের আরও ভালভাবে সহায়তা করে।

      ধন্যবাদ!
      ডগ

  5. 12
    • 13

      উইলিয়াম,

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

      ডগ

  6. 14

    সবকিছু এফএফ এবং আইই উভয় ক্ষেত্রেই কাজ করছে বলে মনে হচ্ছে… আমি মনে করি আপনি যখন খুব একটা কাজ করছিলেন না এমন একটি প্লাগইন টুইঙ্ক করার চেষ্টা করছিলেন তখন আপনি সম্ভবত সেই সাইটে থাকতে পারেন… 😉

  7. 15
  8. 16
  9. 17
  10. 18

    চমৎকার পন্থা, তবে টপোগ্রাফিক মানচিত্রের জন্য আমার কিছু দরকার, তাই আমি আয়তক্ষেত্র অঞ্চলগুলি ব্যবহার করতে পারি না… আমার মনে হয় স্থানাঙ্কগুলি সহ আমাকে পুরানো শৈলীর চিত্রম্যাপটি ব্যবহার করতে হবে, তবে আমি সম্ভবত কিছুটা গভীর খনন করব…

  11. 19

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

  12. 20

    ওয়ার্ডপ্রেসে কাজ করার সময় আমরা কোথায় "এইচটিএমএল ড্রপ করি"। আমার সমস্ত কিছু সিএসএস এবং পিএইচপি পৃষ্ঠাগুলি।

  13. 21

    হাই ডগ,
    আমি একটি পূর্ববর্তী মন্তব্য রেখেছি তবে বুঝতে পেরেছিলাম যে আমি আমার দ্বিধাদ্বন্দ্বের পক্ষে খুব কমই অন্তর্দৃষ্টি দিয়েছি। আমাদের অনলাইন সিটকম এখানে চালু করতে আমাদের সহায়তার জন্য আমরা একটি ওয়ার্ডপ্রেস থিমটি রূপান্তর করছি:

    http://www.phaylen.com/blog/

    এখন, আপনি দেখতে পাবেন যে আমাদের উপরে শীর্ষে একটি নেভিগেশন ব্যানার রয়েছে, এটি এমন একটি চিত্র যা আমরা ম্যাপ করার উদ্দেশ্যেছিলাম যা আমাদের আগে কয়েক ডজন বার হয়েছে। / পামফোরহাদ। আমাদের মধ্যে কেউই সত্যই অপরিবর্তিত সিএসএস নয়, তবে আমরা পর্যাপ্ত পরিমাণে হোঁচট খেয়েছি এবং এ পর্যন্ত এ পর্যন্ত সঠিক কাজ করেছি। আপনার দেওয়া নিখরচায় কয়েক জনের মধ্যে কেবলমাত্র নিবন্ধটি সিএসএসে সহজেই কীভাবে ইমেজম্যাপিংটি ব্যবহার করতে হয় সে সম্পর্কে প্রকৃত অন্তর্দৃষ্টি। আমি আপনার দিকনির্দেশনা অনুসারে স্টাইলশীটটি বের করে দিয়েছি, তবে এইচটিএমএলটি কোথায় রাখব সে সম্পর্কে কোনও ধারণা নেই। আপনি যা বলেছেন তা হ'ল "আপনার এইচটিএমএল যুক্ত করুন ... এটি দুর্দান্ত এবং সহজ" এবং তারপরে আমি ক্রিংড হয়েছি কারণ আমি ভেবেছিলাম .. "আমার পক্ষে যথেষ্ট সহজ নয়!" আমি জানতাম না যে আমি থিম সম্পাদকের এই কোনও পিএইচপি পৃষ্ঠায় html যুক্ত করতে পারি। আমি কি শিরোনামে এইচটিএমএল রাখছি? মূল সূচক টেম্পলেট? কার্যাবলী? আমি ধরে নিই যে সমস্ত ওয়ার্ডপ্রেস ব্যবহারকারীদের ড্যাশবোর্ড সম্পাদকটিতে তাদের থিমটি সম্পাদনা করার বিকল্প রয়েছে যা কার্যকরীতায় বেশ সর্বজনীন বলে মনে হয়। আপনি যদি এইচটিএমএলটি কোথায় রাখবেন সে বিষয়ে পরামর্শ দিতে পারলে আমি আমার নেভিগেশন বারের জন্য oru কোডটি মানিয়ে নিতে পছন্দ করব।

    সম্প্রদায়ের সাথে আপনার জ্ঞান ভাগ করে নেওয়ার জন্য ধন্যবাদ। আমি আপনাকে একটি কফি পেয়ে খুশি।

    • 22

      হাই ফাই!

      আপনার ব্লগের থিমের সমস্ত ফাইল সম্পাদনা করার জন্য অ্যাডমিন প্যানেলের মাধ্যমে উপলব্ধ। আপনি যদি উপস্থাপনা এবং তারপরে থিম সম্পাদককে ক্লিক করেন তবে ডানদিকে আপনার ফাইলগুলির একটি তালিকা এবং বাম দিকে একটি সম্পাদক দেখতে পারা উচিত।

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

      একটি দ্রষ্টব্য: স্টাইলশিট সম্পাদনাটি আপনার পৃষ্ঠার সাথে সম্পর্কিত, সুতরাং আপনি যদি থিমের অন্যান্য চিত্রের মতো চিত্রটিকে উল্লেখ করছেন তবে আপনার ছবিটি থিম চিত্র ডিরেক্টরিতে আপলোড করতে হবে।

      আশা করি এইটি কাজ করবে!

    • 23

      ফাই,
      আমি আজ এই সাইটটি পেরিয়ে এসেছি এবং আপনার মত একই দ্বিধা ছিল। আমি শিরোনামের চিত্রটিতে একটি চিত্র মানচিত্র যুক্ত করতে চেয়েছিলাম। এটির সাথে কিছুক্ষণ খেলা করার পরে, আমি এটি ঠিক পেয়েছি। Header.php ফাইলে Div HTML রাখুন। আমি এটি এবং এর মধ্যে রাখি। আপনার টেম্পলেটটিতে সেই সঠিক কোডিং রয়েছে কিনা তা নিশ্চিত নন তবে এটির সাথে শিরোনাম.পিএফপি ফাইলটিতে খেলুন এবং আপনি এটি বের করে ফেলবেন।
      -
      পল

  14. 24

    দ্রুত সাড়া দেওয়ার জন্য ধন্যবাদ!

    না, আমি এটি তেমন সাইডবারে থাকতে চাইনি, এটি পৃষ্ঠার শীর্ষে (আপনি প্রদত্ত লিঙ্কটিতে দেখতে পারেন- গোলাপী নেভিগেশন বার যা কনটেন্ট্ট বলেছে, শো ইক্যোটে সম্পর্কে ..)

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

    আপনার সময় এবং একজন নবজাতকের কাছ থেকে ফিল্ডিংয়ের জন্য অনেক ধন্যবাদ।

    ফয়

  15. 25

    … বা হতে পারে যে কেউ কোডের এইচটিএমএল অংশটি আমরা রাখি সে সম্পর্কে মন্তব্যগুলিতে কেউ পোস্ট করতে পারে few একটি ভদ্রলোক কয়েক পোস্ট লিখেছেন যে তিনি এটি বের করেছেন। আমি এত ভাগ্যবান ছিলাম না।

    ফ্যালেন

  16. 26
  17. 27

    ওয়ার্ডপ্রেসে ক্লিকযোগ্য চিত্রের মানচিত্র এম্বেড করার কোনও উপায় খুঁজে পাওয়ায় আমার বেশিরভাগ সময় নষ্ট হচ্ছে কারণ এটি এইচটিএমএল মানচিত্রের ট্যাগগুলিকে স্ট্রিপ করে। আপনার উপায় কাজ করবে কিন্তু মার্কিন মানচিত্রের স্পষ্টতই জটিল উপায় এই উপায় সঙ্গে স্ক্রু। আমি শেষ.

    সাহায্য।

    মনে হচ্ছে ফ্ল্যাশ আমার একমাত্র বিকল্প?

    • 28

      ডেভ,

      আপনি যদি আপনার টেম্পলেটটিতে চিত্রটি রাখেন তবে আপনি ভাল থাকবেন। আপনি যদি সত্যিকারের সামগ্রীতে চিত্রের মানচিত্রটি রেখে দেন তবে আপনি ফিল্টার সমস্যাগুলিতে দৌড়াতে পারেন। আমি এর চারপাশে যেভাবে কাজ করেছি তা ভয়ানক, তবে অনেক সময় আমি আইফ্রেমে ব্যবহার করেছি।

      ডগ

  18. 29

    হাই,

    মনে হচ্ছে চিত্রের মানচিত্র এবং লিঙ্কগুলি দুটি আলাদা জিনিস, তারা এইচটিএমএল-তে কোনও চিত্র মানচিত্র কীভাবে কাজ করে তা একসাথে কাজ করবেন না

    আমি যখন চিত্রের মানচিত্রের জন্য ব্যাকগ্রাউন্ড পজিশনিং (মাঝখানে বামে) অন্তর্ভুক্ত করি তখন লিঙ্কগুলির অবস্থান অনুসরণ করে না।

    এই কাছাকাছি পেতে কোন উপায়? আমি খুব অপেশাদার। ধন্যবাদ.

  19. 31

    আমি যেমন ব্যবহার করার চেষ্টা করছি তেমন কোনও বৃহত্তর এবং জটিল চিত্র মানচিত্রের জন্যও কি একই জাতীয় দৃষ্টিভঙ্গি ব্যবহার করা হবে?

    আপনি যদি আমার সাইটটি দেখেন তবে বাম দিকে লিঙ্কগুলিতে ক্লিক করুন এবং আপনি যে চিত্রটি ব্যবহার করতে চাইছেন সেটি চিত্র ম্যাপ হিসাবে ব্যবহার করতে চাইছেন (পাঠ্য বর্ণমালার নীচে)।

    মূলত, চিঠির মাধ্যমে এই তালিকার প্রতিটি বিভাগে যাওয়ার জন্য চিত্রটি ব্যবহার করার চেষ্টা করা হচ্ছে।

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

    যদিও, ফ্ল্যাশ ব্যবহার করে চিন্তা করতে পারে

    ধন্যবাদ.

  20. 33

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

  21. 34

    হ্যালো, আমি জুমলায় আমার ওয়েবসাইটটি তৈরি করেছি ... আমি আমার পাতার লোগোটিকে বাড়ির লিঙ্ক তৈরি করতে এই পদ্ধতিটি ব্যবহার করতে চাই, আমাকে বলা হয়েছে আপনি জুমলা দিয়ে এটি করতে পারবেন না তবে এই নিবন্ধটি আমাকে আশা দেয়! ইমেলের মাধ্যমে সাহায্যের প্রশংসা করা হবে ... ধন্যবাদ

  22. 35

    হাই ডগ - আমি বরং একটি জটিল সিএসএস-ভিত্তিক চিত্র মানচিত্র তৈরি করছি যাতে দূরবর্তী রোলওভারগুলিও রয়েছে (এই ক্ষেত্রে, আপনি যখন চিত্রের হটস্পটগুলির মধ্যে একটি হোভার করেন তখন পৃষ্ঠায় অন্য কোথাও পাঠ্য প্রদর্শিত হয়)। যেভাবেই হোক না কেন, গবেষণা করার সময় আমি এখানে আপনার উদাহরণটি দেখতে পেয়েছি ... এবং আমি ভেবেছিলাম যে আমি নিম্নলিখিত ইনপুটটি ভাগ করব:

    ১. অ্যাক্সেসিবিলিটির জন্য, আপনার দৃশ্যমানতা ব্যবহার করা উচিত নয়: এখানে পাঠ্যটি আড়াল করার জন্য কিছুই (বা প্রদর্শন: কোনওটিই যদি আপনি বিবেচনা করেন না), দৃশ্যমানতার সাথে স্টাইলযুক্ত উপাদান হিসাবে: লুকানো পর্দার পাঠকরা পড়বেন না (যাঁরা অনুমান অনুসরণ করে) ।

    পরিবর্তে, আরও দৃ rob় চিত্র প্রতিস্থাপন কৌশল ব্যবহার করুন। আমি ফার্ক পদ্ধতি বা গিল্ডার / লেভিনকে পরামর্শ দিই - এগুলি বেসিক কৌশলগুলি অনুসন্ধান করার জন্য গুগলের কাছে কেবল আরও ভাল নথিভুক্ত নাম। আমি জি / এল পছন্দ করি কারণ এটি সিএসএস সক্ষম থাকলেও চিত্রগুলি বন্ধ রয়েছে।

    ২. যদিও আমি এটি ভঙ্গ করতে দেখছি না (এফএফ 2 ব্যবহার করে), আপনার অবস্থান নির্ধারণেরও সহজাত ঝুঁকি রয়েছে। একেবারে অবস্থানযুক্ত উপাদানটি তার নিকটস্থ অবস্থানযুক্ত পিতামাতার তুলনায় অবস্থিত। মূলত, আপনি # সাবস্ক্রিপশনে 'অবস্থান: আপেক্ষিক' প্রয়োগ করে স্পষ্টভাবে একটি অবস্থানের প্রসঙ্গ সেট করতে চান। তারপরে বাচ্চাদের (অবস্থানযুক্ত লিঙ্কগুলি) সেই পিতামাতার মধ্যে অবস্থান করা যায়। এই পদ্ধতিটি ব্রাউজারগুলিতে আরও নির্ভরযোগ্য ফলাফল নিশ্চিত করতে সহায়তা করে।

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

    ৩. অবশেষে, কেন এই লিঙ্কগুলির জন্য অর্থহীন ডিভের পরিবর্তে শব্দার্থবিহীন শব্দবিহীন তালিকাটি ব্যবহার করবেন না?

    ড্রোন করার জন্য দুঃখিত… আমি ঠিক ভাগ করে নিতে চাই, খ / সি আমি পছন্দসই ফলাফল পেতে CSS ব্যবহার করার বিভিন্ন উপায় কীভাবে পেয়েছি তা অভিজ্ঞতা থেকে জানি তবে কিছু উপায় অবশ্যই অন্যের চেয়ে আরও ভাল (আরও নির্ভরযোগ্য, ক্রস ব্রাউজার) কাজ করে । এইচটিএইচ।

  23. 36

    আমার অনলাইন চিত্র ম্যাপিং সরঞ্জামটি এখন সিএসএস চিত্র মানচিত্রের পাশাপাশি এইচটিএমএল চিত্র মানচিত্রগুলিও করে।

    এখানে লিঙ্ক
    অনলাইন চিত্র মানচিত্র সরঞ্জাম - এইচটিএমএল এবং সিএসএস

  24. 37

    ধন্যবাদ, ডগ! বেশ কয়েকটি টিউটোরিয়াল পর্যালোচনা করার পরে, আমি এটি আমার স্ত্রীর কুপন ব্লগে প্রয়োগ করছি, http://www.SavingWithAmy.com/। এটি অনুসরণ এবং বাস্তবায়নের জন্য এটি এখন পর্যন্ত সবচেয়ে সহজ এবং সর্বাধিক সোজা ফরোয়ার্ড টিউটোরিয়াল যা আমি পেরিয়ে এসেছি।

  25. 38

    তোমাকে অনেক ধন্যবাদ!! আপনার নির্দেশাবলী আমাকে HOURS কাজ বাঁচিয়েছে ... আমি ওয়েব বিকাশে নতুন এবং আমি আমার প্রথম বড় প্রকল্পের মধ্য দিয়েই ভুগছি। আমি এটি তৈরি করেছি ... ক্লায়েন্টটি খুশি, বাস্তবে খুশি, এবং আমিও তাই!

  26. 39

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

আপনি কি মনে করেন?

এই সাইট স্প্যাম কমাতে Akismet ব্যবহার করে। আপনার ডেটা প্রক্রিয়া করা হয় তা জানুন.