تأثيرات الويب الخاصة: تقنيات عرض الصور العشوائية

يعد عرض الصور بشكل عشوائي أسلوبًا مستخدمًا على نطاق واسع جدًا. على سبيل المثال، يتم عرض لافتات عشوائية عند دخولك إلى موقع ويب، ويكون شعاره مختلفًا دائمًا، أو تكون هناك دائمًا نصائح ذات محتوى مختلف، وغالبًا ما تجد مثل هذه الأمثلة عند تصفح الإنترنت. باستخدام هذه التكنولوجيا، لا يمكن وضع المزيد من المحتوى في مساحة معينة فحسب، بل يمكنها أيضًا إعطاء الناس وهم التحديثات المتكررة.

ما مدى حماسك؟ في الواقع، طالما أن لديك القليل من المعرفة الأساسية بـ html وjavascript، فكل شيء سيكون بسيطًا للغاية. اتبعني ودعنا نلقي نظرة على أسرارها العشوائية.

لنبدأ بمثال بسيط. عادةً ما نقوم بإضافة صور إلى الصفحة باستخدام <img src="picture">. إذا أردنا عرض 3 صور مختلفة بشكل عشوائي، نحتاج إلى إجراء تعديل بسيط على هذا الكود أولاً، أضف علامة <script>:

ما يلي هو جزء مقتبس:
<لغة البرنامج النصي=جافا سكريبت></script>
ثم ضع <img src="picture"> في هذه العلامة باستخدام document.write("")، وسيصبح
document.write("<img src=image>")

والآن لننهي الفقرة الأكثر أهمية:

هذا هو الاقتباس:
id=Math.round(Math.random()*2)+1

بهذه الطريقة، يتم الحصول على الأرقام العشوائية على هيئة 1 و2 و3. أعد تسمية الصورة التي تريد عرضها إلى 1.gif و2.gif و3.gif، حسنًا! الكود النهائي هو:

إليك مقتطف الاقتباس:
<لغة البرنامج النصي=جافا سكريبت>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>

جربها، أليست جيدة؟ فماذا لو كانت كل صورة من صوري تتوافق مع ارتباط تشعبي؟
لنفترض أن هناك 3 صور، 1.gif و2.gif و3.gif، والروابط المقابلة لها هي url1 وurl2 وurl3.
من أجل الحصول على تطابق واحد لواحد بين الصور والروابط، نحتاج إلى إعداد صورة مصفوفة لوضع عنوان الرابط، كما يلي:

ما يلي هو جزء مرجعي:
صورة فار = صفيف جديد (3)
الصورة.طول=3
الصورة[1]="url1"
الصورة[2]="url2"
الصورة[3]="url3"

من أجل الحصول على الرابط المقابل للصورة، نحتاج أيضًا إلى تحديد مصفوفة imageurl=image[id]
المبدأ هو هذا:
عند قراءة الصفحة، يتم أخذ رقم عشوائي، على افتراض أنه 2، أي id=2، فيمكننا بسهولة عرض 2.gif على الصفحة كما هو مذكور أعلاه. ثم يمكننا أن نرى: imageurl=image[2] وimage[2]="url2"، والباقي سهل. الكود الكامل هو كما يلي:

ما يلي هو جزء مقتبس:
<لغة البرنامج النصي=جافا سكريبت>
صورة فار = صفيف جديد (3)
الصورة.طول=3
الصورة[1]="url1"
الصورة[2]="url2"
الصورة[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=image[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>

أعيد طبعه من: تصميم الطيور ذو السبعة ألوان --- PC-King