officemanager2
Technical User
I've been working on a simple rollover based on a book I've been reading. In their example there is only one image that drops down and I'm working on a page where there are four separate images that drop down. It seems I may need to add a line to unbind once the initial click occurs, but I'm really not sure. I figured that I've ID'd the function as 'clickme' and should be able to call it as often as needed.
Any assistance is appreciated.
Jquery
CSS
HTML - not complete but I believe this is all of the relevant information
Too add to the enjoyment I was hoping to add an 'x' (in the upper right)to close the window as oppose to just clicking on that as the end users are use to seeing an x and may not figure out to just click on the image again.
Any assistance is appreciated.
Jquery
Code:
$(document) .ready(function(){
$("#clickMe"). click(function() {
$("img") .fadeIn(1000);
$("#picframe") .slideToggle("slow");
});
});
CSS
Code:
#BG {
background-image:url(BG.png);
background-repeat:no-repeat;
width:1000px;
height:800px;
}
#gridwrapL{
width: 1000px;
height: 800px;
}
#clickMe, #picframe{
padding: 2px;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
color: #000;
text-align: center;
width: 50px;
height: 50px;
display: block;
}
#picframe {
border-width: 0px 2px 2px 2px;
border-color: none #444 #444 #444;
display: none;
width:205px
}
HTML - not complete but I believe this is all of the relevant information
Code:
<div style="width: 100px; height:100px; float:left;"> <!--begin of pdh 9-->
<div style="width: 48px; height:48px; float:left;">
<div style="float:left;" id="clickMe"><span id="picframe"><img src="PDH9.png" /></img></span></div>
</div>
</div> <!--end of pdh 9-->
<script src="jquery-1.7.1.min.js"></script>
<script src="infodrop.js"></script>
Too add to the enjoyment I was hoping to add an 'x' (in the upper right)to close the window as oppose to just clicking on that as the end users are use to seeing an x and may not figure out to just click on the image again.