jQuery Cycle Extras
Yesterday I told you about an excellent Jquery script called Cycle. I’ve been using this recently on a lot of sites – mostly as a header.
It works well as a header slideshow except when you want to put a logo on it – the first idea would be to just put the logo on the actual images – but this requires you to do it on all images, and future images, if you decide to change the images at a later date.
A solution is to overlay the image using a transparent image ……
After the <div></div> which adds the images add …
<div class=”logo”>
<img src=”images/logo.png”>
</div>
Note: Make sure the logo image file is the same size as the images in the slideshow.
Now style the new class with the following …
.logo {
height: 175px;
width: 960px;
overflow: hidden;
z-index: 10;
position: relative;
top: -175px;
}
Note: Make sure that the height, width and top match the height and the width of the slideshow.
Examples of this …
http://www.graemehowefencing.co.uk/
http://www.svlhire.co.uk/home.html
