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
Post a Comment