hello everyone,
got a tricky one here.
i found a really simple and neat free slideshow for my site called SIMPLESLIDE.
i want to build my website using several of these slideshows.
an example of the slideshow in action can be seen here on the homepage,
http://www.simplesli.de/
you will notice that the LEFT and Right buttons for the slideshow appear only on mouseover within the slideshow box.
this is where my problem is. it is not explained on the site how to create that effect, so i assumed that it should be apart of its functionality, but it is not.
the following code was duplicated from the site itself and using FIREBUG to try to figure out how the buttons show up get me nowhere.
the HTML for the buttons are placed within the slideshow HTML:
Code:
<div class="slideshow">
<div class="left-button left" rel="" style="display: none;"></div>
<div class="simpleSlide-window left" rel="">
....
....
</div>
<div class="right-button left" rel="" style="display: none;"></div>
</div>
the CSS for the left and right buttons look like:
Code:
.left-button {
background-image:url(leftbutton image);
}
.right-button {
background-image:url(rightbutton image);
right: 1px;
}
.left-button, .right-button {
cursor:pointer;
height:72px;
position:absolute;
width:50px;
display: none;
z-index: 9999;
top:50%;
margin-top: -36px;
}
in both the CSS and HTML the display is NONE, and yet, whenever i mouseover, the display changes to BLOCK and i see the left and right buttons fine.
how in the heck is this occurring?
any ideas would be appreciated.
thanks
