[سعود]

شروحات حسونه اكاديمي باليوتيوب

يجعلك تحب تطبق الامثلة

[sanyor77]

هنا هو مثال لتجميع أجزاء صورة باستخدام HTML، CSS و JavaScript:

HTML:

PHP كود :

<div id="image-container">
  <img id="image-1" src="part1.jpg" alt="part1">
  <img id="image-2" src="part2.jpg" alt="part2">
  <img id="image-3" src="part3.jpg" alt="part3">
  <img id="image-4" src="part4.jpg" alt="part4">
</div> 


CSS:

PHP كود :

#image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-1, #image-2, #image-3, #image-4 {
  position: absolute;
  top: 0;
  left: 0;
} 


javascript

PHP كود :

const image1 = document.getElementById("image-1");
const image2 = document.getElementById("image-2");
const image3 = document.getElementById("image-3");
const image4 = document.getElementById("image-4");

image2.style.left = "25%";
image3.style.left = "50%";
image4.style.left = "75%"; 


هذا يجعل أجزاء الصورة المختلفة يظهرون على شكل مجموعة واحدة ومزدوجة على شكل واحد عند استخدام CSS الذي يحدد وضع تحت الأجزاء ويؤخذ الأجزاء ويجعلها مزدوجة على شكل واحد وتحديد وضع تحت الأجزاء باستخدام JavaScript.

[سعود]

(04-04-23, 12:00 AM)sanyor77 كتب : هنا هو مثال لتجميع أجزاء صورة باستخدام HTML، CSS و JavaScript:

HTML:

PHP كود :

<div id="image-container">
  <img id="image-1" src="part1.jpg" alt="part1">
  <img id="image-2" src="part2.jpg" alt="part2">
  <img id="image-3" src="part3.jpg" alt="part3">
  <img id="image-4" src="part4.jpg" alt="part4">
</div> 


CSS:

PHP كود :

#image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-1, #image-2, #image-3, #image-4 {
  position: absolute;
  top: 0;
  left: 0;
} 


javascript

PHP كود :

const image1 = document.getElementById("image-1");
const image2 = document.getElementById("image-2");
const image3 = document.getElementById("image-3");
const image4 = document.getElementById("image-4");

image2.style.left = "25%";
image3.style.left = "50%";
image4.style.left = "75%"; 


هذا يجعل أجزاء الصورة المختلفة يظهرون على شكل مجموعة واحدة ومزدوجة على شكل واحد عند استخدام CSS الذي يحدد وضع تحت الأجزاء ويؤخذ الأجزاء ويجعلها مزدوجة على شكل واحد وتحديد وضع تحت الأجزاء باستخدام JavaScript.

شكر الله لك و بارك فيك.