نحوه ساختن نقشه تصویر با CSS

گزینه های

من یک چیز "geeky" می خواستم ، بنابراین تصمیم گرفتم یک گرافیک "جیبی" داشته باشم که تمام روشهای اشتراک وبلاگ من را داشته باشد.

در روزهای وب 1.0 ، می توان با پیوند دادن تصویر خود با پیوندها روی هر گرافیک ، مجموعه پیوندهایی از این دست را ایجاد کرد ، سپس سعی کرد همه را بهمراه جدول جدا کنید. همچنین می توان با استفاده از یک نقشه تصویر اما این معمولاً به ابزاری برای ایجاد سیستم مختصات نیاز دارد. استفاده از شیت های Cascading Style این کار را آسان تر می کند ... بدون برش تصاویر و هیچ تلاشی برای یافتن ابزاری برای ساخت سیستم مختصات خود!

  1. تصویر خود را که می خواهید استفاده کنید بسازید. می توانید از این گرافیک در زیر استفاده کنید (کلیک راست کرده و برای بارگیری ذخیره کنید):
    گزینه
  2. تصویر خود را در دایرکتوری مربوط به CSS خود بارگذاری کنید. در وردپرس ، این کار با قرار دادن در یک پوشه تصاویر در فهرست موضوع شما ، به راحتی انجام می شود.
  3. HTML خود را اضافه کنید. زیبا و ساده است ... یک div با سه پیوند در آن:
    > div id = "subscribe">> a id = "rss" href = "[لینک فید شما]" title = "اشتراک با RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[لینک اشتراک ایمیل شما]" title = "اشتراک با ایمیل" >> span class = "hide"> ایمیل> / span >> / a>> a id = "mobile" href = "[لینک موبایل شما]" title = "مشاهده نسخه موبایل" >> span class = "hide"> موبایل> / span >> / a>> / div>
    
  4. صفحه سبک آبشار خود را ویرایش کنید. شما 6 سبک مختلف اضافه خواهید کرد. 1 سبک برای تقسیم کلی ، 1 برای یک برچسب بنابراین هیچ دکوراسیون متنی را نشان نمی دهد ، 1 سبک برای مخفی کردن متن (برای دسترسی به آن استفاده می شود) و 1 مشخصات سبک برای هر یک از پیوندها:
    # اشتراک {/ * بلوک تصویر پس زمینه * / display: block؛ عرض: 215 پیکسل؛ ارتفاع: 60 پیکسل پس زمینه: url (images / options.png) بدون تکرار margin-top: 0px؛ } #subscribe a {text-decoration: none؛ } .hide {visibility: hidden؛ } #rss {/ * RSS Link * / float: left؛ موقعیت: مطلق؛ عرض: 50 پیکسل ارتفاع: 50 پیکسل margin-left: 20px؛ حاشیه بالا: 5px؛ } # ایمیل {/ * پیوند ایمیل * / float: چپ ؛ موقعیت: مطلق؛ عرض: 50 پیکسل ارتفاع: 50 پیکسل؛ margin-left: 70px؛ margin-top: 5px؛ } #mobile {/ * Mobile Link * / float: left؛ موقعیت: مطلق؛ عرض: 50 پیکسل ارتفاع: 50 پیکسل؛ margin-left: 130px؛ حاشیه بالا: 5px؛ }

موقعیت یابی خوب و ساده است ... یک ارتفاع و عرض اضافه کنید و سپس حاشیه سمت چپ تصویر را از سمت چپ و حاشیه بالای تصویر را از سمت بالای تصویر تنظیم کنید!

این پست "How To" برای ورود به سایت است گیک ها مسابقه نهایی "چطور" سکسی هستند! یک یادداشت ، درست است که یک نقشه تصویری می تواند چند ضلعی های بسیار پیچیده تری داشته باشد ، اما من واقعاً مکان های زیادی را که باید وجود داشته باشد ، ندیده ام. من متوجه شدم که تصویر بزرگ ol 'RSS در Geeks نوار کناری سکسی است ... این مکان خوبی برای پیوند است. 😉

برای دسترسی بهتر با مشاوره از 10/3/2007 به روز شده است فیل!

