shifting group of images horizontally on click (no swap/hide)

@RaphaAug 26.2012

On clicking on (independent) next/previous arrows I would like to shift a group/row of 5 images (each 660px x 372px) by their own width (660px) to the right/left.
Since I have 5 images it should allow just two clicks in each direction.

This version is as close as I have gotten:
~~[URL=”http://raphaelzwyer.com/testRapha/portfolio_ms.html”]~~http://raphaelzwyer.com/testRapha/portfolio_ms.html[/URL]

I used WowSlider and different instances of the same image group. Problem: large images (loading time) and not a smooth transition by image width in one direction, it skips images and jumps forth and back.

Images can be grouped/hold in a div container or an unsorted list like this:

[code=html]<body><div id=”imagewrapper”><ul class=”images”><li class=”image1″><img src=”images/groupe1/img1.png” width=”548″ height=”372″ alt=”img1″ /></li><li class=”image2″><img src=”images/groupe1/img2.png” width=”548″ height=”372″ alt=”img2″ /></li><li class=”image3″><img src=”images/groupe1/img3.png” width=”548″ height=”372″ alt=”img3″ /></li><li class=”image4″><img src=”images/groupe1/img4.png” width=”548″ height=”372″ alt=”img4″ /></li><li class=”image5″><img src=”images/groupe1/img5.png” width=”548″ height=”372″ alt=”img5″ /></li></ul></body>[/code]

or it can be just one long image comp like that:

[code=html]<body><div id=”imagewrapper”><img src=”images/imggroup.jpg” width=”3348″ height=”372″ alt=”imggroup1″ /></div></body>[/code]

No swap or hide, I just literally want the whole group to move.

I’m a Javascript novice. Tried Javascript and jQuery plugins, image sprite and sliding door techniques. There must be a simple light-weight solution, maybe even just CSS only but I can’t figure it out.

Please help!!
Thanks!

to post a comment

CSS

8 Comments(s) _↴

@bionoidAug 26.2012 — #I used the larger image when I did this:

[CODE]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>shifting group of images</title>
 
   <style type="text/css">
 
   .ShiftGroup IMG {
   vertical-align: top;
   }
   .ShiftGroupI,
   .ShiftGroupP {
   position: absolute;
   width: 660px;
   left: 50&#37;;
   top: 0px;
   }
   .ShiftGroup,
   .ShiftGroupC,
   .ShiftGroupI,
   .ShiftGroupP {
   height: 372px;
   }
   .ShiftGroup {
   position: relative;
   overflow: hidden;
   }
   .ShiftGroupC {
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   }
   .ShiftGroupI {
   margin-left: -330px;
   z-index: 1;
   }
   .ShiftGroupP {
   background-color: #fff;
   z-index: 2;
   opacity: 0.9;
   filter: alpha(opacity=90);
   }
   .ShiftGroupD {
   position: absolute;
   width: 50px;
   height: 50px;
   top: 50%;
   margin-top: -25px;
   border: 2px solid #00f;
   }
   #ShiftLeft  {right: 20px;}
   #ShiftRight {left: 20px;}
 
   </style>
 
  </head>
  <body>
 
   <div class="ShiftGroup">
   <div class="ShiftGroupC">
   <div class="ShiftGroupI">
   <img id="ShiftGallery" src="http://raphaelzwyer.com/testRapha/data1/images/gallery_ms1.jpg" alt="" />
   </div>
   <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"></div></div>
   <div class="ShiftGroupP" style="margin-left: 330px;"><div id="ShiftRight" class="ShiftGroupD"></div></div>
   </div>
   </div>
 
   <script type="text/javascript">
 
   (function()
   {
   var
   current = 2,
   images  = 5,
   width   = 672,
   busy    = 0,
   gallery = document.getElementById('ShiftGallery').style;
 
   gallery.marginLeft = -(width * current) + 'px';
 
   function mover(fromx, tox)
   {
   var i, t = new Date().getTime(), d = 150; busy = 1; gallery.marginLeft = -fromx + 'px';
   i = setInterval(function() {gallery.marginLeft = -Math.floor(((tox - fromx) * Math.min(Math.max((1 / d) * (new Date().getTime() - t), 0.01), 0.99)) + fromx) + 'px';}, 10);
   setTimeout(function() {clearInterval(i); gallery.marginLeft = -tox + 'px'; busy = 0;}, d);
   }
   document.getElementById('ShiftLeft' ).onclick = function() {var previous = current; if (!busy && current > 0) {mover((width * previous), (width * --current));}};
   document.getElementById('ShiftRight').onclick = function() {var previous = current; if (!busy && current < (images - 1)) {mover((width * previous), (width * ++current));}};
 
   }());
 
   </script>
 
  </body>
 </html>[/CODE]

The webpage was tested and works "as-is" in IE7-9, FF and Chrome.

@RaphaauthorAug 27.2012 — #Thanks a lot, bionoid!

Exactly what I was looking for.

The only thing..., if I click through, every now and then I get a transparent light blue layer on top of some of the images (unfortunately I can't send you a screenshot here). Looks almost like an image-map rollover.

Other than that, perfect, works like a charm!

The Javascript part is still Greek to me though but I'll try to understand what exactly you did here and embed it soon.

I hope you don't mind answering some questions I may have along the way, so I can understand/learn something instead of just copy/paste your solution.

Again, thank you so much for your time!

Rapha

@bionoidAug 27.2012 — #The blue overlay is caused by the image being selected if you double-clicked the control.

To try and prevent this I have removed the <img> tag, and substituted it with a <div> and set the gallery as a background image:

[CODE]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>shifting group of images</title>
 
   <style type="text/css">
 
   .ShiftGroupI,
   .ShiftGroupP {
   position: absolute;
   width: 660px;
   left: 50&#37;;
   top: 0px;
   }
   .ShiftGroup,
   .ShiftGroupC,
   .ShiftGroupI,
   .ShiftGroupP,
   [COLOR="Red"]#ShiftGallery[/COLOR] {
   height: 372px;
   }
   .ShiftGroup {
   position: relative;
   overflow: hidden;
   }
   .ShiftGroupC {
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   }
   .ShiftGroupI {
   margin-left: -330px;
   z-index: 1;
   }
   .ShiftGroupP {
   background-color: #fff;
   z-index: 2;
   opacity: 0.9;
   filter: alpha(opacity=90);
   }
   .ShiftGroupD {
   position: absolute;
   width: 50px;
   height: 50px;
   top: 50%;
   margin-top: -25px;
   border: 2px solid #00f;
   }
   [COLOR="red"]#ShiftGallery {background: url(http://raphaelzwyer.com/testRapha/data1/images/gallery_ms1.jpg) no-repeat 0 0; width: 3348px;}[/COLOR]
   #ShiftLeft    {right: 20px;}
   #ShiftRight   {left: 20px;}
 
   </style>
 
  </head>
  <body>
 
   <div class="ShiftGroup">
   <div class="ShiftGroupC">
   <div class="ShiftGroupI">[COLOR="red"]<div id="ShiftGallery"></div>[/COLOR]</div>
   <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"></div></div>
   <div class="ShiftGroupP" style="margin-left: 330px;"><div id="ShiftRight" class="ShiftGroupD"></div></div>
   </div>
   </div>
 
   <script type="text/javascript">
 
   (function()
   {
   var
   current = 2,
   images  = 5,
   width   = 672,
   busy    = 0,
   gallery = document.getElementById('ShiftGallery').style;
 
   gallery.marginLeft = -(width * current) + 'px';
 
   function mover(fromx, tox)
   {
   var i, t = new Date().getTime(), d = 150; busy = 1; gallery.marginLeft = -fromx + 'px';
   [COLOR="red"]i = setInterval(function() {gallery.marginLeft = -Math.floor(((tox - fromx) * ((1 / d) * (new Date().getTime() - t))) + fromx) + 'px';}, 10);[/COLOR]
   setTimeout(function() {clearInterval(i); gallery.marginLeft = -tox + 'px'; busy = 0;}, d);
   }
   document.getElementById('ShiftLeft' ).onclick = function() {var previous = current; if (!busy && current > 0) {mover((width * previous), (width * --current));}};
   document.getElementById('ShiftRight').onclick = function() {var previous = current; if (!busy && current < (images - 1)) {mover((width * previous), (width * ++current));}};
 
   }());
 
   </script>
 
  </body>
 </html>[/CODE]

@RaphaauthorAug 30.2012 — #Thanks again, bionoid!

Let me know whenever you have design/branding issues I can help you with.

I got it to work, even in EI7 now (I added some opacity filters). Great!

What I have so far:

raphaelzwyer.com/testRapha/portfolio_ms.html

Unfortunately I'm running into unexpected issues now. Stupid unexperienced me, I didn't think of that... This is just one of 36 similar pages, where just the gallery image and the copy changes. Here's the overview page from where they will be accessed:

raphaelzwyer.com/testRapha/portfolio.html

(clicking on the first thumb should get you back to our first gallery page)

Problem:

Since the background image (on the first page "gallery_ms1.jpg") is defined by the CSS ID "ShiftGallery" I can't just swap it for the individual pages and creating 40 different ShiftGallery instances would be overkill, no?

Is there a simple way to swap images for the individual pages?

ShiftGallery code inline on the respective HTML pages or maybe background image in a HTML tag rather than in the style sheet?

That got me all nervous – I was so close!

Appreciate your help! Don't let me hang here!

Rapha

–– Code follows ––

@RaphaauthorAug 30.2012 — #I just can't figure it out!!

Here's what I did so far:

The HTML page:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>raphaelzwyer</title>
 <link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 </head>
 
 <body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
 
 <div id="container">
 
  <div id="topmenu">
   <ul>
   <li class="menubuttonactive"><a href="portfolio_ms.html">portfolio</a></li>
   <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
   <li class="menubuttons"><a href="about.html">about</a></li>
   <li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
   <li class="menubuttons"><a href="resume.html">resume</a></li>
   <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
   <li class="menubuttons"><a href="contact.html">contact</a></li>
   </ul>
  </div> <!-- end of topmenu --> 
 
  <div id="header"> 
   <ul id="overviewlayer">
   <li><img src="images/wordmark.jpg" width="268" height="48" alt="wordmark"/></li>
   <li><a href="portfolio.html"><span class="menuicon"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menuIcon','','images/menuicon_b.png',1)"><img class="menuicon" src="images/menuicon_a.png" alt="menuicon_overview" name="menuicon" width="44" height="36" border="0"/></span><span class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></span></a></li>
   </ul>  <!-- end of overviewlayer -->
  </div>  <!-- end of header --> 
 
  <div id="content">
   <div class="linesacross">
   <img src="images/linesabovegallery_g.png" width="3348" height="4" alt="divider" /></div> <!-- end of linesacross --> 
 
  <div class="ShiftGroup">
   <div class="ShiftGroupC">
   <div class="ShiftGroupI"><div id="ShiftGallery"></div></div>
   <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
   <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
   </div>  <!-- end of ShiftGroup --> 
   </div>  <!-- end of ShiftGroupC --> 
 
 
  <div id="description">
   <p id="descriptiontitle">descriptiontitle</p>
   <p id="descriptiontext">description</p>
   </div> <!-- end of description --> 
 
   <div id="layerleft"></div>
   <div id="layerright"></div>
 
 </div> <!-- end of content -->
 
 </div> <!-- end of container -->
 
 <script type="text/javascript" src="js/raphaelzwyer.js"></script>
 
 </body>
 </html>[/code]

The Style Sheet:

[CODE]@charset "UTF-8";
 /* CSS Document */
 
 * {
 margin: 0;
 padding: 0;
 border: none;}
 @font-face {
 font-family: 'BotonReg';
 src: url('../fonts/BotonReg.eot');
 src: url('../fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
 url('../fonts/BotonReg.woff') format('woff'),
 url('../fonts/BotonReg.ttf') format('truetype'),
 url('../fonts/BotonReg.svg#BotonReg') format('svg');
 font-weight: normal;
 font-style: normal;
 font-variant: normal;} 
 @font-face {
 font-family: 'BotonMed';
 src: url('../fonts/BotonMed.eot');
 src: url('../fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
 url('../fonts/BotonMed.woff') format('woff'),
 url('../fonts/BotonMed.ttf') format('truetype'),
 url('../fonts/BotonMed.svg#BotonMed') format('svg');
 font-weight: normal;
 font-style: normal;
 font-variant: normal;}
 html, body {
 background-color: #FFFFFF;
 margin-top: auto;
 margin-right: auto;
 margin-bottom: auto;
 margin-left: auto;
 color: #a9a9a9;
 height: 100%;
 width: 100%;
 font-family: "BotonMed", "Courier", "Courier New", "Bookman Old Style", serif;
 font-size: 16px;
 overflow-y: scroll;
 letter-spacing: 0.062em;
 -webkit-font-smoothing: antialiased;
 font-smoothing: antialiased;
 font-smooth: 1em;
 text-shadow: 0 1px 1px rgba(255,255,255,.3);}
 a {
 text-decoration: none;
 color: #a9a9a9;}
 a:visited {
 text-decoration: none;
 color: #515151;}
 a:hover {
 text-decoration: none;
 color: #be1f2d;}
 a:focus {
 text-decoration: none;
 color: #be1f2d;}
 li {
 list-style-type: none;
 display: inline;} 
 #container {
 position: relative;
 top: 0px;
 margin: 0px auto;
 width: 860px;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 border: none;}
 #topmenu {
 position: relative;
 top: 0px;
 left: 212px;
 width: 660px;
 height: 48px;}
 .menubuttons {
 position:relative;
 top: 0px;
 width: 100px;
 height: 36px;
 background-image: url("../images/menubg.png");
 background-repeat: repeat-x;
 padding: 10px 0px 0px 0px;
 float: left;}
 .menubuttons:visited {
 position:relative;
 top: 0px;
 width: 100px;
 height: 36px;
 background-image: url("../images/menubg_v.png");
 background-repeat: repeat-x;
 padding: 10px 0px 0px 0px;
 float: left;}
 .menubuttons:hover {
 position:relative;
 top: 0px;
 width: 100px;
 height: 36px;
 background-image: url("../images/menubg_h.png");
 background-repeat: repeat-x;
 padding: 10px 0px 0px 0px;
 float: left;}
 .menubuttonactive {
 position:relative;
 top: 0px;
 width: 100px;
 height: 36px;
 background-image: url("../images/menubg_a.png");
 background-repeat: repeat-x;
 padding: 10px 0px 0px 0px;
 float: left;}
 .menubuttonactive a {
 color: #be1f2d;}
 .buttonspaces {
 height: 36px;
 list-style: none;
 float: left;}
 #header {
 position: relative;
 top: 0px;
 left: 212px;
 height: 176px;
 width: 660px;
 padding: 32px 0px 0px 0px;
 float: left;}
 .menuicon {
 position: relative;
 top: -10px;
 padding: 0px 0px 0px 112px;
 margin: 0px 0px 0px 0px;}
 #overviewlayer a .overview  {
 display:none;} 
 #overviewlayer a:hover .overview  {
 display: block;
 position: absolute;
 top: 106px;
 left: 0px;
 height: 852px;
 width: 660px;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 color:#000;
 font-size: 11px;
 opacity: 0.1;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
 filter: alpha(opacity=10);
 z-index: +800;}
 .overview {
 position: relative;
 top: 12px;
 left: 1344px;
 height: 852px;
 width: 660px;
 z-index: +10;}
 #content {
 position: absolute;
 top: 138px;
 left: -1132px;
 width: 3348px;
 height: 852px;
 clear: both;
 z-index: 1;}
 .linesacross {
 position: relative;
 top: 0px;
 left: 0px;
 height: 4px;
 width: 3348px;
 z-index: +80;}
 #layerleft {
 position: absolute;
 top: 12px;
 left: 0px;
 width: 684px;
 height: 380px;
 background-color: white;
 opacity: 0.9;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 filter: alpha(opacity=90);
 z-index: +600;}
 #layerright {
 position: absolute;
 top: 12px;
 left: 2675px;
 width: 676px;
 height: 380px;
 background-color: white;
 opacity: 0.9;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 filter: alpha(opacity=90);
 z-index: +600;}
 .ShiftGroupI,
 .ShiftGroupP {
 position: absolute;
 width: 660px;
 left: 50%;
 top: 2px;}
 .ShiftGroup,
 .ShiftGroupC,
 .ShiftGroupI,
 .ShiftGroupP,
 #ShiftGallery {height: 372px;}
 .ShiftGroup {
 position: relative;
 overflow: hidden;}
 .ShiftGroupC {
 position: absolute;
 width: 100%;
 left: 0;
 top: 10px;}
 .ShiftGroupI {
 margin-left: -330px;
 z-index: 1;}
 .ShiftGroupP {
 background-color: #fff;
 z-index: 2;
 opacity: 0.9;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 filter: alpha(opacity=90);}
 .ShiftGroupD {
 position: absolute;
 width: 50px;
 height: 50px;
 top: 50%;
 margin-top: -25px;}
 #ShiftGallery {
 background: url("../images/gallery_ms1.jpg") no-repeat 0 0; 
 width: 3348px;}
 #ShiftLeft    {right: 20px;}
 #ShiftRight   {left: 20px;}
 .thumbs {
 width: 156px;
 height: 132px;
 padding: 0px 12px 12px 0px;
 float: left;}
 .lastthumbs{
 width: 156px;
 height: 132px;
 padding: 0px 0px 12px 0px;
 float: left;}
 #description {
 position: relative;
 top: 8px;
 left: 1344px;
 width: 660px;
 height: 172px;}
 #descriptiontitle {
 position: relative;
 top: 12px;
 left: 0px;
 width: 660px;
 height: 38px;
 border-bottom-style: solid;
 border-width: 4px;
 font-family: "BotonMed", "Courier", "Courier New", "Bookman Old Style", serif;
 font-size: 22px;
 letter-spacing: 0.05em;
 color: black;
 margin: 0px 0px 18px 0px;}
 #descriptiontext {
 font-size: 19px;
 letter-spacing: 0.02em;}
 #footer {clear: both;}[/CODE]

@bionoidAug 30.2012 — #...

Problem:

Since the background image (on the first page "gallery_ms1.jpg") is defined by the CSS ID "ShiftGallery" I can't just swap it for the individual pages and creating 40 different ShiftGallery instances would be overkill, no?

Is there a simple way to swap images for the individual pages?

[COLOR="Red"]ShiftGallery code inline on the respective HTML pages or maybe background image in a HTML tag rather than in the style sheet[/COLOR]?

...[/QUOTE]

That should be as easy as you've just described it:

[CODE]#ShiftGallery {
 [COLOR="Red"]background-repeat: no-repeat;
 background-position: 0 0;[/COLOR]
 width: 3348px;
 }[/CODE]

[CODE]<div class="ShiftGroup">
 <div class="ShiftGroupC">
 <div class="ShiftGroupI"><div id="ShiftGallery" [COLOR="red"]style="background-image: url(../images/gallery_ms1.jpg);"[/COLOR]></div></div>
 <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
 <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
 </div>  <!-- end of ShiftGroup --> 
 </div>  <!-- end of ShiftGroupC -->[/CODE]

And since ShiftGallery is an ID in the document you could change the background-image on the fly if you wanted to:

[CODE]document.getElementById('ShiftGallery').style.backgroundImage = 'url(../images/gallery_ms1.jpg)';[/CODE]

