text slide fade effect list of items

Hello Folks :) Happy Easter!

I'm trying to create a animated slide show of new articles. the effect i'm after is a text slide and cross fade type of effect that you can see on http://answers.yahoo.com with the 'Special feature' / 'Best of answers' box with the left right buttons. i've spent some time trying to figure out how they do it but its a bit out of my league i think :)

Not to mention complications because of the way I want to do it, i.e show the article headline in a thin strip over a background image and when the user mouseovers the headline then show the rest of the article intro text. then on clicking the left or right arrows; the headline and article text should transition to the next or previous one.

There can be 10-15 articles and I'm not fussed if they're in a javascript array or in the html itself.

Cheers,
VM


I've setup the basic layout of the page with images on photobucket etc. (code below)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
     
      *{margin:0;padding:0}
     
      body{margin:20px;}
     
      #tab{
      background:#FFFFFF url(http://www.southgate-melbourne.com.au/images/southgate_photo.jpg);
      width:464px;
      height:46px;
      position:relative;
      padding-top:120px;
      }
     
      #titleDiv{width:455px;padding:4px;}
      #titleDiv a{position:relative}
     
      a#info {
      color:#fff;
      font: normal 8pt Tahoma;
      padding:4x;
      text-decoration:none;
      display:block;
      }
     
      .NQ{font:normal 16pt Times New Roman;color:#fff;}
     
      a#info:hover {z-index:25;}
     
      #infoQ{
      display:none;
      color:#fff;
      font: normal 8pt Tahoma;
      text-indent:0px;
      width:358px;
      padding:5px 5px 0px 100px;
      height:95px;
      margin-top:20px;
      }
     
      img.nextBtn{float:right}
     
      #infoQ a{color:#fff;font: normal 8pt Tahoma;text-decoration:none;}
     
      #titleDiv[id],#infoQ[id]{background: url(http://i67.photobucket.com/albums/h287/sultana_14/q.png);}
     
      * html #infoQ,* html #titleDiv{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i67.photobucket.com/albums/h287/sultana_14/q.png', sizingMethod='scale');}
      </style>

      <script type="text/javascript">

      var arVersion = navigator.appVersion.split("MSIE")
      var version = parseFloat(arVersion[1])
      //fix PNG alpha transparency for IE on image load
      function fixPNG(myImage)
      {
          if ((version >= 5.5) && (version < 7) && (document.body.filters))
          {
             var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
               var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
               var imgTitle = (myImage.title) ?
                               "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
               var imgStyle = "display:inline-block;" + myImage.style.cssText
               var strNewHTML = "<span " + imgID + imgClass + imgTitle
                        + " style=\"" + "width:" + myImage.width
                        + "px; height:" + myImage.height
                        + "px;" + imgStyle + ";"
                        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                        + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
               myImage.outerHTML = strNewHTML      
          }
      }      
     
      //show article tip on mouseover article title
      function showTip(){
            document.getElementById('tab').style.paddingTop=1+'px';
            document.getElementById('tab').style.height=163+'px';
            document.getElementById('info').style.marginTop=-1+'px';
            document.getElementById('infoQ').style.display='block';
      }

      </script>
</head>

<body>

<div id="tab">
<img src="http://i67.photobucket.com/albums/h287/sultana_14/sign-up-now.png" width="94" height="94" alt="Sign Up Now" style="position:absolute;left:0;top:0;" onload="fixPNG(this)">
<span id="infoQ">
<span class="NQ">New Article:</span><br>
<A href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras urna libero, euismod at, vehicula fermentum, lacinia ut, orci. Nam euismod, nunc id lobortis pharetra, metus ante semper sapien, vel molestie mauris nisi tempor neque. Suspendisse est. Quisque rutrum pede vel dui. Quisque laoreet vestibulum leo.</span></A>
<div id="titleDiv"><a href="#" ><img src="http://i67.photobucket.com/albums/h287/sultana_14/right.gif" border="0" class="nextBtn"></a><a href="#" ><img src="http://i67.photobucket.com/albums/h287/sultana_14/left.gif" border="0" class="nextBtn"></a><a href="#" id="info" onMouseover="showTip();return false;">Click me to see more of article 1</a></div>
</div>




</body>
</html>
LVL 30
VirusMinusAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stormistCommented:
Utilize scriptaculous
http://script.aculo.us/

Specifically, here are the docs and demo: http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo
0
VirusMinusAuthor Commented:
both were not exactly what i was looking for.

I found this eventually and it was perfect, minor tweaking and i was home :)

http://smoothgallery.jondesign.net/showcase/gallery/
0
Computer101Commented:
PAQed with points refunded (500)

Computer101
EE Admin
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.