Grow your CSS skills. Land your dream job.

Can you turn the all CSS infinite scrolling slide show into an image map for navagation.

  • # January 11, 2013 at 12:25 pm

    Hello All,

    I am working on a site for a friend’s upcoming cartoon. I am using the all css infinite scrolling slideshow (from here on referred to as the ACISS) to display his characters. I would like to make the pic an image map or give it similar functionality. I managed to make a link on top of the image and get it to move but it did not sync with the image.

    <html>
    <head>
    <link href="tbbtstyle.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="slideshow">
    <div class="images">
    <a id="amy" href="#"></a>
    <a id="burnedette" href="#"></a>
    <a id="sheldon" class=map href="#"></a>
    <a id="leonard" href="#"></a>
    <a id="howard" href="#"></a>
    <a id="raj" href="#"></a>
    <a id="penny" href="#"></a>
    </div>
    </div>
    </body>
    </html>

    body{		background-color:#cccccc;
    }

    .slideshow {
    height: 297px;
    position: relative;
    overflow: hidden;
    }
    .images {
    background: url("bigBangCast.png");
    position: relative;
    left: 0;
    top: 0;
    height: 297px;
    width: 300%;
    -webkit-animation: slideshow 60s linear infinite;
    -moz-animation: slideshow 60s linear infinite;
    }
    .slideshow:hover .images, .slideshow:hover .images a{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    }
    @-webkit-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }

    @moz-keyframes slideshow {
    0% { left: 0; }
    100% { left: -200%; }
    }



    #amy{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 237px;
    height: 296px;
    -webkit-animation: slideshow 60s linear infinite;
    border: 1px solid yellow;
    z-index: 10;
    }

    #burnedette{
    position: absolute;
    top: 0px;
    left: 238px;
    width: 237px;
    height: 296px;
    -webkit-animation: slideshow 60s linear infinite;
    border: 1px solid yellow;
    z-index: 10;
    }

    This is just a test site my friend hasn’t finished the images for the real one yet. I hope to use this for navigation and to add some wow by displaying the character names and some info about them when the character is hovered over. I may be making this overly complicated. If so tell me what the simpler way is.
    Thanks for your help.

    # January 11, 2013 at 1:25 pm

    You forgot your quotes on < a id="sheldon" class=map href="#"> it should be changed to: < a id="sheldon" class="map" href="#"> without the spaces.

    # January 15, 2013 at 11:39 am

    Derek, thanks for catching that quote but I am still looking for an answer as to the question of making the scrolling image a image map for navigation. Is this possible and would it be easier doing it a different way like with js?

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

You must be logged in to reply to this topic.

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