Grow your CSS skills. Land your dream job.

Automatic image rotate w/Tabs

  • # May 21, 2008 at 5:41 pm

    On the http://www.marthastewart.com site there is an automatic image rotating with tabs under it that changes with the image. Also there is text on the image that is a link. This is REALLY cool and I want to do it. I’ve racked my brain and looked all over the web for this, but I do not even know what it is called!

    Does anyone know how to do this or can point me to some great tutorial on it? The only catch that it has to be accessible to all (508 compliant).

    # May 21, 2008 at 9:12 pm

    That is pretty cool. It’s Flash…

    You might wanna poke around FlashDen to see if you can find something like that:
    http://www.flashden.net/

    Keep in mind Flash isn’t always the most accessible… But you might be able to code up a <noscript> alternative…

    .V1
    # May 22, 2008 at 6:55 am

    Cmon Chris, Flash? Everybody knows u can do the same with a little bit of JavaScript.

    Even Spry can do a simple trick like that.
    http://www.adobe.com/cfusion/webforums/ … AND%20tabs

    # May 22, 2008 at 9:29 am

    Did you look at the example linked to? It’s not just a simple tabbed area. The tabs auto-play, they use non-web fonts, they grow and shrink with animation, they have shadows and overlay the graphics above them, they have linked content in different places within the graphics…

    I’m all for using javascript for these kind of things, but this example IS in Flash and if you want the exact same functionality, I’d wager Flash is the best way to go.

    # May 22, 2008 at 4:17 pm

    Thanks for the info! How about this example at http://www.msn.com

    Their rotator is not flash, but it does have automatic images, text with links, pauses on hover, next and previous links. Are there any tutorials or recommendations on something like this?

    .V1
    # May 23, 2008 at 5:00 am

    Chris, all your agruements can easly be done with any javascript library,

    Background images, with links.. image text replacement, css tab placement, load listeners. all easy as pie..

    # May 23, 2008 at 5:29 am
    "Tortugita" wrote:
    Their rotator is not flash, but it does have automatic images, text with links, pauses on hover, next and previous links. Are there any tutorials or recommendations on something like this?

    They use AJAX to decide which out of three divs (id=slide1, id=slide2, id=slide3) to have the display-property set to block. The other two gets a display: none;. Try to check out the children-markup of the div with id=infopane.

    # November 23, 2009 at 4:01 pm

    I could definitely use similar help. I’m about to try and build my first site onto the WordPress format and am wanting to do something similar as to what was mentioned above. I would like to add an automatic image rotate with tabs while giving the client capabilities to change out the photos. An example is …

    http://thepioneerwoman.com/

    This for sure is now flash, and I’m honestly not sure if this is way out of my league.

    Are there any tutorials or places anyone suggest I visit to start on something like this.

    Thanks so much,

    Diana

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".