كيفية إنشاء زر بواسطة صورة بتنسيق HTML

في هذا الدرس إن شاء الله، سأعرض الطرق التقنية لتضمين صورة في عنصر <button> في HTML. هذا يعني إدراج أو إدخال صورة معينة داخل زر HTML.

∴ خلال هذا الدرس سنستعمل العلامات التالية:
استخدم علامة <img> داخل علامة <button> لإدراج الصورة في زر HTML
استخدم علامة <input type = "image"> لإدراج صورة في زر HTML

ملاحظة: يمكنك أن تقرأ في هذا المقال الكلمات التالية: علامة ، سمة ، رمز أو شفيرة ⇐ كلها تعني الكود البرمجي ل HTML

استخدم علامة <img> داخل علامة <button> لإدراج الصورة في زر HTML

تُستخدم علامة <img> لإدراج صورة في صفحة HTML. لا يتم وضع الصور مباشرة على صفحة الويب ؛ بل يتم إدراجها بواسطة رابط معين يحترم فيها مسار موضع الصور على الويب. ومن خلال علامة <img> تـتولد مساحة خاصة بالصورة المدرجة في المسار . تحتوي العلامة على سمتين إلزاميتين ، وهما src و alt. يمكنك إنشاء زر HTML قابل للنقر باستخدام علامة <button> في HTML. وبالتالي فإن وضع علامة <img> داخل علامة <button> يؤدي إلى إنشاء زر HTML قابل للنقر . وهذا الزر يضم صورة بداخله.

≡ ↵ تعرف على أهمية علامة Alt

بالمثال يتضح المقال:

داخل نص HTML ، إفتح علامة <button>. حدد النوع type كزر “button ” . بعد ذلك ، افتح علامة <img> وحدد عنوان URL للصورة في سمة src. ثم اضبط الارتفاع ” height ” والعرض ” width ” مثل: 80 و 120 على التوالي. وفي اللأخير ، أغلق جميع العلامات المفتوحة مسبقاً في أسطر الكود الرمزي.

في المثال أدناه ، قمنا بإنشاء عنصر <button> وأدخلنا صورة بداخله لتضمينها داخل الزر. قمنا بوضع عنوان URL للصورة في علامة src. وبالتالي ، يمكن أن أؤكد لك أن إنشاء زر بواسطة صورة بتنسيق HTML ممكن ولا توجد صعوبة في إنشائه.

يمكنك الحصول على الرمز من هنا :

<body>
<button type="button"> <img src="https://www.jabism.com/img/annonce-1.png" height ="150" width="280" /></button>
</body>

<body>

</body>

النتيجة:

كيفية إنشاء زر بواسطة صورة بتنسيق HTML

استخدم علامة <input type = "image"> لتضمين صورة في زر HTML

تحدد العلامة <input> حقل إدخال البيانات التي نريد إدراجها. ويمكننا استخدامها حسب ما تسمح به لغة HTML مثل : <input type="button">, <input type="color">, <input type="email">, <input type="text"> . يمكننا تعيين سمة type على image وتعيين src لتضمين صورة داخل نوع الإدخال input. وبالتالي ستعمل بوظيفة الزر.

بالمثال يتضح المقال:

داخل نص HTML ، إفتح علامة <input> وحدد type في image . ثم اكتب عنوان URL للصورة في سمة src. ثم أكتب سمة style واضبط الحدود المزدوجة ب CSS. يعني جعل border بحدود double . أضف أيضاً ارتفاعاً height وعرضاً width مثل : ” 100 و 180 “. ثم أغلق علامة الإدخال وجميع العلامات المفتوحة مسبقاً.

يوضح المثال أدناه طريقة لتضمين صورة في صفحة HTML. العلامة <type = "image"> تبين للعامة أننا ندرج أو نستخدم صورة في عملنا. استخدمنا CSS المضمنة لتحديد border الصورة وارتفاعها height وعرضها width . لقد فعلنا ذلك لجعل الصورة تبدو وكأنها زر. تحدد القيمة المزدوجة استخدام حد double خارج زر الصورة. يساعد طول و عرض الصورة في الوصول إلى حجم محدد. إذا لم نحدد ارتفاع الصورة وعرضها ، فقد تومض الصفحة عند تحميل الصورة. بهذه الطريقة يمكننا تضمين صورة في زر HTML.

يمكنك الحصول على الرمز من هنا :

<input type="image" src="https://www.jabism.com/img/annonce-1.png" style="border: double;" height="80" width="170"/>

1	<input type="image" src="https://www.jabism.com/img/annonce-1.png" style="border: double;" height="80" width="170"/>

كيفية إنشاء زر بواسطة صورة بتنسيق HTML

لا تنسى الاطلاع على هذه المقالة:

Ξ كيفية إنشاء زر HTML يعمل كرابط

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.