لا يتم عرض الصورة الأساسية عند الضغط على الصورة المصغرة

Zen Eddin Allaham · 24 مايو

let images = document.querySelector('.icons')
let container = document.querySelector('.container')
function phones(phone){
    images.src = phone;
}

function colors(color){
    container.style.background = color;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container{
    background-color: #000;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

header{
    display: flex;
    justify-content: space-between;
    width: 80%;
    align-items: center;
    margin: auto;
    padding: 20px 0;
}

.logo{
    width: 40px;
}

ul li {
    display: inline-block;
}

ul li a{
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: auto;
}

.content .text{
    width: 40%;
    color: white;

}

.content .text h2{
    font-size: 40px;
    text-transform: uppercase;
}

.content .text p{
    font-size: 18px;
    margin: 20px 0;
}

.content .text a{
    text-decoration: none;
    background-color: white;
    color: #000;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.content .img{
    width: 30%;

}

.content .img img{
    width: 180px;
}

.icons{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.icons img{
    width: 40px;
    transition: all 0.5s ease;
    cursor: pointer;
}

.icons img:hover{
  transform: scale(1.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>ِApple</title>
</head>
<body>
    <div class="container">
        <header>
            <a href="#"><img src="logo.png" class="logo" alt=""></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="text">
                <h2>iPhone 13 pro max</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <a href="">All Products</a>
            </div>
            <div class="img">
                <img src="0.png">
            </div>
        </div>
        <div class="icons">
            <img onclick="phones(this.src); colors('#000')" src="0.png">
            <img onclick="phones(this.src); colors('#000')" src="1.png">
            <img onclick="phones(this.src); colors('#247ec8')" src="2.png">
            <img onclick="phones(this.src); colors('#1e1e1e')" src="3.png">
            <img onclick="phones(this.src); colors('green')" src="4.png">
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

لقد قمت بمشروع لكن اريد عند ضغط على صورة تظهر في المتصفح

محمد_عاطف · 24 مايو

لاحظ أنك تقوم بوضع ال src الخاص بالصورة الخاطئة حيث يجب وضعها في مكان الصورة التي تظهر في المتصفح .

بتاريخ 10 دقائق مضت قال Hxfhf Ucicic:
<img src="0.png">

لهذا في السطر السابق يجب وضع id لهذا العنصر لتسهيل الوصول إليه هكذا :

<img id="img-preview" src="0.png">

والآن في js لنقم بتعديل الكود ليصبح كالتالي :

let images = document.querySelector('.icons')
let container = document.querySelector('.container')
let image = document.getElementById('img-preview')
function phones(phone){
    image.src = phone;    
}

function colors(color){
    container.style.background = color;
}

والآن عند الضغط عليه سيظهر في المتصفح لديك.

Mustafa Suleiman · 24 مايو

ستحتاج إلى كتابة منطق جافاسكريبت كالتالي:

let mainProductImage = document.getElementById('mainImage');
let pageContainer = document.querySelector('.container');

function phones(phoneSrc){
    mainProductImage.src = phoneSrc;
}

function colors(color){
    pageContainer.style.background = color;
}

وعليك تعيين id باسم mainImage للصورة التي سيتم تغييرها بالصور الأخرى:

           <div class="img">
             
                <img id="mainImage" src="https://placehold.co/600x400?text=Hello+World" alt="Main Product Image">
            </div>

الفكرة هي اختيار عنصر الصورة الرئيسية باستخدام getElementById وتخزينه في متغير mainProductImage، كذلك اختيار عنصر الحاوية باستخدام querySelector وتخزينه في متغير pageContainer.

والدالة phones تستقبل مصدر صورة مصغرة كمعامل وتعينه كمصدر للصورة الرئيسية.

والدالة colors تستقبل أيضًا لون الخلفية كمعامل وتعمل على تغيير لون الخلفية عند الضغط على كل صورة.

Zen Eddin Allaham · 24 مايو

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>ِApple</title>
</head>
<body>
    <div class="container">
        <header>
            <a href="#"><img src="logo.png" class="logo" alt=""></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="text">
                <h2>iPhone 13 pro max</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <a href="">All Products</a>
            </div>
            <div class="img">
                <img src="0.png">
            </div>
        </div>
        <div class="icons">
            <img id="img-preview" onclick="phones(this.src); colors('#000')" src="0.png">
            <img id="img-preview" onclick="phones(this.src); colors('#000')" src="1.png">
            <img  id="img-preview" onclick="phones(this.src); colors('#247ec8')" src="2.png">
            <img id="img-preview" onclick="phones(this.src); colors('#1e1e1e')" src="3.png">
            <img id="img-preview" onclick="phones(this.src); colors('green')" src="4.png">
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>



let images = document.querySelector('.icons')
let container = document.querySelector('.container')
let image = document.getElementById('img-preview')
function phones(phone){
    image.src = phone;    
}

function colors(color){
    container.style.background = color;
}

لقد نفذت الكود لكن ليس هذا الذي اريده حيث لاحظ في صورة لا اريد ان تظهر الصورة في الاسفل احتاج عند ضغط على صور الهاتف الاحمر مثلا يعرض مكان الهاتف الذهبي وهكذا

محمد_عاطف · 24 مايو

بتاريخ 7 دقائق مضت قال Hxfhf Ucicic:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>ِApple</title>
</head>
<body>
    <div class="container">
        <header>
            <a href="#"><img src="logo.png" class="logo" alt=""></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="text">
                <h2>iPhone 13 pro max</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <a href="">All Products</a>
            </div>
            <div class="img">
                <img src="0.png">
            </div>
        </div>
        <div class="icons">
            <img id="img-preview" onclick="phones(this.src); colors('#000')" src="0.png">
            <img id="img-preview" onclick="phones(this.src); colors('#000')" src="1.png">
            <img  id="img-preview" onclick="phones(this.src); colors('#247ec8')" src="2.png">
            <img id="img-preview" onclick="phones(this.src); colors('#1e1e1e')" src="3.png">
            <img id="img-preview" onclick="phones(this.src); colors('green')" src="4.png">
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>



let images = document.querySelector('.icons')
let container = document.querySelector('.container')
let image = document.getElementById('img-preview')
function phones(phone){
    image.src = phone;    
}

function colors(color){
    container.style.background = color;
}

لقد نفذت الكود لكن ليس هذا الذي اريده حيث لاحظ في صورة لا اريد ان تظهر الصورة في الاسفل احتاج عند ضغط على صور الهاتف الاحمر مثلا يعرض مكان الهاتف الذهبي وهكذا

لاحظ أنك أخطأت ووضعت ال id في المكان الخاطئ حيث يجب وضعه في العنصر img بداخل <div class="img"> وليس الصور الأخرى .

هذا هو كود HTML الصحيح كاملا :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>ِApple</title>
</head>
<body>
    <div class="container">
        <header>
            <a href="#"><img src="logo.png" class="logo" alt=""></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="text">
                <h2>iPhone 13 pro max</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <a href="">All Products</a>
            </div>
            <div class="img">
                <img id="img-preview" src="0.png">
            </div>
        </div>
        <div class="icons">
            <img onclick="phones(this.src); colors('#000')" src="0.png">
            <img onclick="phones(this.src); colors('#000')" src="1.png">
            <img  onclick="phones(this.src); colors('#247ec8')" src="2.png">
            <img onclick="phones(this.src); colors('#1e1e1e')" src="3.png">
            <img onclick="phones(this.src); colors('green')" src="4.png">
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

Zen Eddin Allaham · 24 مايو

كيف يمكن كتابة اربع اسطر في نفس الوقت

محمد_عاطف · 24 مايو

بتاريخ 4 دقائق مضت قال Hxfhf Ucicic:

كيف يمكن كتابة اربع اسطر في نفس الوقت

هل يمكن توضيح سؤالك ؟ أى أسطر تقصد وكيف في نفس الوقت ؟

Zen Eddin Allaham · 24 مايو

اقصد عندما مثلا onclick من اجل تنفيذ الدالة اريد ان اكتبها مراة واحدة ولكن في اربع اسطر مثال في صورة

محمد_عاطف · 24 مايو

بتاريخ 24 دقائق مضت قال Hxfhf Ucicic:

اقصد عندما مثلا onclick من اجل تنفيذ الدالة اريد ان اكتبها مراة واحدة ولكن في اربع اسطر مثال في صورة

في vs code لإضافة مؤشر جديد بالإضافة إلى المؤشر الأساسي يمكنك الضغط على زر ALT مع الضغط بالفأرة على المكان الذي تريد إضافة المؤشر فيه .

لا يتم عرض الصورة الأساسية عند الضغط على الصورة المصغرة

السؤال

Zen Eddin Allaham

8 أجوبة على هذا السؤال

Recommended Posts

محمد_عاطف

Mustafa Suleiman

Zen Eddin Allaham

محمد_عاطف

Zen Eddin Allaham

محمد_عاطف

Zen Eddin Allaham

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية