پارس جوم :: انجمن های تخصصی جوملا
لینک دادن به بخش های مختلف یک عکس - نسخه‌ی قابل چاپ

+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: مباحث و مشکلات عمومی (/forum-33.html)
+--- موضوع: لینک دادن به بخش های مختلف یک عکس (/thread-12627.html)

لینک دادن به بخش های مختلف یک عکس - nvd.imani - ۲۷-۵-۱۳۹۲ ۰۷:۱۵ صبح

سلام دوستان خیلی وقته که دارم دنبال این مطلب مبگردم که چجوری میشه به بخش های مختلف یک عکس لینک های مختلف داد؟
مثل منوی اول همین سایت خودمون(که شامل :صفحه اول، لیست اعضا، جستجو، راهنمایی. میشه)
وقتی روی منو راست کلیک میکنی View Image میزنی یک عکس یک پارچه نشون داده میشه ولی موس روی بخش های مختلف همین عکس لینک ها مختلفی نشون میده
چجوری میشه این کارو کرد؟

لینک دادن به بخش های مختلف یک عکس - ocean - ۲۸-۵-۱۳۹۲ ۰۸:۱۷ عصر

سلام
در HTML5 این کار امکان پذیره با استفاده از خاصیت area shape
برای جدا کردن یک بخش مستطیلی در یک تصویر از کد زیر استفاده می کنید:
کد:
<area shape="rect" cords="000,000,111,111" href=enter.htm">
به جای 000,000 مختصات گوشه بالا سمت چپ و به جای 111,111 مختصات پایین سمت راست رو وارد می کنید، توجه کنید که جای 000 سمت چپ فاصله افقی و 000 سمت راست فاصله عمودی گوشه را نشان میدهد، در مورد اعداد 111 هم همین طور.
در قسمت href به جای enter.htm آدرس صفحه مورد نظر رو وارد می کنید.

برای جداکردن یه قسمت دایره ای از تصویر:
کد:
<area shape="circle" cords="000,111,111" href=enter.htm">
به جای 000 شعاع دایره و به جای 111,111 مختصات نقطه مرکزی دایره(111 سمت چپ فاصله افقی و 111 فاصله عمودی)

برای جدا کردن یک بخش چندضلعی از تصویر، درقسمت area shape داخل دو علامت "" poly بنویسید و در قسمت cords مختصات تمام گوشه های چندضلعی را قرار دهید.

باتشکر


منبع: کتاب آموزش گام به گام HTML5 ترجمه آقای امیر احسان رضایی

لینک دادن به بخش های مختلف یک عکس - سعید حمزه زاده - ۲۸-۵-۱۳۹۲ ۱۰:۱۷ عصر

البته میتونید با جستجو در گوگل در مورد mapping در html دقیقتر یاد بگیرید

یا علی