माउसओवर के साथ छवियों को बदलने में मदद चाहिए और प्रीलोडेड छवियों के साथ माउस आउट करें। मैं प्रीलोडिंग का पता लगाने में सक्षम था लेकिन मैं छवि को बदलने के लिए नहीं मिल सकता। अगर कोई मेरी मदद कर सकता है तो इसकी बहुत सराहना की जाएगी।

"use strict";
 var $ = function(id) { return document.getElementById(id); };

window.onload = function preload() {
var image1 = $("image1");           
var image2 = $("image2");           

// preload images 
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++){
    link = links[i];
    image = new Image();
    image.src = link.href;
 }


  // attach mouseover and mouseout events for each image

   image1.mouseover=function(){
       image1=image.src="images/release.jpg";
  };

  image1.onmouseout = function() {
    image1=image.src="images/hero.jpg";

  };


    image2.onmouseover = function() {
    image.src="images/deer.jpg";
};
    image2.onmouseout= function(){
    image.src="images/bison.jpg";
};


};
0
Chris Benzola 31 मार्च 2018, 03:06

3 जवाब

"use strict";
var $ = function(id) { return document.getElementById(id); };

window.onload = function() {
    var image1 = $("image1");           
    var image2 = $("image2");           
    
    // preload images 
    var links = $("image_list").getElementsByTagName("a");
    var i, link, image;
    for(i = 0; i < links.length; i++){
		link = links[i];
		image = new Image();
		image.src = link.href;
	}

    // attach mouseover and mouseout events for each image
    image1.onmouseover = function() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src="images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src="images/bison.jpg";
    };
};
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    background-color: white;
    width: 790px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 1em;
}
h1 {
    color: blue;
    margin: 0;
    padding: 0;
    text-align: center;
}
p {
    margin: 0;
    padding: .5em 0;
    text-align: center;	
}
ul { 
    display: none; 
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Rollover</title>
  <link rel="stylesheet" type="text/css" href="rollover.css">
  <script type="text/javascript" src="rollover.js"></script>
</head>

<body>
    <main>
        <h1>Fishing Images</h1>
        <p>Move your mouse over an image to change it and back out of the
            image to restore the original image.</p>
        <ul id="image_list">
            <li><a href="images/release.jpg" title="Catch and Release"></a></li>
            <li><a href="images/deer.jpg" title="Deer at Play"></a></li>
            <li><a href="images/hero.jpg" title="The Big One!"></a></li>
            <li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
        </ul>
        <p>
            <img id="image1" src="images/hero.jpg" alt="">
            <img id="image2" src="images/bison.jpg" alt="">
        </p>
    </main>
</body>
</html>
0
Xuan Weng 13 नवम्बर 2018, 01:35
"use strict";
var $ = function(id) { return document.getElementById(id); };

window.onload = function() {
    var image1 = $("image1");           
    var image2 = $("image2");           
    
    // preload images 
    var links = $("image_list").getElementsByTagName("a");
    var i, link, image;
    for(i = 0; i < links.length; i++){
		link = links[i];
		image = new Image();
		image.src = link.href;
	}

    // attach mouseover and mouseout events for each image
    image1.onmouseover = function() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src="images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src="images/bison.jpg";
    };
};
0
Xuan Weng 13 नवम्बर 2018, 01:27

जो मैं देख सकता हूं उससे आप फ़ंक्शन प्रीलोड के अंदर सभी चर बनाते हैं और फिर आप उन्हें उस फ़ंक्शन के बाहर से एक्सेस करने का प्रयास करते हैं जहां आपने उन्हें बनाया था।

0
Gabriel Tufis 31 मार्च 2018, 00:16