javascript - how to have image appear on mouseover and hidden on mouseout -


i trying have image disappear on mouse out. have image appear on mouse on want hidden on mouse out. have current code below help?

var fullpic = new array(4);    (var i=0;i<fullpic.length;i++)        fullpic[i] = new image(515,385);    fullpic[0].src = "images/frenchquarter.jpg";  fullpic[1].src = "images/goldengatebridge.jpg";  fullpic[2].src = "images/nazarethbay.jpg";  fullpic[3].src = "images/thealamo.jpg";      function displayfull(i){      document.getelementbyid("img-cover").src=fullpic[i].src;  }      /*this function have make image hidden */    function hidefull(i){      document.getelementbyid("img-cover").css.visibility=hidden;  }    var fullbanner = new array(4);    (var i=0;i<fullbanner.length;i++)        fullbanner[i] = new image(468,60);    fullbanner[0].src = "images/banner1.gif";  fullbanner[1].src = "images/banner2.gif";  fullbanner[2].src = "images/banner3.gif";  fullbanner[3].src = "images/banner4.gif";    var n = 0;    window.addeventlistener("load",showfull,false);    function showfull(){        setinterval("showpic()",3000);      }    function showpic(){        document.getelementbyid("banner").src=fullbanner[n].src;      n++;      if(n>3)          n=0;    }
<!doctype html>  <html>      <head>        <meta charset = "utf-8">        <title></title>        <link rel = "stylesheet" type = "text/css" href = "style.css">        <script src = "function.js"></script>      </head>        <body>          <div id = "banner-wrapper">              <img id = "banner" src = "images/banner1.gif">          </div>            <div id = "thumbs">              <img class = "thumb-img" src = "images/frenchquarter_small.jpg" onmouseover="displayfull(0)" onmouseout= "hidefull(0)">              <img class = "thumb-img" src = "images/goldengatebridge_small.jpg" onmouseover="displayfull(1)" onmouseout= "hidefull(1)">              <img class = "thumb-img" src = "images/nazarethbay_small.jpg" onmouseover="displayfull(2)" onmouseout= "hidefull(2)">              <img class = "thumb-img" src = "images/thealamo_small.jpg" onmouseover="displayfull(3)" onmouseout= "hidefull(3)">             </div>            <div id = "main-img">              <img id = "img-cover" src = "">            </div>        </body>  </html>

check error console. you'll see:

error: {   "message": "referenceerror: hidden not defined",   "filename": "http://stacksnippets.net/js",   "lineno": 61,   "colno": 5 } 

hidden not defined

because it's supposed string. put quotes..

function hidefull(i){     document.getelementbyid("img-cover").style.visibility='hidden'; } 

Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -