Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Make an image dissapear by clicking on a close button

 
Neha Ahmed
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I am very poor at javascript and I was so hoping you could help me. I have an image on my website set at the bottom left. This is the code I have:

================== Beginning of Code =======================================

<html>
<head>
<style type="text/css" media="all">
<!--
#float_bottom_left {
position:fixed;_position:fixed;
z-index:50;
bottom:0px;
left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}-->
</style>
</head>
<body>
<div id='float_bottom_left'>
<a href='http://www.ibcs-primax.com'>
<img border='0' src='https://lh4.googleusercontent.com/-Q-lP6DJSrSA/UFRP_7mAfkI/AAAAAAAAAIY/kn6dhZae9y8/h120/OracleGoldPartner.png'/></a>
</div>
</body>
</html>

=================== End of Code =========================================

I want to put a cross image on the right top corner of the image I have so that clicking on the cross will make the image disappear. I would so so so appreciate it if you could tell me what codes I have to add to achieve this effect and also where I should place these lines of code. I know this is really beginner stuff but I will be so grateful. Thank you again.

Kind Regards,
 
Keith Wood
Author
Ranch Hand
Posts: 38
jQuery
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you were to use jQuery for this the page would look like the following. Position the new image (line 30) at the top right via CSS (line 11). Load jQuery (line 17) and add a click handler to the close button (line 20).

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic