Forums

jazzgnat

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.

derekbtw

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.

jazzgnat

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?

treehouse : what would you like to learn today?

Forums

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