Disjointed rollover...or something similar....

Can someone tell me the best way to produce a flowchart of
staff members so that when you move the mouse over the staff
member's name, their photo appears. Ideally, I'd like the photo to
appear in the same place on the page each time.
The flowchart I've got is a screendumped image but I can
reproduce it in a table/layers if needs be.
Hope this makes sense.

Check this method -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"sazaroo" <[email protected]> wrote in
message
news:e2qg7q$sgg$[email protected]..
> Can someone tell me the best way to produce a flowchart
of staff members
> so
> that when you move the mouse over the staff member's
name, their photo
> appears.
> Ideally, I'd like the photo to appear in the same place
on the page each
> time.
>
> The flowchart I've got is a screendumped image but I can
reproduce it in a
> table/layers if needs be.
>
> Hope this makes sense.
>

Similar Messages

  • Disjointed rollover problem

    Hi everyone.. I am trying to create a slideshow using
    disjointed rollovers. I have several (16 so far) thumbnail images
    and want to display fullsize images in one common area. The
    problem: as I add more images, the earlier ones become blocked from
    view. It appears to have something in front of it of the same size
    and shape as the images I'm using, and the same color as the
    background. The use of layers doesn't seem to make a difference.
    The more images I add, the more (earlier ones) become blocked.
    Anyone? Thanks in advance.

    Here is the URL: It's not ready to be live, so may be slow.
    Thanks for looking.
    http://www.so-fsbo.com/ss2.htm
    As for my method: I am open to suggestions for a better way
    to accomplish what is seen at link, above.
    But here is what I did. The exact method is (copied from
    Fireworks F1):
    To attach a disjoint rollover to a selected image:
    Choose Edit > Insert > Slice to attach a slice to the
    trigger image.
    Create a new frame by clicking the New/Duplicate Frame button
    in the Frames panel.
    Place a second image, to be used as the target, in the new
    frame in the desired location on the canvas. You can place the
    image anywhere other than beneath the slice you created in step 1.
    Select the image, and then choose Edit > Insert > Slice
    to attach a slice to the image.
    Select Frame 1 in the Frames panel to return to the frame
    that has the original image.
    Select the slice, hotspot, or button that covers the trigger
    area (the original image) and place the pointer over the behavior
    handle. The pointer changes into a hand.
    Drag the behavior handle for the trigger slice to the target
    slice you created in step 4.
    The behavior line extends from the center of the trigger to
    the upper left corner of the target slice, and the Swap Image
    dialog box opens.
    From the Swap Image From pop-up menu, select the frame you
    created in step 2, and click OK.
    Click the Preview tab to view and test the disjoint rollover.

  • Using text to swap an image (disjointed rollover)

    Hi,
    I have some text on my page which is also a link.
    It has a background colour, which changes when my mouse hovers over it.
    I also want one image on the page to swap with another image when my mouse hovers over the text.
    Please can someone direct me to a website which discusses how to create a disjointed rollover using TEXT rather than an image.
    Thank you in advance

    Stuart Smitheringale wrote: You can see the effect that I have created at this site http://www.drivertrainingcompany.com
    Ideally, I would like to use CSS to create the same effect, without relying on swapping images.
    As there are often many ways to produce the same effect or behavior, each with its own advantages and disadvantages, having been able to produce the effect or behavior is often more important.
    Except for one matter in your page's behavior that you will probably want to change your page appears fine in the most recent versions of Safari, Firefox, and Opera.  The bigger problem at this point is that you need to clean up your HTML -- something to which Murray has already alluded.
    LESS THAN PERFECT BEHAVIOR
    When your mouse leaves one menu item to enter into the next, the words below your menu item change as you would probably like, but the previously highlighted menu item remains highlighted.  There is not a clean transition between menu items.  This problem can probably be fixed with an onmouseout event.
    CLEAN UP TIME
    Please refer to the validation link that I have provided below.  It will show you that there are structural problems in your page that can affect both the operation and appearance of your page as it is viewed in different browsers and in different versions of the same browser over time.  I have only checked three of the more popular browsers for you.
    SUGGESTION
    Clean up your structural problems first and see if the imperfect behavior described above does not disappear.  If it does not, then return with a new question, and someone will provide a fix, if you are yourself unable.
    VALIDATION LINK:  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.drivertrainingcompany.com%2F
    Roddy

  • I have a question that I think I know the answer to, but am looking for confirmation.  I have a dell computer at home that has clip art available on it for putting pictures into documents.  Do I need to install an APP to get something similar to clip art?

    I have a question that I think I know the answer to, but am looking for confirmation.  I have a desktop computer at home that has clip art loaded onto it.  I recently got an iPad and am looking for something similar.  I assume I need to get an APP for it, and if that is correct, does anyone have one that they like?

    Sort of.  There is an app called art shop that gives you a place to park clip art.   But I don't think you really need it. 
    If you have a collection of clip art you want available, move it to the camera roll on your pad/ phone, then copy paste into your document the clip you want.
    You can get them into the camaera roll by putting them in a single event in your picture library and syncing them over,  or e mail them to your self, and save to the camera roll, or send them to drop box, and bring them down that way.
    The challenge is getting them all in one place to make it easy for you to find, which is why syncing might be the best approach in the long run.
    As near as I can tell there is not a ready made clip art collection in app format laying around.

  • Disjointed rollover on a apDiv (CS5.5)

    Hi There, I'm working on a disjointed rollover using css. I want to apply this on an apDiv but somehow it's not working.
    Here's what I try to do:
    I have a div with a big animated gif that auto starts.
    On top of that I have an apDiv with a small logo (animated gif) that fades in with jQuery after the big animated gif is done.
    This is all working fine.
    Now I want to make the small logo to act as a rollover, revealing an image somewhere on top of the main div.
    With the present css the small image that suppose to become visible when you hover over the logo doesn't show. Here's my code:
    body {
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              background-color: #ECF1F5;
              text-align: center;
    #main {
              height: 540px;
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              background-color: #FFF;
              z-index: 0;
    .main_img  {
              margin-top: 0px;
              margin-right: 60px;
              margin-left: 60px;
              background-color: #FFF;
    #h2 {
              background-color: #FFF;
              height: 80px;
              width: 960px;
              margin-right: auto;
              margin-left: auto;
    .adres {
              margin-top: 10px;
              margin-left: 116px;
              display: none;
    #wrapper {
              height: 620px;
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              top: 0px;
    #apDiv1 {
              position:absolute;
              width:900px;
              height:424px;
              z-index:1;
    #pen {
              margin-top: 200px;
              margin-left: -100px;
    #rollover {
              margin-left: 702px;
              margin-top: 60px;
              height: 92px;
              width: 194px;
              z-index: 2;
              display: none;
    #rollover a {
              border:none;
              text-decoration:none;
              position: relative;
              margin-bottom: 100px;
    #rollover a span {
              display:none;
              position: absolute;
              /**adjust positioning of full size images in px or %**/
    left: -300px;
              top: 300px;
              z-index: 3;
    #rollover a:hover span, #rollover a:active span, #rollover a:focus span {
              display:block;
    What have I done wrong here? I am by no means a code junkie so I can use all the help I can get.
    Thanks in advance!

    <!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" />
    <meta name="description" content="info" />
    <meta name="robots" content="index,follow,noarchive" />
    <meta name="keywords" content="info" />
    <title>name website</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
         $('#rollover').delay(6500).fadeIn(1500);
         $('.adres').delay(7500).fadeIn(1000);
        /* $('#panel').delay(11000).fadeIn(1000);*/
    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_showHideLayers() { //v9.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3)
      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    </script>
    <style type="text/css">
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        background-color: #ECF1F5;
        text-align: center;
    #main {
        height: 540px;
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        background-color: #FFF;
        z-index: 0;
    .main_img {
        margin-top: 0px;
        margin-right: 60px;
        margin-left: 60px;
        background-color: #FFF;
    #h2 {
        background-color: #FFF;
        height: 80px;
        width: 960px;
        margin-right: auto;
        margin-left: auto;
    .adres {
        margin-top: 10px;
        margin-left: 116px;
        display: none;
    #wrapper {
        height: 620px;
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        top: 0px;
    #apDiv1 {
        position: absolute;
        width: 900px;
        height: 424px;
        z-index: 1;
    #pen {
        margin-top: 200px;
        margin-left: -100px;
    #rollover {
        margin-left: 702px;
        margin-top: 60px;
        height: 92px;
        width: 194px;
        z-index: 2;
        display: none;
    span#info {
        display: none;
    a#infotrigger:hover span#info {
        position: absolute;
        left: 160px;
        top: 240px;
        width: 349px;
        height: 89px;
        position: absolute;
        display: block;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="apDiv1"> <a href="#" id="infotrigger"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /> <span id="info"> <img src="images/26letters.png" alt=" headline" name="panel" border="0" usemap="#panelMap" id="panel" />
        <map name="panelMap" id="panelMap">
          <area shape="poly" coords="14,19" href="#" />
          <area shape="poly" coords="12,21,31,70,324,80,338,8" href="mailto:[email protected]" alt="email" />
        </map>
        </span></a></div>
      <div class="main" id="main"> <img src="images/h1.gif" alt="headlines" name="main_img" width="840" height="540" class="main_img" id="main_img" />
        <div class="h2" id="h2"><img src="images/h2.png" alt="adress details" name="adres" width="718" height="26" border="0" usemap="#adresMap" class="adres" id="adres" />
          <map name="adresMap" id="adresMap">
            <area shape="rect" coords="0,2,163,34" href="mailto:[email protected]" alt="email" />
          </map>
        </div>
      </div>
    </div>
    </div>
    </body>
    </html>
    In bold is what I've added. Some lines from your old code have been removed.
    What I've done here is used pure CSS (no jQuery) to trigger a display of an element on hover. But, do note that image maps here are pointless as the 'info' image will be shown only when you hover on logo - will disappear again when you mouseout from logo. So, an image map will make no sense.
    -ST

  • When I open "Pages" all the forms are in spanish. ( I am english speaking) I travel a lot and wonder if the program picked up on me being in Spain or something similar. How do I change it to english?

    When I open "Pages" all the forms are in spanish. ( I am english speaking) I travel a lot and wonder if the program picked up on me being in Spain or something similar. How do I change it to english?

    See
    http://en.wikipedia.org/wiki/Lorem_ipsum
    If that is what you are seeing, you just select it and type in your own text.

  • Ntrights.exe Windows 2008 R2 Resource Kit Tool? Does it exist or is there something similar I can use?

    I am running Windows Server 2008 R2 Standard as a DC
    I am trying to add users/groups to the following local policies through a GPO, however I need to script it out using something similar to ntrights.exe. I do not want to do it through the GUI because this is going to be a re-occurring process.
    Below are the policies I am trying to configure via some kind of command prompt. I do not think I can do this with PowerShell 2.0 even with the import-module grouppolicy cmdlets.
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Allow log on locally
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Debug programs
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Force shutdown from a remote system
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Shut down the system
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Change the system time
    Computer Configuration\Policies\Windows Settings\Security Settings\Local Policies\User Rights Assignment\Allow logon through Remote Desktop Services
    Would it be safe to copy the Windows Server 2003 ntrights.exe resource kit tool and try it on Windows Server 2008 R2? I am working on a virtual test lab environment so I can actually take a snapshot before hand but wanted your expert thoughts on it first.
    Thank you in advance.

    I found the solution.....You can actually use "quoted" host names in the templates instead of the SIDs. Make sure that for Domain User Accounts you specify the Domain prefix. For Local User accounts you can just specify the local user name.
    The filename of the template that I made is LOCAL_SEC_TEMPLATE.inf
    Here's what's inside that LOCAL_SEC_TEMPLATE.inf template:
    [Unicode]
    Unicode=yes
    [Registry Values]
    [Privilege Rights]
    SeInteractiveLogonRight = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins"
    SeDebugPrivilege = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins"
    SeRemoteShutdownPrivilege = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins"
    SeSystemtimePrivilege = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins","LOCAL SERVICE"
    SeShutdownPrivilege = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins"
    SeRemoteInteractiveLogonRight = "Administrators","XXDIGIHD\DigiOps","XXDIGIHD\Domain Admins","Remote Desktop Users"
    [Version]
    signature="$CHICAGO$"
    Revision=1
    [Profile Description]
    Description=Local Security Template
    Here's how I applied the template to the Local Security Policy: (You can use PowerShell or the regular command prompt)
    SECEDIT /configure /db secedit.sdb /cfg "c:\LOCAL_SEC_TEMPLATE.inf"
    Here's the link on using SECEDIT >> http://www.appdeploy.com/tips/detail.asp?id=23
    Thanks for your help Gunter, this issue is solved.

  • 2011 MacBook Pro, 64 bit i7 quad core, upgraded to Lion OSx, Bootcamp installed with Windows 7, wanting to install Windows 8 (don't ask), tried downloading/installing bootcamp 5.0.5033, error message something similar to bootcamp doesn't support this Win

    2011 MacBook Pro, 64 bit i7 quad core, upgraded to Lion OSx, Bootcamp installed with Windows 7, wanting to install Windows 8 (don't ask), tried downloading/installing bootcamp 5.0.5033 (both on the mac/windows partitions (actually using a parallel to run Windows)), error message something similar to bootcamp doesn't support this Windows
    So the question is am I doing something wrong? Should I just try and install windows 8 through my windows 7 partition and see if I can use the bootcamp 5.05033. Or do I solely have to use the bootcamp to install Windows 8? I'm not too familiar with bootcamp and how it runs.

    if you're using parallels and full bootcamp then you're making it 100% more troublesome for youself then it needs to be
    bootcamp is running windows directly on the hardware this give full memory and cpu and 3d video game power
    running windows in parallels is running a virtual machine where one can't run powerful games and the like but one can have it in a window and change fast between osx and windows
    parallels as the only virutal machine (as far as I know) support not have the operating system as a file on the osx harddisk but can access a bootcamp parition as virtual machine but without the benefits bootcamps provides
    it's a service parallels provide for those who want both to play games in normal bootcamp and sometimes use windows in a virutal machine
    just install it like a normal virtual machine and you need not worry about bootcamp drivers and the likes
    plus it would mean that the windows part would be a part of the timemachine bacup of osx
    which it is not when it's in bootcamp

  • Disjointed rollover contained to fixed spot

    I'm trying to do a disjointed rollover, however after I have a grid of thumbnails I want my enlargemnt to be contained to a specific area. I this case it's the right saide bar. I found a good tutorial that got me this far, but can't seem to find out how to do the next step. I don't want the enlargemnt relative to thumbnai. I want it in fixed position.
    Here is my code so far:
    <!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>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background-color: #4E5869;
        margin: 0;
        padding: 0;
        color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color:#414958;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #4E5869;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
        width: 80%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background-color: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #6F7D94;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 20%;
        background-color: #93A5C4;
        padding-bottom: 10px;
    .content {
        padding: 10px 0;
        width: 60%;
        float: left;
    .sidebar2 {
        float: left;
        width: 20%;
        background-color: #93A5C4;
        padding: 10px 0;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        padding: 5px 5px 5px 15px;
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        text-decoration: none;
        background-color: #8090AB;
        color: #000;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background-color: #6F7D94;
        color: #FFF;
    /* ~~The footer ~~ */
    .footer {
        padding: 10px 0;
        background-color: #6F7D94;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~miscellaneous float/clear classes~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .content h1 img {
        height: 100%;
        width: 100%;
    #rollover a {
    border:none;
    text-decoration:none;
    padding: 0 0.5em 0 0.5em; /**space between icons**/
    position: relative; /**remove position rule if full size images will share the same display area. **/
    #rollover a span {
        visibility: hidden;
        background-color: #FFF;
        display: block;
        position: absolute;
        /**adjust positioning of full size images in px or %**/
        left: 250px;
        top: -140px;
        /**optional image captions**/
        font-size: 12px;
        line-height: 1.2;
        color: #666;
        text-align: right;
        position: absolute;
        top: 0 px;
        right: 20px;/**optional image borders & padding**/
    #rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}
    #rollover a:hover, #rollover a:focus
    {visibility:visible;}
    -->
    </style>
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script type="text/javascript" src="includes/jQueryGallery/gallery.extend.js"></script>
    <script type="text/javascript" src="includes/jQueryGallery/jQueryGallery.js"></script>
    <script type="text/javascript" src="includes/jQueryGallery/jQueryGallery21.js"></script>
    <link href="includes/jQueryGallery/jQueryGallery21.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
        <!-- end .header --></div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="#">Link one</a></li>
          <li><a href="#">Link two</a></li>
          <li><a href="#">Link three</a></li>
          <li><a href="#">Link four</a></li>
        </ul>
        <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
        <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <h1> </h1><div id="rollover">
    <p>
    <a href="#"><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/a2mclobb_thumb.jpg" width="81" height="78" /> /><span><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/bloomfieldexterior.jpg" width="768" height="532" /><br />
    optional caption #1</span></a>
    <a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
    <a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
    </p>
    </div> </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
        <h4>Internet Explorer Conditional Comments</h4>
        <p>These liquid layouts contain an Internet Explorer Conditional Comment (IECC) to correct two issues. </p>
        <ol>
          <li>Browsers are inconsistent in the way they round div sizes in percent-based layouts. If the browser must render a number like 144.5px or 564.5px, they have to round it to the nearest whole number. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. In this IECC there is a 1px negative margin to fix IE. You may move it to any of the columns (and on either the left or right) to suit your layout needs.</li>
          <li>The zoom property was added to the anchor within the navigation list since, in some cases, extra white space will be rendered in IE6 and IE7. Zoom gives IE its proprietary hasLayout property to fix this issue.</li>
        </ol>
        <!-- end .content -->
      </div>
      <div class="sidebar2">
        <h4>Backgrounds</h4>
        <p>By nature, the background color on any div will only show for the length of the content. If you'd like a dividing line instead of a color, place a border on the side of the .content div (but only if it will always contain more content).</p>
        <!-- end .sidebar2 --></div>
      <div class="footer">
        <p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
        <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>

    #rollover a {
    border:none;
    text-decoration:none;
    padding: 0 0.5em 0 0.5em; /**space between icons**/
    position: relative; /**remove position rule if full size images will share the same display area. **/
    Your CSS below expresses where on the page to display the disjointed image.  You'll need to tweak left and top values to get it exactly where you want it.
    #rollover a span {
        visibility: hidden;
        background-color: #FFF;
        display: block;
       position: absolute;
        /**adjust positioning of full size images in px or %**/
        left: 250px;
        top: -140px;
    For better answers, give us a link to your test page.
    Nancy O.

  • How to make something similar in 3d? (tv graphics, no only compositing topic!))

    Hi, I am aware that this is community for After Effects, and also this example contains some objects probably maded in some 3D programs, but I want to hear opinion form an expert how exampes below are did:
    These are examples from one tv station i Europe:
    I am curious how it is made:
    http://www.youtube.com/watch?v=QBrQ7krzrVw (please watch only begin and the end of this video)
    http://www.youtube.com/watch?v=j9pU_XIJQqA (especially from very end of video clip-cubes)
    I want to know way how to make something similar and how to composite them like this way?
    Any links related to tutorials, links for similar techniques (c4d, max...?)
    What is your opinion about modeling this scene?
    Thank you!

    It will probably take some 3-D modeling.  Bringing it into AE, I will point you to Andrew Kramer's Element 3D plugin - http://www.videocopilot.net/ 
    He has one demo that is doing a very similar effect -- http://www.videocopilot.net/tutorials/element_animation_engine/

  • Button and 'disjointed' rollover

    I have put a button in the first frame of a movie clip and a
    graphic and the second and third frames. The graphics give the
    appearance that the button is being highlighted in a way different
    than when you actually roll over the button itself. I am doing this
    so that when you rollover a button you can show other buttons with
    the secondary highlights.
    My questiona are, why does my button loose its own behavior
    when I attach a behavior to the movie clip it is contained in?
    How can I get both the 'disjointed' rollover and the buttons
    own rollover to work at the same time?
    my test files
    swf -
    btnTest2.swf
    fla -
    btnTest2.fla

    Thank you for your reply, I think I understand the 'why' now.
    What I mean by the secondary highlights is what I show on the
    right-side of my example. I want to mouse over a button and have
    another button become 'highlighted' in a way that is different than
    the normal button over or down state.
    I'm really trying to solve this. I can make it work if I use
    a movieclip for all of the button 'states' of up, over, down,
    highlight 1, highlight 2 (each in their own frame). I then just add
    all of the 'go to frame 2' kind of code and the 'go to frame 4 in
    this other button' kind of code to the movieclip. The problem is
    that I have 77 of the same 'button' symbol on one page, thats alot
    of code to make mistakes with. And I can't make a symbol with all
    of the code for 'go to frame 2 on mouseover' already in the
    movieclip symbol or I run into the same problem i already have.
    Please help me understand this, it seems like it should be
    simple.

  • Disjointed rollover with different size images?

    Every tutorial says the disjointed rollover images MUST be the same size, etc.  But for the type of photos I'm working with, it's impossible to make them the same height.  This site is exactly what I'm going for with the different sized images being used:  http://www.warmbloods-for-sale.com/HorseDetail.asp?HorseID=21333&UserID=1775.  Any idea how they accomplish this?  Or any ideas on how I can manage the same effect with different sizes in Dreamweaver CS4?

    Do a Google search for Lightbox, litebox, floatbox or look at Project Seven's Image Gallery Magic.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.com/blogspot.com

  • I am trying to manage my "Location Services" on my iTouch but the device does not allow me to make changes. The screen is muted indicating that changes cannot be made. Anyone experience something similar?

    I am trying to manage my "Location Services" on my iTouch but the device does not allow me to make changes. The screen is grayed-out indicating that changes cannot be made. Anyone experience something similar?

    Do you have any Restictions set? (Settings>General>Restrictions)

  • FW8 Can't Seem To Create Disjoint Rollover Effect

    Hello,
    I used previous versions of FW to create "disjoint rollover"
    effects without any problem. This time I'm using FW8 to create the
    same effect but so far it has proved unsuccessful, I have even
    tried the step by step instruction of "help" menu with no success.
    Can somebody pease help me with how to achieve this effect
    with FW8 if it is possible.
    Many thanks in advance!

    More than half of the trouble posts on the DW forum are the
    result of using
    a graphics editor to write HTML. It's a grand idea that
    utterly fails.
    Such HTML is rigid, and fragile. You cannot avoid HTML if you
    are going to
    be working on the web, no matter what the marketing hype
    says.
    Harsh? Perhaps. True and well intentioned? Yes.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "WollombiWombat" <[email protected]> wrote
    in message
    news:eo4c1j$kmn$[email protected]..
    > Murray: I think you are being a little harsh here for a
    newbie. If the
    > doco
    > says it works then it bloody well should!
    >
    > Linda: A voice of moderation and consideration as
    always. No wonder I like
    > your books and contributions at places like PVII and did
    I see you at
    > Community
    > MX ?
    >
    > Cobbyfred: Can I suggest that you take up Murray's
    veiled suggestion and
    > attempt to build the disjointed rollover using DW8 ?
    >
    > Cheers all.
    >

  • Can I create a disjointed rollover for videos?

    I am working on a webpage that I created a disjointed rollover for thumbnails that I want individuals to see a larger image of.
    While I was working, I wondered if I could create a disjointed rollover for a video? I would use thumbnails for the viewer to rollover and when they do rollover I would want a swf video to play. Is this possible? Any suggestions on how to go about it?
    Thank You.

    I would not let anyone else determine whether your choice is wrong or right without knowing all of the details. Let's consider that you've made the considerations already and for anything else you're simply asking to see if it's possible or not and you're looking for suggestions on how to go about it. I mean, that is what you asked in your original post isn't it? I re-read your original post and I didn't see anywhere in there where you were asking others whether they thought this was the right choice or not...
    Perhaps you want to save the mouseclick so the user can click the thumbnail and view the entire video while mouseover plays a small preview in disjointed? The other poster probably didn't think too much about it though.
    To directly answer your question: yes, it's possible to mouseover a thumbnail to play a video. Depending on the intended use a method like this is not only acceptable, it's expected. Many highly-regarded websites use this technique including http://videocopilot.net and http://istockphoto.com to name a few. A method like this allows for faster browsing and preview of videos instead of requiring a user to not only mouseover the thumbnail, but then continue to click once to display preview and then click once again to close the lightbox. That's a cumbersome method for the user if they want to preview many videos.
    View source on the websites mentioned in this post to see how it's accomplished.

  • How do I use 'Terminal' or something similar to Tether my Galaxy Phone

    How do I use 'Terminal' or something similar to Tether my Galaxy [Note 1] Phone to my Macbook Pro in such a way that the Android phone gets my mac on the internet.
    If it's possible for FREE then I can probably do that.
    I try using the "Play" Store icon on the phone & it says 'No connection'. 
    Having a Macbook and not get internet is VERY frustrating.
    TIA.

    If the phone has a Wi-Fi tethering mode, it should appear in the Wi-Fi menu on your Mac as a wireless network.

Maybe you are looking for