Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Content Editor Discussions

Forum for content editors and CMS users.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

How can I make image rotate and have hyperlinks


Go to End
Reply

11 Posts   5876 Views

Avatar
Singh

23 January 2009 at 1:31pm Community Member, 9 Posts

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

Avatar
Nivanka

25 January 2009 at 2:28pm Community Member, 395 Posts

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 :)

Avatar
UncleCheese

25 January 2009 at 6:10pm 4085 Posts

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.

Avatar
ajshort

25 January 2009 at 7:32pm Community Member, 244 Posts

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.

Avatar
Nivanka

26 January 2009 at 2:10am Community Member, 395 Posts

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

[url]http://plugins.jquery.com/project/agile-carousel[/url]

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

Avatar
Singh

2 February 2009 at 1:26pm Community Member, 9 Posts

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

Avatar
Nivanka

2 February 2009 at 2:51pm Community Member, 395 Posts

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. [url]http://interface.eyecon.ro/[/url]

i think you have done something wrong with the carousel.

Avatar
Singh

3 February 2009 at 9:39am Community Member, 9 Posts

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

Go to Top