أصبحت النوافذ المنبثقة أو النوافذ المنبثقة السفلية أكثر شيوعًا على الإنترنت. أو ، ببساطة ، الصور المنبثقة. غالبًا ما يضطر العديد من مالكي المواقع إلى جعلها لأغراض إعلانية ، ولكن لا يعرف الجميع خوارزمية إنشائها.
انه ضروري
- - محرر HTML ؛
- - دفتر؛
- - الاستضافة.
تعليمات
الخطوة 1
قم بإنشاء أو فتح صفحة ويب جديدة بتنسيق HTML أو محرر نصوص. يمكنك استخدام برامج شائعة مثل Dreamweaver و Expression Web وغيرها لهذا الغرض. إذا كنت تتخذ خطواتك الأولى في لغة برمجة HTML ، فاستخدم "مفكرة" عادية.
الخطوة 2
الصق الكود التالي بين علامتي "head" و "head":
.thumbnail {position: النسبي؛ الفهرس z: 0 ؛}
.thumbnail: hover {background-color: transparent؛ الفهرس z: 50 ؛}
.thumbnail span {/ * CSS للصورة المكبرة * / موضع: مطلق ؛ لون الخلفية: أصفر فاتح. الحشو: 5 بكسل ؛ اليسار: -1000 بكسل ؛ الحد: 1 بكسل رمادي متقطع ؛ الرؤية: مخفية لون أسود؛ زخرفة النص: لا شيء ؛}
.thumbnail span img {/ * CSS للصورة المكبرة * / border-width: 0؛ المساحة المتروكة: 2 بكسل ؛}
.thumbnail: hover span {/ * CSS للصورة المكبرة عند التمرير * / visibility: مرئي ؛ أعلى: 0؛ اليسار: 65 بكسل ؛ / * الموضع الذي يجب أن تتعارض فيه الصورة المكبرة أفقيًا * /}
الخطوه 3
اضبط الإزاحة الأفقية للصورة المنبثقة عن طريق تغيير القيمة في السطر الأخير من التعليمات البرمجية. قم بتخصيص مسافة بين علامتي "body" و "body" حيث تريد أن تظهر الصورة على صفحة الويب. ثم انسخ الكود التالي والصقه:
مثال على عنوان النص
مثال على عنوان النص"
الخطوة 4
استبدل "folder / largepci1.jpg" بالملف المستخدم للصورة المنبثقة. افعل الشيء نفسه مع الكتلة الثانية من التعليمات البرمجية. قم بتغيير السطر "مثال على عنوان النص" إلى ما يجب كتابته في الصورة المنبثقة. قم أيضًا بتغيير قيم الطول والعرض في الكود لضبط حجم الصورة المنبثقة. قم بإنشاء كتل إضافية من التعليمات البرمجية لإضافة المزيد من الرسومات التخطيطية. أدخل السمات والعلامات والنصوص الأخرى في مستند HTML حسب الحاجة. احفظ ملف HTML ثم قم بتحميله على خادم الويب الخاص بك.
