tinfanide Posted June 29, 2011 Share Posted June 29, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> function setimgsize(){ var img = document.getElementById('img'); if (img && img.style) { img.style.height = '300px'; img.style.cursor = "pointer"; } }var showcase = document.getElementById('showcase'); if (showcase && showcase.style){ showcase.style.height = '300px'; showcase.style.width = '400px'; } function imgshow(image){ var showcase = document.getElementById('showcase'); showcase.src = image; } </script> </head> <body> <a href="http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg" onmouseover="imgshow(this.href)">First IMG</a> | <a href="#" onmouseover="imgshow(http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png)">Second IMG</a> | <a href="#" onmouseover="imgshow("http://www.techlifeweb.com/facebook_logo.jpg")">Third IMG</a> <img id="showcase" src="http://www.creston.com/assets/images/layout/showcase.png" /> </body> </html> Two queries:First, for the first (google) picture, I use "this.href" to refer to the anchor link and refer all this to the function imgshow(image) butfor the second and third images, I use imgshow() within the anchor html but they fail to show the images.Is there anything wrong with my codes?Second, is there any way to define a global variable (in my case: var showcase = ...) once and for all? I defined that twice.Many thanks for any answers! Link to comment Share on other sites More sharing options...
MrFish Posted June 29, 2011 Share Posted June 29, 2011 Your image won't show because element.src isn't a variable javascript knows while element.href is. Use element.setAttribute("src", image);.You can define variables outside of functions and it will be in the window scope. All of your javascript runs in an object called "window". You can think of this like a box that holds everything. Nothing is outside the box. You can create a global variable this way or like this- window.showcase- anywhere in your code to be sure that it is global. Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2011 Author Share Posted June 29, 2011 Your image won't show because element.src isn't a variable javascript knows while element.href is. Use element.setAttribute("src", image);.You can define variables outside of functions and it will be in the window scope. All of your javascript runs in an object called "window". You can think of this like a box that holds everything. Nothing is outside the box. You can create a global variable this way or like this- window.showcase- anywhere in your code to be sure that it is global.Yes, thanks for your explanation.But can you show me how to use element.setAttribute and window.showcase? I've tried them but it fails.For the window.showcase one, I don't know how to fit in my codes.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>function setsize(){var showcase = document.getElementById('showcase'); if (showcase && showcase.style){ showcase.style.height = '300px'; showcase.style.width = '400px'; } } function imgshow(image){ document.getElementById('showcase').setAttribute("src", image); }window.onload = setsize;</script></head><body><a href="http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg" onmouseover="imgshow(this.href)">First IMG</a> | <a href="#" onmouseover="imgshow(http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png)">Second IMG</a> | <a href="#" onmouseover="imgshow("http://www.techlifeweb.com/facebook_logo.jpg")">Third IMG</a><br /><br /><img id="showcase" src="http://www.creston.com/assets/images/layout/showcase.png" /></body></html> Link to comment Share on other sites More sharing options...
MrFish Posted June 29, 2011 Share Posted June 29, 2011 function imgshow(image){ document.getElementById('showcase').setAttribute("src", image); } This is correct. To use window.showcase you can put this anywhere in your code but for your purposes you should put it outside of functions. So at the start- <script>window.showcase = document.getElementById("showcase");function setsize(){ if (showcase && showcase.style){ showcase.style.height = '300px'; showcase.style.width = '400px'; } } But this won't work before showcase has been loaded. So you'l need to wait until the body is loaded because you use document.getElementById function init(){window.showcase = document.getElementById("showcase");}......<body onload="init()">... Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2011 Author Share Posted June 29, 2011 function imgshow(image){ document.getElementById('showcase').setAttribute("src", image); } This is correct. To use window.showcase you can put this anywhere in your code but for your purposes you should put it outside of functions. So at the start- <script>window.showcase = document.getElementById("showcase");function setsize(){ if (showcase && showcase.style){ showcase.style.height = '300px'; showcase.style.width = '400px'; } } But this won't work before showcase has been loaded. So you'l need to wait until the body is loaded because you use document.getElementById function init(){window.showcase = document.getElementById("showcase");}......<body onload="init()">... Yes, I see how window is used.For the setAttribute, I don't know why the first one works but not the second and third ones?Could you tell me why? Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2011 Author Share Posted June 29, 2011 After all, I've found the answer to the passing parameter doubt after searching function variable online.I don't know why, but it lies in where I should have used ' ' instead of " ". It was so trivial that I didn't ever pay attention to.Well, it might be because I'd used " " and within it should be ' ' or vice versa. So I reckon the point is that " " cannot be used to embrace another " " and it applies to ' '.Please correct me if anyone who knows more of the theory part of JS. I am always awkward at explaining why that is that in the world of JS.Thanks. Link to comment Share on other sites More sharing options...
thescientist Posted June 29, 2011 Share Posted June 29, 2011 it's because you have to escape your quotation marks if you're going to nest them, or else use single quotes inside a double quoted string (or vice versa). Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2011 Author Share Posted June 29, 2011 it's because you have to escape your quotation marks if you're going to nest them, or else use single quotes inside a double quoted string (or vice versa).Is that something like:"func("\parameter")"? Link to comment Share on other sites More sharing options...
thescientist Posted June 29, 2011 Share Posted June 29, 2011 Is that something like:"func("\parameter")"?yes, but you need to escape both of them. (because it will interprete the second double quote as the end of the string). so your two options are:onclick="func("\parameter\")" or onclick="func('parameter')" i usually prefer the second method if possible. Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2011 Author Share Posted June 29, 2011 Yes, me too.The very first time I was into JS, I was annoyed when reading those long scripts with "\XXX\" all over the place.The second one is much more readable. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.