نحوه ساختن نقشه تصویر با 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 یا تصاویر بازدید می کند (مثلاً ممکن است یک کاربر تلفن همراه به دنبال پیوند به سایت دوستانه تلفن همراه شما باشد) در نظر بگیرید. هیچ یک از آنها از این سه پیوند اطلاع نخواهند داشت زیرا هیچ متنی ندارند. در صورت خاموش بودن تصاویر ، کاربر حتی متن alt را برای توصیف آنچه در آنجا بوده است مشاهده نمی کند زیرا این یک تصویر پس زمینه است.

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

    • 2

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

      • 3

        داگ ،

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

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

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

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

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

        • 4

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

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

  2. 5
    • 6
      • 7

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

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

  3. 8

    دزديدم آنجا گفتم

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

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

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

  4. 10

    داگ ،

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

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

  5. 12
    • 13

      ویلیام ،

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

      داگ

  6. 14

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

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

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

  11. 19

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

  12. 20
  13. 21

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

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

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

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

    • 22

      سلام فای!

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

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

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

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

    • 23

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

  14. 24

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

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

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

    با سپاس فراوان از وقت شما و پرسش های تازه وارد از شما.

    فای

  15. 25
  16. 26
  17. 27

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

    راهنما

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

    • 28

      دیو،

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

      داگ

  18. 29

    سلام،

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

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

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

  19. 31

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

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

    اصولاً سعی در استفاده از تصویر برای رفتن به هر قسمت از این لیست توسط نامه.

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

    اگرچه ، ممکن است با استفاده از Flash فکر کنید

    با تشکر.

  20. 33

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

  21. 34

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

  22. 35

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

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

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

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

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

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

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

  23. 36
  24. 37
  25. 38

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

  26. 39

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

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

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