حامی: اگر تازه کار طراحی وب هستید ، وب سایت خود را به روش درست با استفاده از HTML و CSS بسازید ، نسخه 2 امری ضروری است. در این راهنمای آسان برای دنبال کردن ، شما یاد خواهید گرفت که چگونه یک وب سایت را به بهترین روش ممکن بسازید - با خودتان انجام دهید!

41 نظرات

  1. 1

    داگ، به نظر روش خوبی است، اما بسیار غیرقابل دسترس است.

    یک کاربر نابینا با یک صفحه خوان، یک کاربر با مرورگر فقط متن یا هر کسی که از سایت بدون CSS یا تصاویر فعال بازدید می کند (مثلاً یک کاربر تلفن همراه که به دنبال پیوند به سایت دوستدار موبایل شما است) را در نظر بگیرید. هیچ یک از آنها در مورد آن سه پیوند نمی دانند زیرا متنی ندارند. اگر تصاویر خاموش باشند، کاربر حتی متن جایگزین را برای توصیف آنچه در آنجا وجود داشت نمی بیند زیرا یک تصویر پس زمینه است.

    بهتر است تصاویر را برش دهید، آنها را پیوند دهید، آنها را در یک لیست قرار دهید و آنها را در کنار یکدیگر شناور کنید. یا حتی از متن برای پیوندها استفاده کنید و متن را با استفاده از تکنیک جایگزینی تصویر استاندارد جایگزین کنید. این کار راحت به نظر می رسد، اما کار را برای کسانی که از مرورگر گرافیکی استاندارد استفاده نمی کنند، سخت تر/غیرممکن می کند.

    • 2

      من به آرامی (از آنجایی که شما تخصص بیشتری دارید) مخالفم، فیل، هر یک از پیوندها یک عنوان دارند، بنابراین هر یک به طور کامل در دسترس است. خواندن عناوین متنی یکی از قابلیت های برنامه های کاربردی دسترسی مانند JAWS است. اینجا یک پست خوب در عناوین در پیوندها و تأثیر آن بر دسترسی.

      • 3

        داگ ،

        JAWS به طور پیش فرض عناوین پیوندها را نمی خواند، اما حق با شماست، می تواند این کار را انجام دهد. اگر نمی‌دانستید که آن لینک وجود دارد، چرا به دنبال عناوین پیوند می‌گردید، و حتی اگر می‌دانستید، مطمئناً این موضوع به یک مشکل قابلیت استفاده کاهش می‌یابد به این معنی که شما به کاربرانی که توانایی کمتری دارند، تجربه درجه دوم استفاده از سایت خود را ارائه می‌دهید.

        برای مرورگرهای متنی، مقاله ای که به من اشاره می کنید به Lynx نیز به شما امکان می دهد لیستی از عناوین پیوندها را بیاورید، اما حرف من این است که اگر نمی دانستید پیوندی در آنجا وجود دارد، زیرا از ابتدا متنی وجود نداشت. ، چرا دنبال متن عنوان می گردید؟

        در نهایت، ویژگی‌های عنوان پیوند هنوز برای افرادی که بدون تصاویر فعال یا بدون CSS فعال هستند، ظاهر نمی‌شوند.

        بنابراین بله، پیوندهایی با عنوان بهتر از موارد بدون عنوان هستند، اما در این مورد فقط حاشیه ای است.

        به همین دلیل است که استفاده از یک تصویر، به‌منظور خواندن متن جایگزین، یا جایگزینی تصویر، به‌منظور اینکه متن وجود داشته باشد، گزینه بسیار ایمن‌تر، در دسترس‌تر و قابل استفاده‌تر است.

        • 4

          اطلاعات خوب، فیل. من سعی خواهم کرد این را با متن تقویت کنم اما به سادگی متن را پنهان می کنم - به این ترتیب یک محصول قابل دسترسی مانند JAWS متن پیوند را می خواند و اگر CSS یا Images غیرفعال باشد، متن نمایش داده می شود.

          با این حال، من مخالفم که تنها راه حل قابل دسترس قرار دادن یک تصویر با پیوند است.

  2. 5
    • 6
      • 7

        این چیزی است که ما اغلب به آن توجه نمی کنیم، فیل! همچنین، در دسترس قرار دادن برنامه شما اغلب نتایج خوبی در موتورهای جستجو دارد.

        من واقعا از تخصص و بازخورد قدردانی می کنم!

  3. 8

    من آن را دزدیدم. اونجا گفتم

    داگ، گرافیک فوق‌العاده است و کدنویسی آنقدر ساده است که من را می‌ترساند (با CSS بازی می‌کردم و حالا بالاخره آن را دریافت کردم).

    کد را تغییر داد تا نیازهای من را برآورده کند، متوجه شدم که بیت HTML را در کجا قرار دهم، و صادقانه بگویم که عالی به نظر می رسد و بالای نوار کناری من را که مرا دیوانه کرده است، تمیز کرده است.

    من فقط ممکن است مجبور باشم آن قهوه را برای شما بخرم!

  4. 10

    داگ ،

    من با استفاده از تجربیاتم به عنوان مثال، صدای مخالفی خواهم بود. ایمیل‌هایمان را به یاد می‌آورم زمانی که ایمیل خانه‌ام تغییر کرد و شما متوجه شدید که باید به سادگی ایمیل جدیدم را انتخاب کنم. باید اعتراف کنم که برای انتخاب مجدد ویژگی جدید را در سایت شما "کشف" کردم. بخشی از این به این دلیل بود که لینک اصلی کمی سنتی تر بود و من به طور مبهم آن یکی را به خاطر آوردم. دیگری به این دلیل بود که نیمه پاکت کناری در ابتدا به نظر من یک پاکت نبود. پس از حدود 5 دقیقه یا بیشتر، من شروع به چرخاندن ماوس خود روی هر تصویر کردم و وقتی عنوان "اشتراک با ایمیل" نشان داده شد، متوجه شدم که در تجارت هستم. مغز من هم متوجه شد که تصویر پیوند چیست.

    اما، حداقل برای من، یک پاکت یک طرفه به عنوان مکانی برای اشتراک در اعلان‌های ایمیل برای من شهودی نبود. و (چون به من گفته شد که همیشه با چیز خوبی پایان دهم) من با فیل در بالا موافقم. روش واقعا ساده است و کل مورد عالی کار می کند. فکر می کنم ابزار طراحی شما به شما کمک کرد تا ابعاد دقیق 3 بخش را به شما ارائه دهد. آیا این یک فرض درست است؟ من باید چنین فرض کنم، زیرا اگر مثلاً یک تصویر 400 پیکسلی داشتم، باید تنظیمات درست و غیره را بدانم.

    • 11
  5. 12
    • 13

      ویلیام،

      به نظر می رسد ممکن است بین نام کلاس نظرات و نام کلاس در گرافیک نوار کناری تداخل داشته باشید. برای رفع تعارض می توانید آنها را متفاوت نام ببرید. اگر به دست نیاز دارید به من اطلاع دهید!

      داگ

  6. 14

    به نظر می رسد همه چیز هم در FF و هم در اینترنت اکسپلورر کار می کند ... فکر می کنم شما ممکن است در سایت بوده باشید در حالی که من سعی می کردم افزونه ای را تغییر دهم که کاملاً کار نمی کرد ... 😉

  7. 15

    عالی! من می خواهم این را بگیرم 🙂 از به اشتراک گذاری متشکرم. من آن هدر را دوست دارم، رفیق! من می خواهم یاد بگیرم که چگونه این کار را انجام دادی 🙂

    به سلامتی!

  8. 16
  9. 17
  10. 18

    روش خوبی است، اما من به چیزی برای نقشه توپوگرافی نیاز دارم، بنابراین نمی توانم از مناطق مستطیلی استفاده کنم ... فکر می کنم باید از نقشه تصویری سبک قدیمی با مختصات استفاده کنم، اما احتمالاً کمی عمیق تر می کنم ...

  11. 19

    ممنون از این اطلاعات، داگ. من قبلا اینجا بودم و تعجب کردم که چطور این کار را کردی. ما می خواستیم یک نقشه مانند آن ایجاد کنیم تا بعد از پست های خود درج کنیم، و اکنون که ابزار داریم، می توانیم این کار را انجام دهیم. براوو!

  12. 20
  13. 21

    سلام داگ ،
    من یک نظر قبلی گذاشتم اما متوجه شدم که اصلاً بینشی در مورد معضل خود ارائه نکرده ام. ما یک موضوع وردپرس را برای کمک به راه‌اندازی کمدی آنلاین خود در اینجا تطبیق داده‌ایم:

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

    اکنون، خواهید دید که ما یک بنر ناوبری در بالای صفحه داریم، تصویری که قصد داشتیم مانند ده ها بار قبل نقشه برداری کنیم. /palmforehad. هیچکدام از ما واقعاً CSS را نمی‌دانیم، اما به اندازه کافی دست و پنجه نرم می‌کنیم و تا اینجای کار به خوبی عمل کرده‌ایم. مقاله شما در ONLY ONE از ده ها مقاله ارائه شده، بینش واقعی در مورد نحوه استفاده آسان از تصویر نقشه در CSS است. من شیوه نامه را مطابق دستورالعمل شما ویرایش کردم، اما نمی دانم HTML را کجا قرار دهم. تنها چیزی که گفتید این بود که "HTML خود را اضافه کنید... این زیبا و ساده است" و سپس من هول کردم زیرا فکر کردم ... "به اندازه کافی برای من ساده نیست!" من نمی دانستم که می توانم html را به هر یک از این صفحات php در ویرایشگر تم اضافه کنم. آیا html را در هدر قرار دهم؟ الگوی شاخص اصلی؟ توابع؟ من فرض می‌کنم همه کاربران وردپرس این امکان را دارند که موضوع خود را در ویرایشگر داشبورد ویرایش کنند، که از نظر عملکرد بسیار جهانی به نظر می‌رسد. اگر می توانید پیشنهاد دهید که html را کجا قرار دهم، من دوست دارم کد oru را برای نوار ناوبری خود تطبیق دهم.

    با تشکر از به اشتراک گذاری دانش خود با جامعه. خوشحالم که براتون یه قهوه میارم

    • 22

      سلام فی!

      همه فایل‌های موضوع وبلاگ شما از طریق پنل مدیریت برای ویرایش در دسترس هستند. اگر روی Presentation و سپس Theme Editor کلیک کنید، باید بتوانید لیستی از فایل های خود را در سمت راست و یک ویرایشگر را در سمت چپ مشاهده کنید.

      اگر می خواهید این در نوار کناری شما باشد، احتمالاً یک صفحه Sidebar دارید. برای ویرایش آن کلیک کنید و سپس HTML ارائه شده را در صفحه ای که می خواهید قرار دهید.

      یک نکته: ویرایش شیوه نامه مربوط به صفحه شماست، بنابراین اگر به آن ارجاع می دهید، باید عکس را در فهرست تصاویر تم آپلود کنید.

      امید است که کمک می کند!

    • 23

      فی،
      من امروز با این سایت برخورد کردم و مثل شما دچار مشکل شدم. من همچنین می خواستم یک نقشه تصویر به تصویر هدر اضافه کنم. بعد از مدتی بازی با آن، درست متوجه شدم. div HTML را در فایل header.php قرار دهید. من آن را بین و . مطمئن نیستید که الگوی شما دقیقاً کدنویسی دارد یا خیر، اما با آن در فایل header.php بازی کنید و متوجه خواهید شد.
      -
      پل

  14. 24

    از پاسخ سریع شما سپاسگذاریم!

    نه، من نمی‌خواستم در نوار کناری باشد، در بالای صفحه است (می‌توانید در لینکی که ارائه کرده‌ام ببینید - نوار پیمایش صورتی که می‌گوید contant، درباره نمایش و غیره)

    من تمام صبح را در داشبورد کار کرده ام، متأسفانه نمی دانم html را در کدام فایل قرار می دهم، همانطور که در بالا گفته شد، چندین مورد دارم، header.php، main index.php، functions.php، footer.php. من مطمئن نیستم کد html را کجا وارد کنم. (بخش اولی که ارائه کردید، من قبلاً بقیه را در استایل شیت خود قرار داده ام) من تصویر خود را در وب سایت دارم، همه چیز آماده است، فقط باید بدانم قسمت html کد را برای تطبیق کجا اضافه کنم.

    خیلی ممنون از وقتی که گذاشتید و سوالاتی را که از یک تازه کار مطرح کردید.

    فی

  15. 25

    ... یا شاید کسی می تواند در نظرات پست کند که در کدام فایل بخش html کد را قرار می دهیم. آقایی چند پست قبل گفت که متوجه شده است. من اینقدر خوش شانس نبودم

    فایلن

  16. 26
  17. 27

    من در حال پیدا کردن راهی برای جاسازی یک نقشه تصویر قابل کلیک در وردپرس هستم زیرا تگ های نقشه html را حذف می کند. راه شما کارساز خواهد بود، اما نقشه ایالات متحده بدیهی است که با این روش بسیار پیچیده است. من گم شده ام.

    راهنما

    به نظر می رسد که فلش تنها گزینه من است؟

    • 28

      دیو،

      اگر تصویر را در قالب خود قرار دهید، مشکلی نیست. اگر نقشه تصویر را در محتوای واقعی قرار دهید، ممکن است با مشکلات فیلتر مواجه شوید. روشی که من در مورد این کار کرده ام وحشتناک است، اما گاهی اوقات از iframe استفاده کرده ام.

      داگ

  18. 29

    سلام،

    به نظر می رسد که نقشه تصویر و پیوندها دو چیز متفاوت هستند، آنها مانند نقشه تصویر در html با هم کار نمی کنند.

    وقتی موقعیت پس‌زمینه (در مرکز سمت چپ) را برای نقشه تصویر اضافه می‌کنم، موقعیت‌یابی پیوندها دنبال نمی‌شود.

    راهی هست که از این بگذریم؟ من خیلی آماتور هستم متشکرم.

  19. 31

    آیا رویکرد مشابهی برای یک نقشه تصویری بزرگتر و پیچیده تر مانند آنچه من سعی می کنم استفاده کنم استفاده می شود؟

    اگر سایت من را مشاهده کردید، روی پیوندهای سمت چپ کلیک کنید و تصویری را که می‌خواهم به عنوان نقشه تصویر استفاده کنم (زیر الفبای متن) را مشاهده خواهید کرد.

    اساساً سعی می شود از Image برای رفتن به هر بخش از این لیست با حروف استفاده شود.

    بدیهی است که من 20 دقیقه وقت صرف ساختن یک نقشه با GIMP کردم و سپس WP تگ های نقشه را حذف می کند، بنابراین من سایت شما را پیدا کردم.

    با این حال، ممکن است با استفاده از فلش فکر کنید

    با تشکر.

  20. 33

    من در حال حاضر از طرح بندی قالب استفاده می کنم و با چیزهای خودم ویرایش می کنم. من می خواهم یک نقشه تصویر اضافه کنم، اما مطمئن نیستم که آن را در کجای css قرار دهم. تصویری که می خواهم از آن نقشه تهیه کنم در قسمت هدر است.

  21. 34

    سلام، من وب‌سایت خود را بر روی جوملا ساختم… می‌خواهم از این روش استفاده کنم تا لوگوی صفحه‌ام را به خانه پیوند دهم، به من گفته شده است که نمی‌توانید این کار را با جوملا انجام دهید، اما این مقاله به من امید می‌دهد! کمک از طریق ایمیل بسیار قدردانی خواهد شد….با تشکر از شما

  22. 35

    سلام داگ – من در حال ساختن یک نقشه تصویری نسبتاً پیچیده مبتنی بر css هستم که دارای جابجایی از راه دور نیز می باشد (در این مورد، وقتی یکی از نقاط اصلی تصویر را نگه دارید، متن در جای دیگری از صفحه نمایش داده می شود). به هر حال، من با مثال شما در اینجا هنگام تحقیق در مورد آن برخورد کردم ... و فکر کردم ورودی زیر را به اشتراک بگذارم:

    1. برای دسترس‌پذیری، نباید از visibility:none (یا از display:none اگر فکر می‌کنید) برای پنهان کردن متن در اینجا استفاده کنید، به‌عنوان عنصری که با visibility استایل داده شده است: hidden توسط صفحه‌خوان‌ها (کسانی که مشخصات را دنبال می‌کنند) خوانده نمی‌شود. .

    به جای آن، از تکنیک جایگزینی تصویر قوی‌تر استفاده کنید. من یا روش Phark یا Gilder/Levin را پیشنهاد می‌کنم – اینها فقط نام‌های مستند بهتری هستند که می‌توانید در گوگل جستجو کنید تا تکنیک‌های اساسی را پیدا کنید. من G/L را ترجیح می دهم زیرا با CSS فعال نیز کار می کند اما تصاویر خاموش هستند.

    2. در حالی که من آن را شکسته نمی بینم (با استفاده از FF3)، پیاده سازی موقعیت یابی شما خطرات ذاتی نیز دارد. یک عنصر کاملاً دارای موقعیت نسبت به نزدیکترین موقعیت والد خود قرار می گیرد. اساساً، شما می‌خواهید به طور صریح یک زمینه موقعیت‌یابی را با اعمال «موقعیت:نسبی» برای #اشتراک تنظیم کنید. سپس فرزندان (پیوندهای قرار گرفته) را می توان در درون آن والد قرار داد. این روش به اطمینان از نتایج مطمئن تر در مرورگرها کمک می کند.

    همچنین، پس از آن باید از اعلان های موقعیت یابی «بالا: x» و «چپ: x» (که در آن x مقدار افست، مثلاً به px است) به جای حاشیه ها برای مدیریت آن موقعیت استفاده کنید. باز هم، من لزوماً نمی بینم که آنطور که شما دارید خراب می شود، اما بالا و سمت چپ برای این منظور است، پس چرا از آنها استفاده نکنید؟ به علاوه، شناورها و حاشیه‌هایی را روی یک عنصر تنظیم کرده‌اید، که در شرایط خاص باعث ایجاد باگ «حاشیه مضاعف» در IE6 می‌شود (آیا آن را در آنجا تست کردید؟) - در حالی که یک راه حل وجود دارد، با استفاده از بالا از این مشکل کاملاً جلوگیری می‌کنید. و به جای حاشیه برای موقعیت یابی در این مورد باقی مانده است.

    3. در نهایت، چرا به جای div بی معنی، از یک لیست نامرتب از نظر معنایی برای این پیوندها استفاده نکنید؟

    با عرض پوزش به خاطر بی‌حوصلگی... من فقط می‌خواهم به اشتراک بگذارم، b/c از تجربه می‌دانم که چگونه روش‌های مختلفی برای استفاده از CSS برای رسیدن به نتیجه دلخواه وجود دارد، اما برخی از راه‌ها مطمئناً بهتر از سایرین کار می‌کنند (قابل اعتمادتر، مرورگر متقابل) . HTH.

  23. 36
  24. 37
  25. 38

    خیلی ممنونم!! دستورالعمل‌های شما باعث شد من ساعت‌ها کار کنم... من تازه وارد توسعه وب هستم و در اولین پروژه بزرگم زجر کشیدم. من آن را درست کردم ... مشتری خوشحال است، در واقع وجد است، و من هم همینطور!

  26. 39

    سلام، خیلی ممنون از ارسال این مطلب! سال ها بعد و هنوز هم کمک می کند ... خوب است! من در تلاش هستم تا نقشه تصویرم را در مکان مناسب پیوند دهم. من یک بنر دارم و می‌خواهم نمادهای اجتماعی در سمت راست بالای بنر با استفاده از کدی که شما ارائه کرده‌اید پیوند داده شوند. عالی کار می‌کند، با این تفاوت که من کار اشتباهی انجام می‌دهم زیرا پیوندهای من در سمت چپ بالای صفحه نمایش داده می‌شوند، نه روی نمادهای اجتماعی، بلکه روی لوگو. مطمئنم چیز ساده ای است، اما نمی توانم آن را بفهمم. فکر کردم اگر نظری دارید آن را در اینجا به اشتراک بگذارم. با تشکر دوباره برای ارسال این!

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.