473,322 Members | 1,379 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Make an image visible/hidden and move around while hidden

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
1 2947
Dormilich
8,658 Expert Mod 8TB
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

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

Similar topics

4
by: Bob Franz | last post by:
Hello everyone, Basically what I am wondering is I have a running timer and once it reaches a certain time I want an image to apear that the user can click on. Is this possible and if it is can...
1
by: PCB | last post by:
Hi all, Not sure if this is possible, but can I change the controls of a command button on a per record bases in a subform. In my case, I would like to make a command button visible only if...
3
by: Susan Bricker | last post by:
Greetings. I have three forms that are open at the same time. They are related and cascading. The first form (frmEventAdd) is the anchor. Each event can have many Trials. The second form is...
7
by: Dave | last post by:
I have a button on Form1 that hides the form and displays Form2: Form2 myForm2 = new Form2(); myForm2.Show(); this.Hide(); After I do some work in Form2 I want to close it and redisplay...
1
by: eddie wang | last post by:
How to move around a picture file dynamically in an asp page? Any link to sample code will be great. Thanks. *** Sent via Developersdex http://www.developersdex.com *** Don't just participate...
6
by: Selden McCabe | last post by:
I have a form with a bunch of image buttons. When the user moves the mouse over a button, I want to do two things: 1. change the Imagebutton's picture, and 2. make another control visible. I'm...
16
by: Miguel Dias Moura | last post by:
Hello, i have 5 panels in an ASP.net / VB page. The panel 1 is visible the other 4 are NOT visible. I also have 5 images: image 1, image 2, ..., image5. When i click one of the images,...
4
by: Diego F. | last post by:
Hello. I have a process that can take a long time and I'm trying to put an animated gif while the user is waiting. I added a panel with a picturebox with the image inside. The panel is not...
3
by: Pero | last post by:
How to make image of web page, like this: http://www.networksolutions.com/whois/results.jsp?domain=test.com Tnx Pero
4
by: KiwiGenie | last post by:
I have an image on my report that I want to make visible only when a yes/no field is true. The yes/no field is a hidden text box called txtTried. The code I've been trying to use is: If Me!txtTried...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.