Hi

I am trying from a long time to get something like http://silverstripe.org/ homepage, where an image is changing and gives a link to a new page. Can anyone help me building something like that.
I basically want it for my website, where i would like to have images pointing to different pages for news purposes.

Thanks
Singh

This can be done in two methods,

Create two images with the logos,

Set a background for a H1, or something else to display

My example is this

<style type="text/css">

#Header{
background:url(urlof the image);
width:somewith;
height:someheight;
overflow:hidden;
text-indent:-90000px;
}


#Header:hover{
background:url(url of the second image);
}

</style>

....

<h1 id="Header">This is the header</h1>

....

This is the second method. Use a large image with both logos. one below the other.

Use the following code to make it.

<style type="text/css">

#Header{
background:url(urlof the image) top;
width:somewith;
height:someheight;
overflow:hidden;
text-indent:-90000px;
}


#Header:hover{
background:url(urlof the image) bottom;
}

</style>

....

<h1 id="Header">This is the header</h1>

....

I would really suggest you to use the second method :)

Yeah, the first method isn't really all that practical. You'll suffer lag time while the second image loads. Sprites, as suggested in the second method are really the accepted best practice for this.

I think you both misunderstood the question - I think that Singh is referring to the image carousel rather than the home page link.

In response to the OP: This is not an SS effect, but rather something that you need to achieve using some sort of javascript. There are many plugins available for many JS frameworks that enable you to do this. Something like the jquery cycle plugin (http://malsup.com/jquery/cycle/) would achieve what you are after - all you need to do is set up SS to output the appropriate HTML using a <% control %> tag, and then use the Requirements class to include some custom javascript that fires of the cycler.

Yes Ajshort, I think you are correct, I found a nice carousel plugin for JQuery,

http://plugins.jquery.com/project/agile-carousel

Also I am thinking of working on a module to do this, lets see what I can do ;)

Hi Guys,

Thank you very much for the support, Actually Something went wrong and i never got an email for the replies to post, I kept looking the post for a day, and then never came back. I just checked it again to see such a great support. Actually ajshort is right. Thats what I am trying to do, and yes I tried it using agile carousel as suggested by Nivanka, but I am messing it up, due to some reason. Please let me know if any one gets success using agile carousel.
I will keep on visiting this discussion now on.

Thanks
Singh

Hi did you refer to the agile carousel demo.

anyway I have something like that included on my website http://whynotonline.com
it is done with the interface plugin for jQuery. http://interface.eyecon.ro/

i think you have done something wrong with the carousel.

Hi Nivanka

Thanks for your replies, I tried using agile carousel. If I make a separate folder in my FTP directory, and copy all the contents of the agile, everything works, But when I could not get it going when I want to use the carousel in the existing webpage, It changes the layout and some other settings of the page, due to css file I think, and no image comes up.
Can you please tell me, where should I put these files in my website, so that they work fine.

Cheers
Singh