Multiple elements in a rollover image?

Hello,
I am creating a project and I am trying to determine whether or not it is possible to have two elements appear when using a rollover.
For example:
When you roll over the image of a coworker, it will display a second picture of the coworker where the original picture was, AND it will display a caption that explains that coworkers biography. The caption that explains the biography will be on a different area of the same slide.
Is this something that is possible in Adobe Captivate?
Thanks!

You can achieve this by bringing both the image and the biography within the Slidelet boundary. The objects between the image and the biography can remain as is even though it looks like it is a part of slidelet on the slide.
Sreekanth

Similar Messages

  • 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

  • Multiple "hot spots," one rollover image

    Im building an online artist's portfolio website and trying
    to lay out a dozen thumbnail images that when rolled over trigger a
    corresponding image to appear to the left of the thumbnails. All
    hot spots trigger the same image to change. Any advice on how to
    achieve this?

    I went through the steps KenRogers2 suggested, and when I
    first click on "+" under the behaviors tab I get error message #
    61878. After clicking ok the behaviors tab opens. After going
    through the steps and previewing in Safari (Im running OSX 10.4.8)
    all I get is the hot link hand over the thumbnail, but no rollover
    image replaces the default. Any ideas?
    I've also recently downloaded an update for dreamweaver and
    have been getting a jave error when I try to open any file, but
    everything seems normal after I hit ok. Not sure that has anything
    to do with the other error, just thought I'd throw it out
    there..

  • 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.

  • 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.

  • Hotspot on rollover image

    Hi there,
    I have an image rollover and I'd like to put a couple of hotspots linking to other pages on the rollover image. e.g. on this page http://pixeld.99k.org/comics.htm, I'd like to have hotspots over 'part 1' and 'part 2' on the rollover image for the first image on the page. I tried putting them on the original image but when you mouse over the hotspots it flips back to the original picture. D'oh!
    Thanks much!
    D

    but I've learnt a bit about absolute positioning and what it can be used for. Thanks!
    This is valuable.  Just don't extrapolate your use of absolutely positioned elements for this specialty application to a broader scope and think that you can build whole pages with it.  You can't.  Your pages will break unexpectedly.
    Good luck!

  • Bringing rollover images to the front

    Just wondering if it's possible to select the rollover image as 'bring to the front' on a question slide. At the moment the question and answer buttons show ontop of the rollover image preventing people from being able to see the image clearly. Any help would be much appreciated.Thanks!

    I'm afraid the buttons and other default elements of a question slide are always on top.  The best you can do is make them smaller or move them off to the side so that they are not ove the top of the image.

  • Place button rollover image on top of external swf

    I have a menu that when you click on a button, an external swf is  called up. However I would like for the buttons in the Over and Down  state to show an image on top of the external swf with a description of  what the video is about (Basically when they rollover the button).
    The problem is that the image shows behind the external swf. I  cannot get it to appear on top of the external swf. I have tried putting  the buttons layer on top of the actions layer but that doesn't work.
    I have not been using Flash for very long but I need to know if  there is ActionScipt that can solve my problem or any other way to solve  this issue. Please help. Thank you.

    This is what appeared now in my Output panel.
    Core_K12_Menu CS5.swf Movie Report
    Metadata
    Bytes         Value
           387    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional CS5</xmp:CreatorTool> <xmp:CreateDate>2010-07-25T19:31:59-07:00</xmp:CreateDate> <xmp:MetadataDate>2010-08-01T18:42:52-07:00</xmp:MetadataDate> <xmp:ModifyDate>2010-08-01T18:42:52-07:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"> <xmpMM:InstanceID>xmp.iid:2136C7DCCB9DDF11B1ACFFBB5C2D711F</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:2136C7DCCB9DDF11B1ACFFBB5C2D711F</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:423EF45B6198DF1180E5FB9309482BDA</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:992BC7CBB29DDF11B1ACFFBB5C2D711F</stRef:instanceID> <stRef:documentID>xmp.did:F34D8816A19DDF11ADEA81F4369F4B15</stRef:documentID> <stRef:originalDocumentID>xmp.did:423EF45B6198DF1180E5FB9309482BDA</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> </rdf:RDF>
    Frame #    Frame Bytes    Total Bytes    Scene
          1         295119         295119    Scene 1 (AS 3.0 Classes Export Frame)
    Scene      Shape Bytes    Text Bytes    ActionScript Bytes
    Scene 1              0             0                  1133
    Symbol                Shape Bytes    Text Bytes    ActionScript Bytes
    ActiveMC                       40             0                     0
    IntroModule                     0             0                     0
    Module 1 Rollover               0             0                     0
    Module1                         0             0                     0
    Module2                         0             0                     0
    Module3                         0             0                     0
    Module4                         0             0                     0
    Module5                         0             0                     0
    Module6                         0             0                     0
    Module7                         0             0                     0
    Module8                         0             0                     0
    Module9                         0             0                     0
    Module10                        0             0                     0
    Module11                        0             0                     0
    Module12                        0             0                     0
    Module13                        0             0                     0
    Module14                        0             0                     0
    Module15                        0             0                     0
    Module16                        0             0                     0
    Module17                        0             0                     0
    Module19                        0             0                     0
    Module20                        0             0                     0
    Module21                        0             0                     0
    next_btn                        0             0                     0
    replay_btn                      0             0                     0
    Rollover                        0             0                     0
    Rollover Image.psd              0             0                     0
    Symbol 18                       0             0                     0
    Title.psd                       0             0                     0
    ActionScript Bytes    Location
                  1133    Scene 1:Frame 1
    Bitmap                                                             Compressed    Original      Compression
    Layer 1                                                                  3675         88264    JPEG Quality=80
    Layer 1                                                                  3287         63936    JPEG Quality=80
    Layer 1                                                                  1205         19668    JPEG Quality=80
    Introduction-Up.jpg                                                      6357         23200    Imported JPEG=102
    Introduction-Down.jpg                                                    5862         23200    Imported JPEG=102
    Module 1-Up.jpg                                                          5957         23200    Imported JPEG=102
    Module 1-Down.jpg                                                        5548         23200    Imported JPEG=102
    Login Page and Tech Check  Topics Covered   - Introduction to A          4791        288576    JPEG Quality=80
    Module 2-Up.jpg                                                          6030         23200    Imported JPEG=102
    Module 2-Down.jpg                                                        5607         23200    Imported JPEG=102
    Module 3-Up.jpg                                                          6035         23200    Imported JPEG=102
    Module 3-Down.jpg                                                        5556         23200    Imported JPEG=102
    Module 4-Up.jpg                                                          5997         23200    Imported JPEG=102
    Module 4-Down.jpg                                                        5584         23200    Imported JPEG=102
    Module 5-Up.jpg                                                          6031         23200    Imported JPEG=102
    Module 5-Down.jpg                                                        5607         23200    Imported JPEG=102
    Module 6-Up.jpg                                                          6030         23200    Imported JPEG=102
    Module 6-Down.jpg                                                        5610         23200    Imported JPEG=102
    Module 7-Up.jpg                                                          5986         23200    Imported JPEG=102
    Module 7-Down.jpg                                                        5575         23200    Imported JPEG=102
    Module 8-Up.jpg                                                          6035         23200    Imported JPEG=102
    Module 8-Down.jpg                                                        5615         23200    Imported JPEG=102
    Module 9-Up.jpg                                                          6031         23200    Imported JPEG=102
    Module 9-Down.jpg                                                        5611         23200    Imported JPEG=102
    Module 10-Up.jpg                                                         6192         23200    Imported JPEG=102
    Module 10-Down.jpg                                                       5707         23200    Imported JPEG=102
    Module 11-Up.jpg                                                         6119         23200    Imported JPEG=102
    Module 11-Down.jpg                                                       5662         23200    Imported JPEG=102
    Module 12-Up.jpg                                                         6189         23200    Imported JPEG=102
    Module 12-Down.jpg                                                       5709         23200    Imported JPEG=102
    Module 13-Up.jpg                                                         6194         23200    Imported JPEG=102
    Module 13-Down.jpg                                                       5710         23200    Imported JPEG=102
    Module 14-Up.jpg                                                         6193         23200    Imported JPEG=102
    Module 14-Down.jpg                                                       5705         23200    Imported JPEG=102
    Module 15-Up.jpg                                                         6197         23200    Imported JPEG=102
    Module 15-Down.jpg                                                       5713         23200    Imported JPEG=102
    Module 16-Up.jpg                                                         6202         23200    Imported JPEG=102
    Module 16-Down.jpg                                                       5716         23200    Imported JPEG=102
    Module 17-Up.jpg                                                         6155         23200    Imported JPEG=102
    Module 17-Down.jpg                                                       5684         23200    Imported JPEG=102
    Module 18-Up.jpg                                                         6204         23200    Imported JPEG=102
    Module 18-Down.jpg                                                       5719         23200    Imported JPEG=102
    Module 19-Up.jpg                                                         6198         23200    Imported JPEG=102
    Module 19-Down.jpg                                                       5713         23200    Imported JPEG=102
    Module 20-Up.jpg                                                         6205         23200    Imported JPEG=102
    Module 20-Down.jpg                                                       5723         23200    Imported JPEG=102
    Module 21-Up.jpg                                                         6150         23200    Imported JPEG=102
    Module 21-Down.jpg                                                       5685         23200    Imported JPEG=102
    Replay Button.jpg                                                        5365         18240    Imported JPEG=102
    Replay Button Down.jpg                                                   4803         18240    Imported JPEG=102
    Next Button.jpg                                                          4965         18240    Imported JPEG=102
    Next Button Down.jpg                                                     4684         18240    Imported JPEG=102

  • Trouble with rollover image in div

    Hello there,
    I am having some trouble with the following.
    I want to create a rollover image 90 pxl x 90 pxl and put it inside a div 90 pxl x 90 pxl.
    The div is inside other divs and makes up a kind of a table. I checked that all the div and image sizes are the same but when I place the cursor inside the div and select 'insert rollover image', my images are all squashed up and don't appear normal size. Very odd.
    Here is some of my code:
    CSS of div (I want to put my image inside smallBox01a)
    #Header #rightColumn #smallBox01 {
        height: 90px;
        width: 270px;
    #Header #rightColumn #smallBox01 #smallBox01a {
        float: left;
        height: 90px;
        width: 90px;
    HTML
          <div id="smallBox01a"><a href="tobi.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tobi','','Images/TobiOver.jpg',1)"><img src="Images/TobiOff.jpg" alt="Tobi" name="tobi" width="90" height="90" border="0" id="tobi" /></a></div>
    Poor old Tobi cat's face is all squashed up. Any idea what is going wrong? I don't have any padding within the div either.
    Thanks!
    PS I also should add that when I tried to simply add in one of the Tobi images instead of the rollover image, it appeared perfectly fine within the div. It is only the rollover that is getting vertically squashed up.

    So, I've been playing around with your page in dreamweaver and I put a <div> container around your entire web page and then set the width to 1200px. That contained all the contents so that when you re-size the web page the contents don't colapse.
    Not sure if that's what Murray or Nancy mean and am curious if their is a better way.
    That would work although 1200px is too wide.  Something along the lines of 1000px would be better, since you want the page to display in a maximized browser viewport on a 1024 screen without dropping horizontal scrollbars.  I still use 960px as a maximum width....
    Re the centering of the page: Good question I would like to know how to do it "properly"
    In the CSS body rule I put:  margin-left: 20%;
                                                margin-right: 20%;
    Again, I'm not sure if that's the correct way to center the page, and would like to know a better way.
    It's not the best way to do this, which would be to use a fixed width container (as you have done) and just assign it left/right margin settings of 'auto', e.g.,
    #container { width:960px; margin:0 auto; }
    You can center *any* block element within its container with this method.

  • How to get multiple elements into one element as multiple occurences

    I can't figure out how to do this. I have an input message that has multiple elements and I need to take those elements and copy them into one element with each new element going in as a new occurence or instance. For example
    I have this input under one parent node.
    element1
    element2
    element3
    element4
    and this is the output I need
    Node
    Element1[0]
    Element2[1]
    Element3[2]
    Element4[3]
    The input XML looks like this
    Payload
    Element1
    Element2
    Element3
    and the output XML needs to look like this
    Payload
    Element.
    Thanks in advance

    How about this.
    Input XML:
    <Row>
              <Column1>TOTAL</Column1>
              <Column_9_2_2008>900</Column_9_2_2008>
              <Column_9_2_20082>890</Column_9_2_20082>
              <Column_9_3_2008>52</Column_9_3_2008>
              <Column_9_4_2008>0</Column_9_4_2008>
              <Column_9_4_20082>0</Column_9_4_20082>
              <Column_9_5_2008>0</Column_9_5_2008>
              <Column_9_5_20082>0</Column_9_5_20082>
              <Column_9_8_2008>0</Column_9_8_2008>
              <Column_9_8_20082>0</Column_9_8_20082>
              <Column_9_9_2008>0</Column_9_9_2008>
              <Column_9_9_20082>0</Column_9_9_20082>
              <Column_9_10_2008>0</Column_9_10_2008>
              <Column_9_10_20082>0</Column_9_10_20082>
              <Column_9_11_2008>0</Column_9_11_2008>
              <Column_9_11_20082>0</Column_9_11_20082>
              <Column_9_12_2008>0</Column_9_12_2008>
              <Column_9_12_20082>0</Column_9_12_20082>
              <Column_9_15_2008>0</Column_9_15_2008>
              <Column_9_15_20082>0</Column_9_15_20082>
              <Column_9_16_2008>0</Column_9_16_2008>
              <Column_9_16_20082>0</Column_9_16_20082>
              <Column_9_17_2008>0</Column_9_17_2008>
              <Column_9_17_20082>0</Column_9_17_20082>
              <Column_9_18_2008>0</Column_9_18_2008>
              <Column_9_18_20082>0</Column_9_18_20082>
              <Column_9_19_2008>0</Column_9_19_2008>
              <Column_9_19_20082>0</Column_9_19_20082>
              <Column_9_22_2008>0</Column_9_22_2008>
              <Column_9_22_20082>0</Column_9_22_20082>
              <Column_9_23_2008>0</Column_9_23_2008>
              <Column_9_23_20082>0</Column_9_23_20082>
              <Column_9_24_2008>0</Column_9_24_2008>
              <Column_9_24_20082>0</Column_9_24_20082>
              <Column_9_25_2008>0</Column_9_25_2008>
              <Column_9_25_20082>0</Column_9_25_20082>
              <Column_9_26_2008>0</Column_9_26_2008>
              <Column_9_26_20082>0</Column_9_26_20082>
              <Column_9_29_2008>0</Column_9_29_2008>
              <Column_9_29_20082>0</Column_9_29_20082>
              <Column_9_30_2008>0</Column_9_30_2008>
         </Row>
    Output XML:
    <Total>
              <Payload>900</Payload>
         </Total>
         <Total>
                   <Payload>890</Payload>
         </Total>
         <Total>
                   <Payload>52</Payload>
         </Total>

  • How to manage multiple sizes of the same image?

    I recently took up LightRoom for all the good things it does. One of the things I need to do, however, is to create and manage multiple sizes of the same image needed for different purposes. I always found this cumbersome. I totally expected that the LR library would offer a solution for this but I looked and I didn't see anything. Sure you can export and resize in the process but then you're on your own. Am I missing something? Isn't there a better way? What does Adobe have in mind for best practices and how do you handle this?

    I can't speak for 99jon, but when I need multiple sizes, I export at the desired sizes, and then make use of the exported photos (upload, e-mail, whatever) and then delete the exports. Thus, there's really no need for me to keep track of the photo at this specific size, knowing that if I ever need it again -- unlikely -- I can regenerate it with the export pre-set, so I put no effort (zero!) into keeping track of photos at different sizes.
    The idea of adding it back into the catalog doesn't get me excited, and I would advise against it. I don't need this, and I don't see the benefit of keeping this particular size export for the long-term. As I said, I can always recreate it — but maybe you have such a need to keep these exports long-term and recreating it at a later point in time doesn't meet your needs? Can you explain?
    By the way, you can't resize a virtual copy, so that won't work here. The only time you can resize is on export.

  • Can I add multiple elements on a single line?

    Can I add multiple elements on a single line?

    Not yet. But this is something we plan to support. You can vote on this idea here: http://forums.adobe.com/ideas/1046
    We use this to help prioritize our work.
    Randy

  • How to link a specific panel with spry multiple element sliding

    How to everybody to the forum, I've searched into this forum but maybe this mine is a particular case...
    I've a html page with 4 different spry multiple sliding panels, named "primo" "secondo" terzo" "quarto", and all worked fine :-)
    When you go to this page the first you can see is "primo" (default).
    But the problem/question is this: If i want to send an email link to my page and want to see the "terzo" panel. how???
    I've try to search many examples but none one of them meet me.
    This is an example of this page called test.html
    Many thanks to all wants help me
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- Copyright (c) 2006-2007. Adobe Systems Incorporated. All rights reserved. -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Spry Multiple Elements Sliding Sample</title>
    <link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
    <script  src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript" ></script>
    <script  src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js" type="text/javascript" ></script>
    <style type="text/css">
    .demoDiv{
    height: 150px;
    overflow: hidden;
    .hiddenElement{
    display:none;
    /* Fix IE floating bug */
    position: absolute;
    top: 180px;
    </style>
    <script type="text/javascript">
    var observer = {};
    observer.nextEffect = false;
    observer.onPostEffect = function(e){
    if (this.nextEffect)
    var eff = this.nextEffect;
    setTimeout(function(){eff.start();}, 10);
    this.nextEffect = false;
    function pannelli(currentPanel)
        // The list of all the panels that need sliding
    var panels = ['slide1', 'slide2', 'slide3', 'slide4'];
    var opened = -1;
    // Let's check if we have an effect for each of these sliding panels
    if (typeof effects == 'undefined')
    effects = {};
    for (var i=0; i < panels.length; i++)
    if (typeof effects[panels[i]] == 'undefined'){
    effects[panels[i]] = new Spry.Effect.Blind(panels[i], {from: '0%', to: '100%', toggle: true});
    effects[panels[i]].addObserver(observer);
    if (effects[panels[i]].direction == Spry.forwards && currentPanel != panels[i])
    opened = i;
    //prevent too fast clicks on the buttons
    if (effects[panels[i]].direction == Spry.backwards && effects[panels[i]].isRunning)
    observer.nextEffect = effects[currentPanel];
    return;
    if (opened != -1)
    observer.nextEffect = effects[currentPanel];
    effects[panels[opened]].start();
    else if (effects[currentPanel].direction != Spry.forwards)
    effects[currentPanel].start();
    </script>
    </head>
    <body onload="pannelli('slide1');">
    <h3>Spry Multiple elements sliding</h3>
    <a href="#" onclick="pannelli('slide1');" value="Slide 1">SLIDE 1</a>
    <a href="#" onclick="pannelli('slide2');" value="Slide 2">SLIDE 2</a>
    <a href="#" onclick="pannelli('slide3');" value="Slide 3">SLIDE 3</a>
    <a href="#" onclick="pannelli('slide4');" value="Slide 4">SLIDE 4</a>
    <br />
    <div id="slide1" class="hiddenElement">
    <div class="demoDiv" style="background-color: yellow;">
    <h4>Primo</h4>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    </div>
    <div id="slide2" class="hiddenElement">
    <div class="demoDiv" style="background-color: pink;">
    <h4>Secondo</h4>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    </div>
    <div id="slide3" class="hiddenElement">
    <div class="demoDiv" style="background-color: magenta;">
    <h4>Terzo</h4>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    </div>
    <div id="slide4" class="hiddenElement">
    <div class="demoDiv" style="background-color: green;">
    <h4>Quarto</h4>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    </div>
    <br />
    Test per collegamenti esterni<br /><br />
    <a href="test.html?">vai al pannello I&deg;</a> |
    <a href="#">vai al pannello II&deg;</a> |
    <a href="#">vai al pannello III&deg;</a> |
    <a href="#">vai al pannello IV&deg;</a>
    </body>
    </html>

    silemma wrote:
    else if (effects[currentPanel].direction != Spry.forwards)
    effects[currentPanel].start();
    </script>
    </head>
    <body onload="pannelli('slide1');">
    Change the above to
    else if (effects[currentPanel].direction != Spry.forwards)
    effects[currentPanel].start();
    var params = Spry.Utils.getLocationParamsAsObject(); //get the URL parameter
    if (params.slide) {  // if the slide parameter exists
        var slide = 'slide'+params.slide; // slide = slide+slide parameter
    } else { // otherwise
        slide = 'slide1'
    </script>
    </head>
    <body onload="pannelli(slide);"> <!-- open the nominated slide -->
    Then when calling the page use the following notation: http://localhost/test/test.html?slide=3 where ?slide=3 is the third slide
    I hope this helps.
    Ben

  • 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?

  • 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.

Maybe you are looking for