------------------------------------------------------------

If you're using a server side language like PHP, you can just replace the image in html like so:

[CODE]<div class="ShiftGroup">
 <div class="ShiftGroupC">
 <div class="ShiftGroupI"><div id="ShiftGallery" style="background-image: url[COLOR="Red"](<?php echo $gallery_image; ?>[/COLOR]);"></div></div>
 <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
 <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
 </div>  <!-- end of ShiftGroup --> 
 </div>  <!-- end of ShiftGroupC -->[/CODE]

@RaphaauthorAug 30.2012 — #Wow, thank you so much!

You just pulled me out again. Lucky me to have found this forum and getting help from some experts like yourself. Getting stuck all the time is not fun and this is probably the only efficient way out of it. I finally feel like I'm getting somewhere.

I guess I'll go with the first solution for now, at least I understand what it does and why. But I'll certainly look as well into your other suggestions.

I guess "on the fly" refers to a Javascript solution? I'm quiet new to all this, finally starting to have a better understanding of HTML and CSS. Without further explanation Javascript is still Greek to me though. Is there a good web-source for me to get myself started on Javascript. Do you teach?

I guess PHP would be important too for CMS. And then there is WordPress... not sure how far I have to go as a designer...

Oh, one more thing: if you look at my portfolio_ms page there's this little icon (grey rectangles on the top right), on rollover it displays a transparent layer (preview of the overview page). The icon itself should swap too, to a red rollover version ("menuicon_a.png", when rollover "menuicon_b.png") but it doesn't do that anymore. Not sure why.

Again, thaaaanks!! I owe you.

@RaphaauthorSep 09.2012 — #<div class="ShiftGroupI"><div id="ShiftGallery" style="background-image: url(../images/gallery_ms1.jpg);"></div></div>

for some reason didn't work for me so I did the following:

<div class="ShiftGroupI"><div id="ShiftGallery"><img src="images/gallery_ms1.png" width="3348" height="372" alt="imagegallery1" /></div></div>

If you look at my portfolio_ms page there's this little icon (grey rectangles on the top right), on rollover it displays a transparent layer (preview of the overview page). The icon itself should swap too, to a red rollover version ("menuicon_a.png", when rollover "menuicon_b.png") but it doesn't do that anymore. Not sure why.

Also in #CSS _↴

Panels not aligning correctly Table HTML -> CSS Styles UL Navigation Buttons

Success!

Help @Rapha spread the word by sharing this article on Twitter...

Tweet This

shifting group of images horizontally on click (no swap/hide)

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

shifting group of images horizontally on click (no swap/hide)

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