هتمل (لغة ترميز النص التشعبي) هي اللغة الرئيسية لإنشاء صفحات الويب. يمكنك استخدامه ليس فقط لترتيب النص ، ولكن أيضا لإضافة عناصر وسائط متعددة أخرى ، مثل الصور.
أحد الأسئلة المتداولة هو: "كيفية جعل صورة تظهر على الموقع عند النقر فوق الزر?". الجواب بسيط-باستخدام هتمل!
من أجل تنفيذ هذه الوظيفة ، يمكننا استخدام العلامة. ومع ذلك ، هذا لا يكفي. نحتاج إلى إضافة بعض شفرة جافا سكريبت للتعامل مع حدث النقر على الزر وتغيير خصائص الصورة.
في هذه المقالة ، سنوضح لك كيف يمكنك بسهولة وببساطة جعل صورة تظهر على موقع الويب الخاص بك عند النقر فوق الزر. سوف نستخدم بنية صفحة الويب باستخدام علامات هتمل وإضافة بعض شفرة جافا سكريبت للتعامل مع الأحداث.
- إضافة صورة بنقرة زر واحدة: حل بسيط في هتمل
- إنشاء زر للتفاعل مع صورة
- تحديد العنصر الذي سيتم عرض الصورة فيه
- تعيين وظيفة لتغيير خاصية عرض الصورة
- ربط دالة بحدث "النقر على الزر"
- سؤال وجواب
- كيف يمكنني إضافة زر إلى موقع على شبكة الانترنت?
- كيف يمكنني إضافة صورة إلى موقع على شبكة الانترنت?
- كيف يمكنني ربط زر وصورة على موقع على شبكة الانترنت?
- هل من الممكن جعل الصورة تظهر دون إعادة تحميل الصفحة?
- هل من الممكن إضافة الرسوم المتحركة عند ظهور صورة?
إضافة صورة بنقرة زر واحدة: حل بسيط في هتمل
في هذه المقالة ، سنلقي نظرة على طريقة بسيطة لإضافة صورة إلى موقع ويب عند النقر فوق زر. سوف نستخدم هتمل فقط لهذا الغرض.
خطوات التنفيذ:
- . اكتب النص على الزر الذي سيتم عرضه للمستخدمين.
- .
- لإخفاء الصورة.
- . سيسمح لنا ذلك بالوصول إلى العنصر في وظيفة جافا سكريبت.
- .
رمز لإضافة صورة عند النقر على زر:
عرض صورة
هذا كل شيء! الآن ، عند النقر فوق الزر ، ستظهر الصورة على الصفحة. يمكنك تغيير المسار إلى الصورة والنص الموجود على الزر ليناسب احتياجاتك.
إنشاء زر للتفاعل مع صورة
لإنشاء زر يعرض صورة على الموقع عند النقر عليه ، اتبع الإرشادات أدناه:
- إنشاء ملف هتمل مع التمديد.أتش تي أم أل
- افتح الملف في محرر نصوص
- أضف الكود التالي داخل العلامة:
| أتش تي أم أل: |
| انقر لإظهار الصورة |
- احفظ الملف.أتش تي أم أل
- افتح الملف في أي متصفح ويب
انقر فوق الزر "انقر لإظهار صورة"
يجب أن تظهر الصورة على الصفحة
هذا مثال بسيط على استخدام هتمل وجافا سكريبت لإنشاء زر يتفاعل مع صورة. يمكنك تغيير النص الموجود على الزر والمسار إلى الصورة في وظيفة جافا سكريبت لضبطه وفقا لاحتياجاتك.
تحديد العنصر الذي سيتم عرض الصورة فيه
- لعرض صورة على موقع ويب ، يمكنك استخدام عنصر. تم تصميم هذا العنصر لإدراج الصور على صفحات الويب. لعرض صورة ، سوف تحتاج إلى تحديد السمة سرك ، الذي يحدد المسار إلى ملف الصورة.
- يوجد أدناه مثال على استخدام عنصر لعرض صورة:
- قم بإنشاء دليل فارغ على الخادم الخاص بك أو استخدم دليلا موجودا.
| ضع الصورة في هذا الدليل. | في كود هتمل ، حدد العنصر على النحو التالي: | الوسم |
|---|---|---|
| السمات | آي إم جي |
قيم سرك
الطريق إلى الصورة
مثال:
في المثال أعلاه ، توجد الصورة في دليل" الصور " داخل الدليل الجذر لمشروعك. يمكنك تغيير المسار إلى الصورة لتحديد الدليل واسم الملف.
يمكنك أيضا إضافة نص بديل للصورة عن طريق تحديد السمة البديل. سيتم عرض هذا النص إذا تعذر تنزيل الصورة أو للمستخدمين الذين يستخدمون قارئات الشاشة لقراءة صفحات الويب.
أنت الآن تعرف كيفية تحديد العنصر الذي سيتم عرض الصورة فيه على موقع الويب الخاص بك. يمكنك أيضا استخدام سمات أخرى لتحديد الأبعاد والمحاذاة والخصائص الأخرى للصورة.
تعيين وظيفة لتغيير خاصية عرض الصورة
لكي تظهر صورة على الموقع عند النقر فوق الزر ، تحتاج إلى تعيين وظيفة ستغير خاصية عرض الصورة.
- . إضافة سمة
- مع
- أو
"لا شيء"
، اعتمادا على الحالة الحالية.
يوجد أدناه مثال على الكود:
"'أتش تي أم أل
في هذا المثال ، عند النقر فوق الزر الذي يحتوي على النص "انقر لعرض / إخفاء صورة" ، ستتغير خاصية عرض الصورة باستخدام الوظيفة
من المهم ملاحظة أن المثال يستخدم
السمة سرك
مع عنوان الصورة " مثال.جبغ". يمكنك استبدال هذا العنوان بعنوان صورتك.
الآن ، عند النقر فوق الزر ، ستظهر الصورة أو تخفيها حسب حالتها الحالية.
ربط دالة بحدث "النقر على الزر"
يعد ربط وظيفة بحدث "نقرة زر" جانبا مهما من تطوير الويب. تتيح لك هذه الآلية تنفيذ إجراءات معينة عندما يتفاعل المستخدم مع عناصر الصفحة.
لإنشاء وظيفة ملزمة لحدث "زر النقر" ، يجب عليك استخدام سمة أونكليك لعنصر الزر. ستحتوي قيمة هذه السمة على استدعاء دالة سيتم تنفيذه عند النقر فوق الزر.
مثال:
انقر لي
في هذا المثال ، يتم إنشاء زر ، عند النقر عليه ، يتم استدعاء وظيفة ميفونكتيون. داخل الوظيفة ، يتم تنفيذ أمر لعرض نافذة منبثقة بها رسالة "مرحبا ، العالم!".
يمكنك أيضا ربط وظيفة إلى" زر فوق " الحدث باستخدام جافا سكريبت:
ادفعني
في هذه الحالة ، يتم استخدام طريقة أديفنتليستينر ، الذي يربط وظيفة إلى "زر فوق" الحدث. عند النقر على زر ، سيتم تنفيذ وظيفة ميفونكتيون ونافذة منبثقة مع رسالة " مرحبا ، العالم!"سيتم عرضها.
يتيح لك ربط وظيفة بحدث" نقرة زر " إنشاء عناصر تفاعلية على صفحة ويب وإضافة السلوك المطلوب إليها.
سؤال وجواب
كيف يمكنني إضافة زر إلى موقع على شبكة الانترنت?
لإضافة زر إلى موقع ، يجب عليك استخدام عنصر الزر في هتمل. مثال على الكود: زر.
كيف يمكنني إضافة صورة إلى موقع على شبكة الانترنت?
لإضافة صورة إلى الموقع ، تحتاج إلى استخدام عنصر إمغ في هتمل وتحديد الارتباط إلى الصورة في السمة سرك. مثال على الكود:.
كيف يمكنني ربط زر وصورة على موقع على شبكة الانترنت?
يمكنك استخدام جافا سكريبت لربط الأزرار والصور على موقع ويب. يجب تعيين معالج الحدث انقر على الزر ، والتي ، عند النقر عليها ، سيتم تغيير السمة سرك من عنصر إمغ وتغيير الارتباط إلى الصورة. مثال على الكود: مستند.كيريسيليكتور ('زر').أدفينتليستينر ('انقر' ، وظيفة () {وثيقة.('إمغ').سرك = 'رابط جديد إلى_صورة.جبغ'؛})؛.
هل من الممكن جعل الصورة تظهر دون إعادة تحميل الصفحة?
نعم ، من الممكن جعل الصورة تظهر دون إعادة تحميل الصفحة باستخدام أجاكس وتحديث محتويات جزء من الصفحة باستخدام جافا سكريبت. عند النقر فوق الزر ، سيتم إرسال طلب إلى الخادم ، والذي سيعيد رابطا جديدا للصورة ، ثم ستقوم جافا سكريبت بتحديث سمة سرك لعنصر إمغ. مثال التعليمات البرمجية: فار شر = جديد زملتبركست () ؛ شر.فتح ('الحصول على' ، ' رابط جديد_صورة.جبغ ' ، صحيح) ؛ شر.تحميل = وظيفة () {إذا (شر.الحالة = = = 200) { وثيقة.('إمغ').سرك = شر.ريسبونسيتكست؛}} ؛ شر.إرسال ()؛.