Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 11, 2013 at 12:25 pm #41935
    jazzgnat
    Member

    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 #120694
    derekbtw
    Participant

    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 #121081
    jazzgnat
    Member

    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?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.