Rollover image transitions

I'm a new Captivate user working with version 3. I've been
fighting with Captivate to try and allow users in a training CBT to
mouseover a spot, see a simulated flyout submenu (via rollover
image), then be able to click an item in the submenu to continue.
The only acceptable workaround I've found is to have the
rollover image that displays the flyout submenu exit slowly (4
seconds or more, ideally), so I can position a click box in the
desired spot. The user feels like they're clicking on the submenu
since that's how it looks, but in Captivate they're actually
clicking on a spot in the background image...the delayed fade of
the rollover image creates that illusion.
Here's the problem. For whatever reason, the amount of time I
can set for the fade time of the rollover image varies from slide
to slide. Sometimes it's capped at 2.9 seconds, sometimes 4.3
seconds, etc.. All of my slides are set to run 600 seconds and I've
got the rollover image set to continue to the end of the slide.
Anybody have any idea what's causing that time limit and how
I can change it? 2.9 seconds just isn't enough - the image starts
to fade right before a typical user would be ready to click.
Thanks in advance!
Andrew

Slide 1 contains the "jump to next slide" mouseover widget in
the correct spot. Add a click box tucked away in the corner of the
slide with a Failure caption directing the user where to mouse
over. We don't want the user to actually click the box, we just
want the Failure caption so don't enable reporting for the box if
you're using an LMS.
The user mouses over and the movie jumps to slide 2, where
the fly-out menu is visible with a click box over the correct menu
item. The click box uses its own Failure caption.
User clicks the menu item and movie progresses to slide 3...
Should be a piece of cake...

