پرسش و پاسخ – کار با تصاویر در HTML

باید از تگ <img> استفاده کرد.
برای مثال لطفا اینجا کلیک نمایید

بله کاملا ضروری می باشد.
تنها با وجود صفت src در درون تگ <img> میتوان یک تصویر را به نمایش درآورد.

• صفت alt بطور کلی میاد و یک متن رو جایگزین فایل تصویر میکنه که اگر به هر دلیلی تصویر نمایش داده نشد، آن متن نمایش داده شود.
• صفت alt یکی از صفات بسیار مهم برای سئوی تصاویر و بطور کلی برای سئوی وبسایت می باشد.
• صفت alt بطور کلی هویت یا شناسنامه ی یک تصویر می باشد.
• گوگل تاکید میکنه که حتما از این صفت در درون تگ <img> استفاده نمایید.

برای مثال لطفا اینجا کلیک نمایید (در این مثال جهت نمایش صفت alt ،فایل تصویر نمایش داده نمی شود)

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

باید از تگ <img> در درون تگ <a> استفاده کرد.
برای مثال لطفا اینجا کلیک نمایید

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

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

سلام و عرض ادب خدمت شما دوست عزیز و محترم
خوشحالم که در خدمت شما هستم
برای دایره که از circle استفاده میکنیم و مستطیل از rect ، خب این بکنار
برای اینکه بتونیم از چند ضلعی ها استفاده کنیم باید از poly استفاده کنیم.
تنها چیزی که یکم ممکنه پیچیده باشه ، همین مختصات هس، یعنی در واقع نحوه درآوردن مختصات.
راحت ترین حالت با دم دست ترین نرم افزار ، همین نرم افزار نقاشی Paint ویندوز است.
عکس مورد نظرتون رو درون Paint باز کنید بعد ماوس رو که ببریت رو عکس ، گوشه پایین سمت چپ مختصات دقیق اون نقطه ای که ماوس رو عکس هس رو بهتون نشون میده، همون میشه مختصات ما.
فقط نکته ای که در مورد Poly هس، اینه باید شما ۳ ضلع اصلی رو مشخص کنید
مثلا میگیم مختصات ۳و۴ برای ضلع اول از بالا، مختصات ۵و۶ برای ضلع دوم از پایین سمت چپ و ۷و۸ برای ضلع سوم از پایین سمت راست ، در نهایت دوباره برمیگردیم به نقطه ضلع اول که بهتره مختصات اونم بنویسید.
برای مثال لطفا اینجا کلیک کنید
همچنین پیشنهاد میکنم، برای ساخت آنلاین انواع نقشه های تصویری ( فقط با چند کلیک ) ، حتما از ابزار آنلاین ساخت نقشه تصویری فری لرن استفاده نمایید.
باتشکر

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

۲ نمونه سورس ( یکی ساده و دیگری حرفه ای ) براتون قرار داده شده، لطفا بروی لینک زیر کلیک و دانلود نمایید.
دانلود کن

باسلام
اگه نمونه ای ( صفحه یا تصویر و.. ) چیزی ارائه بدید بهتر میشه کمک کرد
ولی این سورس رو بررسی نمایید.

باسلام و عرض ادب خدمت شما دوست محترم
خب ممکنه توی آدرس دهی تصویر مشکل وجود داشته باشه. از کد زیر در صفحه وبتون استفاده نمایید ببینید آیا در مرورگر نمایش داده میشود یا خیر؟
اگه نمایش داده شد پس یعنی مشکل از آدرس دهی هست ولی اگه نمایش داده نشد، لطفا یه ادیتور دیگه ( مثه ++NotePad ) با اینم امتحان کنید.

باسلام و عرض ادب
اگه منظورتون از کوئری ( فایل هایی مثه Jquery ) می باشد، هیچ فرقی با جاوااسکریپت نداره – خب جی کوئری در واقع همون جاوااسکریپت می باشد فقط کمی فشرده شده و جم جورتر – ۲ روش برای فراخوانی هست. ( پیشنهاد میکنم حتما آموزش استفاده از جاوااسکریپت در HTML رو مطالعه نمایید )
۱ : استفاده از تگ script در قسمت head یا body صفحه برای فراخوانی فایل- مثال :

۲ : استفاده مستقیم در تگ های head یا body با استفاده از تگ script – مثال :

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

سپاسگزارم کد شما اجرا شد

کد خودم هم اخرش رو مثل کد شما قرار دادم اجرا شد. یعنی قرار دادم
;(document.write(txt

ولی چرا با کد زیر اجرا نمیشه؟

در صورتی که در صفحه html تگ p با ایدی demo هم ایجاد کردم

باسلام و عرض ادب
من خیلی دقیق متوجه منظورتون نشدم یعنی ۱۰۰ درصدی منظورتونو نگرفتم
اگه بتونید بهتر و کمی واضحتر منظورتونو بیان کنید بهتر میتونم کمک کنم

ولی آیا منظورتون اینه :
وقتی روی یکی از شهرها کلیک شد تو همون صفحه یه حالتی باشه یا یه چیزی باشه که مشخص باشه کاربر داخل کدوم لینک یا شهر هست درسته؟ منظورتون اینه؟

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

با سلام
اگه به درستی از خوده تگ img استفاده میکنید ولی عکس نمایش داده نمیشه پس مشکل از آدرس عکس هس
۲ تا حالت آدرس دهی داریم
مطلق یا نسبی
مثال از آدرس مطلق
کلیک کنید
مثال از آدرس نسبی
کلیک کنید
نمیدونم اصلا در جریان آدرس دهی ها هستید یا نه، پس لطفا برای راهنمایی بهتر به ایمیل پیام بدید
FreeLearn20181@gmail.com

باسلام
باید اول اون عکس رو با استفاده از CSS مخفی کنی
بعدش با استفاده از جاوااسکریپت و با کلیک بروی چیزی ( میتونه هرچیزی باشه ) عکس نمایش داده میشه
مثال :
کلیک کنید
باتشکر

باسلام و عرض ادب
کمی سوالتون چالش برانگیزه
شما میفرمایید ۲تا عکس رو بصورت عمودی در یک سمت تصویر!؟
خب منظور شما از تصویر چیه؟ آیا منظورتون صفحه نمایش هست یا یه تصویر / عکس هستش که داخلش میخواید ۲تاعکس بصورت عمودی قرار بدید؟
بعد دوباره خب چجوری ۲تا عکس بصورت عمودی در یک سمت!؟
بلاخره حالت یا افقی هس یا عمودی
مثلا ۲تاعکس کنار هم بصورت افقی یعنی اینجوری — و عمودی یعنی اینجوری =
دیگه باز میتونه در همون حالت افقی (در سمت راست، وسط و چپ) و در حالت عمودی ( در سمت بالا،وسط و پایین ) قرار بگیره
هرچقدر بهتر سوالت رو مطرح کنی قطعا بهتر میتونم کمک کنم
باتشکر

باسلام
دانلود سورس

با سلام و عرض ادب
تنها مشکل از آدرس هست که براش مشخص کردی، در واقع تنها راه نشون ندادن عکس اینه که آدرسش مشکل داشته باشه
پس دوباره چک کن آدرس رو و مطمعن شو که درسته
نمونه مثال :
https://files.free-learn.ir/Tryitself/html/learn/Tryit_html_Images_T2.php