By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,968 Members | 1,588 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,968 IT Pros & Developers. It's quick & easy.

Make an image visible/hidden and move around while hidden

P: 16
Hi All,

How do I create two JavaScript functions, one that will change the image's visibility to hidden and one that will make it to visible. I want to set the image's onclick attribute to call the hide function. This way, the image will vanish whenever the user clicks on it. Also modify this function so that it calls the other function after a two-second delay. Next, I want make the image change its position while it is invisible. I am really new to any programming and really need some help.

This is what I have so far:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script language="Javascript">
  5. var timeToSleep = 2000; // in millisecs
  6. function showImage()
  7. {
  8. var x=null;
  9. var y=null;
  10. if(document.getElementById)
  11. x=document.getElementById("xxx");
  12. else if (document.images)
  13. x=document.images['imageName'];
  14. if(x && x.style)
  15. x.style.visibility = "hidden";
  16. }
  17.  
  18. </script>
  19.  
  20. </head> 
  21.  
  22. <body onClick="javascript:setTimeout('showImage();', timeToSleep)">
  23.  
  24. <a href="pictures" id="xxx" style="visibility:visible;"><img
  25. src="picture.jpg"></a>
  26.  
  27. </body> 
  28. </html>
Thanks

T
Jul 31 '13 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
with this simple html page the easiest way to move an element around is using absolute positioning. be aware however that absolute positioning may have unwanted side-effects on bigger layouts.

some notes:
  • missing Doctype, this will trigger Quirks mode in IE, which makes consisten CSS behaviour almost impossible
  • the language attribute is deprecated, use the type attribute instead
  • document.getElementById is supported by all browsers
  • event attributes should be written all lower-case
  • event attributes only ever contain JS code, so there is no need for the javascript: protocol
  • setTimeout expects a function to be given (by default): setTimeout(showImage, timeToSleep)
  • as soon as you click on the image, the link will forward you to the given location. hence for this example it is not necessary (and counter-productive) at all.
Aug 1 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.