Similar Messages

  • Swf file causing rollover images not to work

    I've inserted a Flash file into my webpage in Dreamweaver and it broke all my rollover images.  Even deleting the swf file and reinserting the rollover images doesn't work.  I've read a few threads on this but can't quite find exactly what I'm looking for.  I think it's something in the <head> code but I'm not sure.  Any help would be much appreciated!
    <head>
    <title>Matt  Relstab | Still Photography | Moving Pictures | Sound  Design</title>
    <meta http-equiv="Content-Type"  content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
    <!--
    function  MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr;  for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)  x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var  d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
         var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;  i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;  d.MM_p[j++].src=a[i];}}
    function  MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document;  if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document;  n=n.substring(0,p);}
      if(!(x=d[n])&&d.all)  x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)  x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++)  x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return  x;
    function MM_swapImage() { //v3.0
      var  i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;  for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;  if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    <meta  name="keywords" content="natural light photography, media producer  boston, online media, photographs, sound design, audio for film, web  video, video production,
    boston production, portable recorder, digital photography, digital  media production">
    </script>
    <style  type="text/css">
    <!--
    body {
    background-color: #3f4450;
    -->
    </style>
    <script  src="Scripts/AC_RunActiveContent.js"  type="text/javascript"></script>
    </head>

    For starters, look at the first line on your errant page, it starts out:
    <meta name="keywords" content="audio reel, foley artist, sound effects mixer, audio mixer
    boston, sound engineer, post production">
    <html>
    Thats not good.  If you look at your other pages, the <html> tag is first, the way it should be.
    Switch them around, then try this, remove your <html> tag (the very first tag is where is should be) and replace it with this
    <!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">
    See what that does for you.
    Gary
    On Edit:  I just noticed that you have
    <meta name="keywords" content="natural light photography, media producer boston,
    online media, photographs, sound design, audio for film, web video, video production,
    boston production, portable recorder, digital photography, digital media production">
    inside your js for the rollovers...Move them out of the script.
    GAry

  • Rollover image works on dreamweaver/preview but not on website

    Hey everybody so I'm working on a site for my new clothing line and I am frustrated out of my mind right now because everything seemed to work fine until I published the site my biggest problem right now is that the rollover images I'm using do not show on the actual site but they work perfectly on dreamweaver and the browser preview PLEASE I NEED HELP
    here's the CSS/HTML (Below)
    <!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>Store</title>
    <style type="text/css">
    #main .container #content p {
        body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; } 
    body { font-family: Arial, Helvetica, sans-serif; } 
        .container {
            width: 1000px; 
            margin: 0 auto; 
           body { 
            font-family: Arial, Helvetica, sans-serif; 
            background: #e4e2e2;
    .Header {
        background-image: url(images/Doozie-Jank-Website_03.jpg);
        background-repeat: repeat-x;
                   #logo { 
            background: url(images//images/webheader_08.png) no-repeat; 
            height:300px; 
            width: 900px; 
               #logo h1 { 
            text-indent: -9999px; 
            padding-top: 40px;
            ul#menu { 
            list-style: none; 
        ul#menu li a { 
            font-size: 35px; 
            color: #c7c7c7; 
            text-decoration: none; 
        ul#menu { 
            list-style: none; 
            padding-top: 185px; 
        ul#menu li { 
            float: left; 
            padding-left: 60px; 
            ul#menu li { 
            float: left; 
            padding-left: 10px; 
            padding-right: 50px; 
        #view-cart{
            position:absolute;
    right:650px;
    top:305px;
    #rollover{
        margin:100px 20px;
        height: 400px;
        width: 400px;
        text-indent: 10000px;
        overflow: hidden;
        background: url(Images/deer-in-headlights-store.gif) top left no-repeat;
        display: block;
    #rollover:hover{
        background-position: bottom left;
        float:left;
    width:110px;
    height:0px;
    margin:5px;
        #sidebar { 
        float: right; 
               #sidebar { 
            float: right; 
            margin-left: 100px; 
            margin-top: -62px; 
           #footer { 
            background: url(images/footer.jpg) repeat-x;
            padding-top: 20px; 
            padding-bottom:60px; 
            margin-top: 40px; 
              color: #fff; 
        #footer p {
            padding-top: 20px; 
            padding-bottom:60px;
            margin-top: -25px;
            margin-bottom: -25px; 
              color: #fff;
          </style>
    <body class="Header">
            <div id="main"> 
            <div class="container"> 
                 <div id="header"> 
                 <div id="logo"> 
        <h1>Doozie Jank</h1>
                 <ul id="menu"> 
            <li><a href="index.html">Blog</a></li> 
            <li><a href="Store.html">Store</a></li> 
            <li><a href="About.html">About</a></li> 
            <li><a href="Contact.html">Contact</a></li>
             <li><a href="#">Cart</a></li>
    </form>
        </ul> 
                 </div>
                 </div><!--end header -->
                  <div id="view-cart">
                  <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="8JUVRPJ32YCFC">
    <input type="hidden" name="display" value="1">
    <input type="image" src="images/images/button-view-cart_23.png" width="174" height="47" >
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
                  </div><!--end view-Cart-->
    <div id="sidebar">
        <ul>
                         <a href="http://www.facebook.com/home.php#!/pages/Doozie-Jank/137039669686754"><img src="images/Facebook1.png" alt="" width="52" height="54" /></a>
                         <a href="http://twitter.com/DoozieJank"><img src="images/Twitter1.png" alt="" width="52" height="54" /></a>
                        </ul>
         </div><!--end sidebar-->
      <div id="rollover">
       <a href="#"></a>
    </div><!--end shirts-->
    <div id="Buy">
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <table>
    <tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
        <option value="Mens-S">Mens-S </option>
        <option value="Mens-M">Mens-M </option>
        <option value="Mens-L">Mens-L </option>
        <option value="Mens-XL">Mens-XL </option>
        <option value="Womens-S">Womens-S </option>
        <option value="Womens-M">Womens-M </option>
        <option value="Womens-L">Womens-L </option>
        <option value="Womens-XL">Womens-XL </option>
    </select> </td></tr>
    </table>
    <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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 +9ftudFJDcAOzlVFH86Mhhv-----END PKCS7-----
    ">
    <input type="image"src="images/images/button-view-cart_13.png" width="160" height="43">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <table>
    <tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
        <option value="Men's-S">Men's-S </option>
        <option value="Men's-M">Men's-M </option>
        <option value="Men's-L">Men's-L </option>
        <option value="Men's-XL">Men's-XL </option>
        <option value="Women's-S">Women's-S </option>
        <option value="Women's-M">Women's-M </option>
        <option value="Women's-L">Women's-L </option>
        <option value="Women's-XL">Women's-XL </option>
    </select> </td></tr>
    </table>
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <table>
    <tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
        <option value="Mens-S">Mens-S </option>
        <option value="Mens-M">Mens-M </option>
        <option value="Mens-L">Mens-L </option>
        <option value="Mens-XL">Mens-XL </option>
        <option value="Womens-S">Womens-S </option>
        <option value="Womens-M">Womens-M </option>
        <option value="Womens-L">Womens-L </option>
        <option value="Womens-XL">Womens-XL </option>
    </select> </td></tr>
    </table>
    <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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 hzSw3oItgcbXf9EB/o/qXtb-----END PKCS7-----
    ">
    <input type="image" src="images/images/button-view-cart_19.png" width="197" height="44" />
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
       </div><!--end buy-->
    <div id="footer"> 
            <div class="container"> 
              <p>Copyright © 2010 Doozie Jank<br /> 
                All Rights Reserved</p> 
            </div><!--end footer container--> 
        </div><!--end footer-->
    </head>
    <body>
    </body>
    </html>

    Fix your validation errors first -
    http://validator.w3.org/unicorn/check?ucn_uri=dooziejank.com%2FDeer%2520in%2520The%2520Hea dlights.html&ucn_lang=en&ucn_task=conformance#
    For example, you have no </head> tag....
    And it's a very bad idea to use spaces in your filenames for the web
    Deer in The Headlights.html

  • Help Me! My webpage rollover images goes away

    Hi all. I'm realy stuck there with my rollover images. I got created my website using dreamweaver CS5 and when I opened it in firefox by myself all was ok, but when my friend opened page all rollover images jump to left side of webpage. So it mean that only i can see all normaly, but all other not.
    Please help me. I can't continue my work now.
    Note: My monitor wide resolution is 1440, My friend wide monitor resolution is 1920.

    Can someone help me to center one short text in my webpage?
    I tryed to do what i know but dhis doesnt help me.
    Here is my code:
    <!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>Home Page</title>
    <style type="text/css">
    body {
    width: 1100px; /**width in pixels**/
    margin:0 auto; /**centered**/
    /**your page background image goes here**/
    background: #000000 url(pictures/HomeBackground.jpg) no-repeat center top;
    #Nav {
        width: 665px;
        margin-top: 549px; /**adjust as needed**/
        margin-left: 165px; /**adjust as needed**/
    #Nav img {
    border:none;
    padding-left: 12px; /**space between images**/
    #Text {
        width: 320px;
        text-align: center;
        color: #FFF;
        margin-top: 350px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 98px;
    #Chat {
        width: 390px;
        margin-top: 21px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        padding-left: 726px;
        margin-bottom: 23px;
    #Nav #Text p {
        font-family: AvQest;
        font-style: normal;
        text-transform: none;
        color: #b6a890;
        font-weight: normal;
        font-size: 14px;
    #RelatedLinks {
        width: 100px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 100px;
        text-align: right;
    #Related_Links p #main #search strong {
        color: #b6a890;
        text-align: center;
    #Related_Links p strong {
        color: #b6a890;
    #apDiv1 {
        position:absolute;
        left:41px;
        top:1731px;
        width:88px;
        height:38px;
        z-index:1;
    </style>
    </head>
    <body>
    <div id="apDiv1"><tr>
          <td width="160" bgcolor="#996633"><iframe  src="http://www.freshfmonline.com/player.html" height="0" width="0" frameborder="0" id="page" scrolling="no" ></iframe></td>
        </tr></div>
    <h1></h1>
    <div id="Nav"> <img src="pictures/buttons/homeRed.PNG"  width="55" height="18" /> <img src="pictures/buttons/GuidesButton.PNG" width="70" height="18" /> <img  src="pictures/buttons/FilesRed.PNG" width="48" height="21" /> <img  src="pictures/buttons/RunewordsRed.PNG" width="115" height="18"  /> <img src="pictures/buttons/RecipesRed.PNG" width="70"  height="18" /> <img src="pictures/buttons/EventsRed.PNG"  width="70" height="18" /> <img src="pictures/buttons/ShopButton.PNG" width="55" height="18" />
      <!--end Nav -->
      <div id="Text">
        <p>Median XL is the most popular mod, or unofficial modification, for Diablo II Lord of Destruction.
          It modifies the game by replacing character skills, improving items and monsters, and adding new uberquests.</p>
        <p>Features</p>
        <p>o New skill trees with 30 brand new skills per class.<br />
          Bored with Blessed Hammer? Median XL offers brand new skill trees. Each class has 25 main skills, 3 uberskills and 2 challenge reward skills. If you ever wanted a crossbow necromancer or summoner amazon, here is your chance!</p>
        <p>o 30 new uberquests for high level characters.<br />
          Forget Battle.net and 'Uber Tristram', Median XL has 22 more uberbosses and 8 special uberlevels for high level characters. Defeating them on the highest difficulty yields powerful unique charms.</p>
        <p>o Special challenges for expert players.<br />
          Beating the game is only half the fun! Reach certain milestones in the game to obtain a special reward.</p>
      </div>
      <div id="Chat">
        <iframe title="bugis083" src="http://www1.shoutmix.com/?bugis083" width="234" height="382" frameborder="0" scrolling="auto"> <a href="http://www1.shoutmix.com/?bugis083">View shoutbox</a> </iframe>
      </div>
    </div>
    <div id="Related_Links">
      <p><span id="main"><span id="search"><strong> ©</strong></span></span><strong>2010 Diablo II MedianLT Serveris</strong></p>
    </div>
    </body>
    </html>
    I need that text in bold shrift will be centered in that position which is written in CSS.
    Thanks

  • Help me please, problem with image transition

    Hi everybody,
    For the past few months I have started teaching myself how to use dreamweaver. So far I have had a couple problems my limited knowledge just cant figure out and hoped somebody out there could shed a little light on it.
    I am currently making a small portfolio site for my girlfriend but am having a few problems with trying to get the gallery the way she wants it. She want a black and white image to transition into colour on mouse over with small textbox to appear on mouseover also. I could not create a simple rollover image as she wanted the fade in and fade out to be slightly slower.
    The rather simple idea I had for this was to create a div with a background image which would be the colour version. A black and white version imported over the top which transitions out to 0 opacity on mouseover.
    The problem I have is when the mouse is removed and the mouseout behavior begins to bring the black and white version back. If the mouse is moved over image too quickly there seems to be a conflict between the 2 transitions and it begins to jump a little. You can have a look for yourself:
    http://www.emmatait.com/gallery.html
    I thought maybe if there was some code I could write in that would only make the mouseout behavior begin after all other functions were complete it would solve this but unfortunately I have no idea how to even go about this.
    Any help would be appreciated.
    Thanks all
    Adam

    Hi Adam,
    In my opinion using image swap behaviors is counterproductive.  It makes for slower loading pages and consumes bandwidth.  This can be a problem for mobile device users who often pay for bandwidth usage.
    I'm going to show a neat CSS trick for de-saturating color images. When you hover over the images, they turn to color and their opacity increases to 100%.  Click on images to bring up the full size photos with captions.
    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
    Nancy O.

  • Copying a table with rollover images & links

    Need help...
    Using Dreamweaver CS4.
    I have a table with rollover images and links from those rollovers"
    I now want to copy and paste the table into other pages, but when I do, my links are broken and the rollovers don't work.
    I have my Site Def preferences set to "Links relative to: Document"
    Is there an easy way to copy & paste a table with rollover graphics and links?
    I've tried dragging the table from the page with the working links onto the different page.  The graphics show up, but the second state of the rollovers soesn't show up, and I get some weird link error:
    Can anyone help?

    <!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>Phyllis Bramson</title> 
    <style type="text/css"> 
    <!-- 
    body { 
        background-color: #CCC; 
    --> 
    </style> 
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    <!-- 
    function MM_preloadImages() { //v3.0 
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    function MM_swapImgRestore() { //v3.0 
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    function MM_findObj(n, d) { //v4.01 
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
      if(!x && d.getElementById) x=d.getElementById(n); return x; 
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <meta name="Keywords" content="Bramson, artist, Chicago, painter" />
    <meta name="Description" content="Phyllis Bramson is an established Chicago painter and educator." />
    </head> 
    <body onload="MM_preloadImages('common_graphics/menu_paintings1990_rollwhite.gif','common_graph ics/menu_paintings2000_rollwhite.gif','common_graphics/menu_paintings1980_rollwhite.gif',' common_graphics/menu_paintings1970_rollwhite.gif','common_graphics/menu_worksonpaper2000_r ollwhite.gif','common_graphics/menu_worksonpaper1990_rollwhite.gif','common_graphics/menu_ worksonpaper1980_rollwhite.gif','common_graphics/menu_worksonpaper1970_rollwhite.gif','com mon_graphics/menu_scrolldrawings_rollwhite.gif','common_graphics/menu_statement_rollwhite. gif','common_graphics/menu_resume_rollwhite.gif','common_graphics/menu_collections_rollwhi te.gif','common_graphics/menu_exhibitionsnews_rollwhite.gif','common_graphics/menu_links_r ollwhite.gif')">
    <table width="900" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#666699" scope="col"> </td>
        <td height="30" scope="col"><img src="common_graphics/mast_namebanner.gif" alt="" width="740" height="36" border="0" usemap="#Map2Map2" />
          <map name="Map2Map2" id="Map2Map2">
            <area shape="rect" coords="562,8,719,32" href="mailto:[email protected]" target="_blank" alt="email" />
        </map></td>
      </tr>
      <tr>
        <td width="160" valign="top" bgcolor="#666699" scope="col"><table width="190" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_paintingssculpture_rollnorm.gif" alt="" width="190" height="34" border="0" /></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_2000/paintings_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','common_graphics/menu_paintings2000_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings2000_rollnorm.gif" alt="" name="Image22" width="190" height="20" border="0" id="Image22" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1990/paintings_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','common_graphics/menu_paintings1990_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1990_rollnorm.gif" alt="" name="Image21" width="190" height="21" border="0" id="Image21" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1980/paintings_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','common_graphics/menu_paintings1980_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1980_rollnorm.gif" alt="" name="Image20" width="190" height="21" border="0" id="Image20" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="paintings_sculpture/paintings_1970/paintings_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','common_graphics/menu_paintings1970_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1970_rollnorm.gif" alt="" name="Image23" width="190" height="24" border="0" id="Image23" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_worksonpaper_rollnorm.gif" alt="" width="190" height="28" border="0" /></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_2000/works_on_paper_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','common_graphics/menu_worksonpaper2000_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper2000_rollnorm.gif" alt="" name="Image24" width="190" height="19" border="0" id="Image24" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1990/works_on_paper_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','common_graphics/menu_worksonpaper1990_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1990_rollnorm.gif" alt="" name="Image25" width="190" height="22" border="0" id="Image25" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1980/works_on_paper_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','common_graphics/menu_worksonpaper1980_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1980_rollnorm.gif" alt="" name="Image26" width="190" height="21" border="0" id="Image26" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1970/works_on_paper_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','common_graphics/menu_worksonpaper1970_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1970_rollnorm.gif" alt="" name="Image27" width="190" height="30" border="0" id="Image27" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="scroll_drawings/scroll_drawings.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','common_graphics/menu_scrolldrawings_rollwhite.gif ',1)"><img src="common_graphics/menu_scrolldrawings_rollnorm.gif" alt="" name="Image28" width="190" height="41" border="0" id="Image28" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="statement/statement.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','common_graphics/menu_statement_rollwhite.gif',1)" ><img src="common_graphics/menu_statement_rollnorm.gif" alt="" name="Image29" width="190" height="43" border="0" id="Image29" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="resume/resume1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','common_graphics/menu_resume_rollwhite.gif',1)"><i mg src="common_graphics/menu_resume_rollnorm.gif" alt="" name="Image30" width="190" height="41" border="0" id="Image30" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="collections/collections.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','common_graphics/menu_collections_rollwhite.gif',1 )"><img src="common_graphics/menu_collections_rollnorm.gif" alt="" name="Image31" width="190" height="42" border="0" id="Image31" /></a></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#666699" scope="col"><a href="exhibitions_news/exhibitions_news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','common_graphics/menu_exhibitionsnews_rollwhite.gi f',1)"><img src="common_graphics/menu_exhibitionsnews_rollnorm.gif" alt="" name="Image32" width="190" height="42" border="0" id="Image32" /></a></td>
          </tr>
          <tr>
            <td height="42" valign="top" bgcolor="#666699" scope="col"><a href="links/links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','common_graphics/menu_links_rollwhite.gif',1)"><im g src="common_graphics/menu_links_rollnorm.gif" alt="" name="Image33" width="190" height="42" border="0" id="Image33" /></a></td>
          </tr>
        </table>      <p> </p></td>
        <td align="left" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="30" height="97" scope="col"> </td>
            <td width="330" scope="col"> </td>
            <td width="20" scope="col"> </td>
            <td scope="col"> </td>
          </tr>
          <tr>
            <td scope="col"> </td>
            <td scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400" id="FlashID" title="slideshow">
              <param name="movie" value="home/homepage.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="8.0.35.0" />
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="home/homepage.swf" width="400" height="400">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="8.0.35.0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div>
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object></td>
            <td scope="col"> </td>
            <td valign="bottom" scope="col"><img src="home/homepage_quote.gif" alt="Quote" width="282" height="192" border="0" /></td>
          </tr>
        </table></td>
      </tr>
    </table>
    <map name="Map2Map" id="Map2Map">
      <area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
    </map> 
    <map name="Map2" id="Map2">
      <area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
    </map>
    <!-- Start of Google Analytics Code -->
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-12139148-3");
    pageTracker._trackPageview();
    } catch(err) {}
    swfobject.registerObject("FlashID");
    </script>
    <!-- End of Google Analytics Code --></body>
    </html>

  • Using fireworks rollover images in flash

    I'm trying to create the best way to use a series of fireworks rollover images in Flash and was hoping some flash gurus had ideas.  I'm creating a photo album of sorts in flash, except when you click to bring up a photo, you can mouse over certain parts and have the text labels on the images change.  I have a lot of images and therefore a lot of rollovers.  I have a central layer called 'content' where the images get displayed.  What is the best way to include these rollovers in my flash documnet?

    Well guess what, it doesn't:
    http://www.ctc-belgium.be/TEMP/test.cfm
    This is the code (images are in the same subfolder):
    <!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>Untitled Document</title>
    </head>
    <body>
    <cfform format="flash" action="../upload.cfm"
    style="background-image:ero1.jpg;
    background-repeat:no-repeat; background-position:top right;
    text-align:center; border:1 solid black;">
    <img src="ero2.jpg" />
    </cfform>
    </body>
    </html>

  • Help needed; underscore in rollover image name will not validate at WC3

    GoLive CS on an Intel PC
    UTF8 encoded, HTML 4.01 Transitional
    I have several rollovers in a page created by using the GoLive palletes, and because GoLive automatically adds an underscore to an image name in a nested folder the page cannot validate at the WC3 site. What do I need to do so that the underscore will not be added automatically? I've tried adding a name/ID to the image before creating the rollover, but it disregards the name and uses what it thinks is best, adding the underscore.
    The page is located here:
    http://www.redshift.com/~lorac/sdy-55.html
    I have attached three images that show the file names used and the results in the GoLive pallete. The first is a screenshot of the folder structure, the second is the placed image pallete and the third is the rollover pallete view.GoLive is set to strip all the GoLive code from the page before uploading, so the web version will not have any GL code.
    A sample WC3 comment is:
    Line 86, Column 226:         value of attribute "ID" invalid: "_" cannot start a name
    …pg');return true" href="#"><img id="_5502" class="img_border" src="images/jhj

    It is possible that you violated the naming convention for this attribute.       For example, id and name attributes must begin with       a letter, not a digit.
    Do I need to unnest any folders with potential rollover images? That would be a real pain... considering the amount sections and images used in the site.
    Thank you in advance for any help you can give.
    Carol

    I did as you suggested and added to the beginning of the default underscored name in the "name/ID" section and it was accepted. I changed all the rollover image names and uploaded the modified page, and was then able to validate at the WC3 validation site.
    Thank you so much! It was an easy fix... a solution I had overlooked. Oddly enough this never occurs with a remote rollover, but that is probably because GL lets you name the base image without suggesting a name first.
    Carol

  • How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database

    How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database table) using Dreamweaver’s Repeat Region. Example: I have different products each one associated (through their productID) with two images (one that’s showing in the page and one for the rollover effect) that are pulled from a database using Dreamweaver’s Recordset. So I want to end up with a page containing row after row of images(one for every product).When moused over each image will reveal the second (rollover) image for the same product which in turn can be a link(the image itself ) that when clicked leads to a detailed page with more information about the product the image is associated with. To show row after row with images for the different products in the database table I am using Dreamweaver’s Insert Rollover Image command and then the  Repeat Region – I have no problem to complete the steps, to insert the image and the rollover one at once and set the paths so they are pulled dynamically depending on the productID they are associated with .I have also no problem to apply the Repeat Region so not only the first image associated with the first product in the table is shown but all of them-a routine and standard procedure when using the Repeat Region to dynamically generate and display multiple rows of data. However, when I preview the page the rollover effect is lost –the images are shown but when moused over the second  image does not  show. The problem is caused when the Repeat Region is applied-once again I am allowed to apply it but the rollover stops working, a kind of interference. ANY SOLLUTION PLEASE, ANY WORK AROUND.

    I gotta tell you, using multiple images for rollover effects is going to be a big challenge in your dynamic scenario. 
    If this were my product page, I would use thumbnails with a bit of CSS opacity or filters to desaturate and make them full opacity/color on mouse over.  Nice effect with much less bandwidth. Easily done globally with CSS code.
    Two examples:
    http://alt-web.com/GALLERY/GalleryTest.php
    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
    Nancy O.

  • How do you add multiple links to a rollover image?

    Hi guys,
    I'm pretty much a novice when it come to DW, but i understand some things and can get by with a simple website(i only use design mode).
    Anyways, i understand how to use rollovers if its a basic image over image swap. My issue is, I have a link that says "T-shirts" and what i want is when you roll the mouse over that text, it swaps to another text -"1 or 2". Now on the "1 or 2" image, i want to have 2 seperate links on them.  I tried using hotspots but to no avail. Everytime, the "1 or2" text comes out as a single link. Is doing this possible? I'm using CS4 if that helps btw.
    Thanks!!

    I think you're trying to make something that is more complicated than it needs to be... First, as far as I know there is no easy way to accomplish what you're trying to do with a single image...
    The first option would be to split your initial image in half, and create a rollover effect on the left half on rollover with the specified link 1, and add a second rollover effect on the right side image so that it also changes. Do the same with the right half image - create the rollover effect along with the link for that image only, then add a rollover script that affects the left side image (I've attached a very basic sample to demonstrate in the zip folder - note that there are two rollover images - each with a separate web link, and each has a rollover effect that affects both buttons...)
    Second option is perhaps using a "Dropdown" menu that (on rollover) shows two more links... there are many ways this can be accomplished - the easiest (in my opinion) is by using the "spry menu bar". Once created, you can adjust the colors, fonts etc., and an image could be replaced on the initial link within the css... (my website is still under construction, but hopefully will show what I mean: http://www.jgigandet.com/) If you google "drop-down menu html, you'll find several other alternatives  to spry as well...
    Hope that helps...
    Jesse

  • Why are my rollover images not appearing correctly in my browser?

    I have created rollover images for some of my site navigation, and when I view it in my browser, they are not in the correct place on the page. When I click on each rollover, it eventually goes to the right place when I return to that page, but I must do this to all rollover navigation buttons in order for them to show up in the correct place. The links work fine. I am relatively new to this, so not sure if I am providing all the correct info here. My site is www.pfeiferdesign.com. I am using DW CS4. Would appreciate any suggestions!! Thanks

    Where is it you want the navigation to appear?
    Try this CSS -
    #mainnav {
    clear: both;
    display: block;
    float:right;
    margin-right:50px;
    margin-top:25px;
    overflow:hidden;
    padding:0;
    width:350px;
    Is that anywhere close?

  • CP7 Rollover images Show up every OTHER slide

    I am using CP7 and I have a number of graphics on slide 1 that I have defined to have a 'rest of project' timing. I have made multiple groups of graphics on slide 1 and I have made them to NOT be 'visible in output' this way, when I need them, I can use advanced actions to hide/show them (by group name) when I need them for subsequent slides. I am using slide 1 for this instead of the master slide because I need to define the stacking of graphics fairly specifically (slide 3 and further have some graphics that need to be in front of some things and behind some other things).
    The set up is that I have a smart shape with a graphic and I am using it as a button on slide 1 (NOT visible in output and lasts for rest of project). Overlayed over top of my smart shape/button is a rollover image. The two objects work just like a rollover button you would see on the web. There is an advanced action that opens the group that the button is a part of and a few other graphic groups that I need to make it look good. When you click the button, there is another advanced action that is supposed to hide the group that both of those graphics are in, plus the other graphics that make it look good, and then go to the next slide. There is an advanced action on the next slide OnEnter that shows the what is needed for the beginning of the next slide.
    So, here's the problem. When I click my button, everything disappears and goes to the next slide EXCEPT the rollover graphic, which stays on the screen and on top of all other graphics in slide 2. The SAME EXACT advanced action is used on slide 2 to go to slide 3 (with the same exact button because they are all really on slide 1 the whole time and just being made visible or invisible). When I click, I go to slide 3 and the rollover graphic is gone. I click the button again (to go to slide 4) and I go to slide 4 but the rollover graphic is BACK AGAIN!
    I know that this is a complicated write-up, and I am going to go start from scratch to see if I can replicate the problem with a stripped down version of the advanced actions in a new file, but I am hoping someone can point me in the right direction about what is going on. I have deleted and re-inserted the rollover image, but it still does the same thing. I have re-coded the advanced action and it still does it. I have copied rollover images that DONT have this weird glitch and it still does it.
    Anyone have any ideas?

    I found a 'workaround' to this problem, but I would still like to know what is going on underneath to make this happen. Since I have all the rollover graphics on the first slide with timing or 'rest of project' I just made an animated button in Flash and imported it as a .swf to replace the rollover image. I changed the smart shape underneath from having the image of the button to being transparent (still have it being used as a button with all the same advanced actions as before). Now the swf handles the rollover and the transparent smart button underneath handles the OnClick action and everything works great.
    Not sure what was going on with the rollover images, but at least I was able to get the result I needed.

  • Can't get rollover images to work as links [was: I have a question if someone could answer?]

    I have fixed my page so I can preview it and everything is working fine but now I cant get my rollover images to work as links.  When I go to put in the link like normal the rollover behavior stops working and it is just the original image.  Any way for me to turn it into a link but still keep the rollover image change?
    [Subject line edited by moderator. Please use more meaningful subject lines in future.]

    Can you provide a link to your website so we can see what you're seeing?
    Without one, you're asking for an answer based on guesswork.

  • Need help inserting 2 rollover images in a footer

    I used two separate rollover images to put in a footer of a
    page. When seeing in a browser I only see one rollover, the footer
    is big enough I don't understand. Yet if I delete the second
    rollover and copy the first underneath I see it in the browser but
    after giving the image another name and swapping for the correct
    images I disappears. I have no problem using the add hyperlink
    which works fine. but the client insists I use the rollover images.
    any help?

    To add to the advice from Ann, if you visit the Creative Cow website there are a mass of After Effects video tutorials where you will find one that is specifically for your task.

  • How to add a drop-down menu to a rollover image?

    Hi,
    I guess my title says it all... I was wondering how to add a drop-down menu to a rollover image? I know that there's the sprymenu, but I need to have my own rollover images.
    Thanks,
    Kazem

    Frankly, ANY link can offer a drop down.
    Take a look at this turorial.
    That will get you your dropdown menu. So you have that.
    Now, on your top menu (or any level where you want to have an image instead of text do this:
    (I am copying the HTML structure in the tutorial here):
    <nav>
              <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Tutorials</a>
                                  <ul>
                                            <li><a href="#">Photoshop</a></li>
                                            <li><a href="#">Illustrator</a></li>
                                            <li><a href="#">Web Design</a></li>
                                  </ul>
                        </li>
                        <li><a href="#">Articles</a>
                                  <ul>
                                            <li><a href="#">Web Design</a></li>
                                            <li><a href="#">User Experience</a></li>
                                  </ul>
                        </li>
                        <li><a href="#">Inspiration</a></li>
              </ul>
    </nav>
    Now, let's pretend you want an image instead of the word "Articles." You'll want the image to be sized appropriately, and if you look at the CSS, you'll see it's 112 pixels wide by 52 high. If your image is approximately those dimensions, you're all set.
    So instead of "articles" you insert your image.
    Done.

Maybe you are looking for