Disjointed Rollover Link

Hi,
I'm not sure if this is even remotely possible using solely HTML and CSS.
The idea is that I have a disjointed Rollover with the OnMouseOut for Image Restore deleted.
Then in the rollover there will be 2 different links to click.
So in essence
Mouseover Object 1 > Rollover 1 Pops up with 2 Different links
MouseOut Object 1 > Rollover 1 stays
Rollover 1 Link gets clicked and takes user to another page.
There's a good chance I could of described this better...
Anyway, Thanks in advance!

Thanks -
This is the code you posted, but it shows no code to accomplish your rollover
(you can paste any future code here in the Forum)
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="1366" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/index_01.png" width="1366" height="63" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_02.png" width="61" height="705" alt=""></td>
<td>
<img src="images/index.png" width="556" height="646" alt=""></td>
<td rowspan="2">
<img src="images/index_04.png" width="134" height="705" alt=""></td>
<td><a href="../Slide/Slide.html"><img src="images/index_05.png" width="556" height="646" alt=""></a></td>
<td rowspan="2">
<img src="images/index_06.png" width="59" height="705" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_07.png" width="556" height="59" alt=""></td>
<td>
<img src="images/index_08.png" width="556" height="59" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
See this link for what is needed for rollover
http://spot.pcc.edu/~gkerr/cas211d/coursefiles/css_examples/rollovers/css_disjointed_rollo ver_example.html
Since you want clickable links, you might try show/hide behavior

Similar Messages

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

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

  • How do you add a "back" and Next" capability to a Disjointed Rollover?

    I am having trouble linking two behaviors because I don't understand the code very well. I've seen what I am trying to do at other artists' websites like this one: http://www.emilyberger.net/paintings.html#
    I have a nice Disjointed Rollover to show art images. I also have made Mara Ribbers' Linked Slide.
    But what I want is to have the two things work together. Done successfully, one would see the detail images off to the left, with the larger picture showing when the details are rolled over. Then one would also have the option of clicking the "Next" & "Back" link/button to advance these same larger images.
    It is probably all done very elegantly with CSS, but I can't figure it out.
    Can this be done in CS3?
    Thanks much

    You should look into using a Spry Data widget. http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSA671B0BD-047C-4752-BFAC-B6C0601F9791. html#WS7F0B5D16-1F52-455a-A82B-60B61CE58E15
    I used a simple HTML page with a table to hold my dataset.
    I'm not certain of how to implement the previous/next, but I think it can be done...
    Here's a data widget I used on a site I put together for a friend: http://www.gravenimagedesign.net/nickerson/NickersonWork.html
    Although I have put the thumbnails in scrolling div, you could just place them in a wider div.
    Beth

  • 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

  • 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

  • How to activate lightbox from a second rollover link?

    I am trying to active my lightbox from a second rollover link and do not know how to do it.  I been looking for hours to find the right answer and the closest thing that made any sense was someone saying to do this..
    This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
    A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
    Sounds simple enough but the problem is my 'body onload' attitubute in my HTML seems to be uneditable for some reason so I am unable to test if this works or not.  Can someone please help me as I am new to dreamweaver and this is my first website. Here is where is sits in my code - not sure if that will help.
    thanks
    </script>
    <!-- InstanceEndEditable -->
    <!-- InstanceParam name="Home" type="text" value="nostyle" -->
    <!-- InstanceParam name="About Us" type="text" value="nostyle" -->
    </head>
    <body onload="MM_preloadImages('_images/bit_nav1grey.png','_images/bit_nav2grey.png','_images/b it_nav3grey.png','_images/bit_nav4grey.png','_images/bit_nav5grey.png')">
    <div id="container">
    <div id="logo">
    </div><!--end logo -->
    <div id="header">
       <div id="banner">
       </div><!--end banner -->
       <div id="navbar">
         <ul>
           <li><a href="home.html" title="Home" target="_self">Home</a></li>
           <li><a href="about.html" title="About Us" target="_self">About Us</a></li>
           <li><a href="products.html" title="Products" target="_self">Products</a></li>
           <li><a href="news.html" title="News" target="_self">News</a></li>
           <li><a href="contact.html" title="Contact Us" target="_self">Contact Us</a></li>
         </ul>
       </div><!--end navbar -->
    </div><!--end header --><!-- InstanceBeginEditable name="main" -->
    <div id="main">
      <div id="drill_text">
        <h2 class="drill_heading">Hardcore Drill Bits</h2>

    No sorry it is not up yet.  But here is a sample of my code of what I am trying to do...each of the rollover named <div id="drill_nav1">,<div id="drill_nav2">,<div id="drill_nav3">...etc I want to link to a different lightbox gallery as per example at the bottom.  Does that help?
    </head>
    <body onload="MM_preloadImages('_images/bit_nav1grey.png','_images/bit_nav2grey.png','_images/b it_nav3grey.png','_images/bit_nav4grey.png','_images/bit_nav5grey.png')">
    <div id="container">
    <div id="logo">
    </div><!--end logo -->
    <div id="header">
       <div id="banner">
       </div><!--end banner -->
       <div id="navbar">
         <ul>
           <li><a href="home.html" title="Home" target="_self">Home</a></li>
           <li><a href="about.html" title="About Us" target="_self">About Us</a></li>
           <li><a href="products.html" title="Products" target="_self">Products</a></li>
           <li><a href="news.html" title="News" target="_self">News</a></li>
           <li><a href="contact.html" title="Contact Us" target="_self">Contact Us</a></li>
         </ul>
       </div><!--end navbar -->
    </div><!--end header -->
    <div id="main">
       <div id="drill_text">
         <h2 class="drill_heading">Hardcore Drill Bits</h2>
         <p class="drill_text">All impregnated items are available in Hardcore’s ever reliable traditional matrix recipes or the recently developed “M” series which is fast becoming the “weapon of choice” for those customers looking to further reduce their cost per metre.</p>
        </div><!-- end drill_text -->
       <div id="large_image2">
        </div><!-- end large_image2 -->
       <div id="drill_nav1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impregnated drill bits','','_images/bit_nav1grey.png',1)"><img src="_images/bit_nav1.png" alt="impregnated drill bits" width="206" height="70" id="impregnated drill bits" /></a>
        </div><!-- end drill_nav1 -->
       <div id="drill_nav2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shoe bit','','_images/bit_nav2grey.png',1)"><img src="_images/bit_nav2.png" alt="shoe bit" width="206" height="70" id="shoe bit" /></a>
        </div><!-- end drill_nav2 -->
       <div id="drill_nav3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pcd bits','','_images/bit_nav3grey.png',1)"><img src="_images/bit_nav3.png" alt="pcd bits" width="206" height="70" id="pcd bits" /></a>
        </div><!-- end drill_nav3 -->
       <div id="drill_nav4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wedging and directional ','','_images/bit_nav4grey.png',1)"><img src="_images/bit_nav4.png" alt="wedging and directional bits" width="206" height="70" id="wedging and directional " /></a>
        </div><!-- end drill_nav4 -->
       <div id="drill_nav5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('surface set bits','','_images/bit_nav5grey.png',1)"><img src="_images/bit_nav5.png" alt="surface set bits" width="206" height="70" id="surface set bits" /></a>
        </div><!-- end drill_nav5 -->
       <div id="large_image2">
        </div><!-- end large_image2 -->
       <div id="drill_image1">
         <div id="gallery" class="lbGallery">
           <ul>
             <li> <a href="_images/impregnated/Impregnated_header.jpg" title=""><img src="_images/impregnated/Impregnated_thumb.jpg" width="186" height="140" alt="Flower" /></a> </li>
             <li> <a href="_images/impregnated/standard-core-bit.jpg" title="STANDARD<br />
                A standard bit configuration uses parallel waterways"></a> </li>
             <li> <a href="_images/impregnated/taper-water-way-bit.jpg" title="TAPER WATER WAY<br />
                Waterways taper out to OD, also known as <em>pie</em> or <em>wedge</em> waterways"></a> </li>
             <li> <a href="_images/impregnated/vortex-drill-bit.jpg" title="VORTEX<br />
                Grooves on OD will provide a free'r cutting bit without changing the matrix, also known as <em>turbo</em> "></a> </li>
             <li> <a href="_images/impregnated/face-discharge-drill-bit.jpg" title="FACE DISCHARGE<br />
                Face discharge ports prevent fluid from washing the core "></a> </li>
             <li> <a href="_images/impregnated/sand-water-way.jpg" title="SAND WATER WAY<br />
                Large ID waterways reduces fluid velocity to prevent core washing, ideal if face discharge ports are getting blocked"></a> </li>
             <li> <a href="_images/impregnated/big-john-drill-bit.jpg" title="BIG JOHN<br />
                16mm matrix height, 4 diamond reinforcing pins per segment and additional waterways, used if bit gauges are being worn out prematurely"></a> </li>
             <li> <a href="_images/impregnated/conventional-drill-bit.jpg" title="CONVENTIONAL<br />
                All conventional coring systems covered from 46mm up to 8C"></a> </li>
            </ul>
          </div>
         <script type="text/javascript">
    // BeginOAWidget_Instance_2127022: #gallery
            $(function(){
                $('#gallery a').lightBox({
                    imageLoading:            '_images/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
                    imageBtnPrev:            '_images/lightbox/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
                    imageBtnNext:            '_images/lightbox/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
                    imageBtnClose:            '_images/lightbox/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
                    imageBlank:                '_images/lightbox/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)
                    fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
                    containerResizeSpeed:    400,             // Specify the resize duration of container image. These number are miliseconds. 400 is default.
                    overlayBgColor:         "#000000",        // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
                    overlayOpacity:            0.8,        // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
                    txtImage:                'Impregnated Drill Bits',                //Default text of image
                    txtOf:                    'of'
    // EndOAWidget_Instance_2127022
        </script>
        </div><!-- end drill_image1 -->

  • Rollover links don't work! iweb 08

    I've added a few rollover links to my text and they don't work when I upload the html to my non-mobileme server. I don't see any of my rollover picture sources in the code, but I don't know where or how to add them... Here is the code:
    <area href="mailto:[email protected]?subject=Sign%20Me%20Up!" title="Sign Me Up!"
    onmouseout="IMmouseout('shapeimage_7', '0');" shape="rect" onmouseover="IMmouseover('shapeimage_7', '0');" coords="356, 88, 534, 110" /><area href="mailto:[email protected]?subject=" title="Send Love to Kay" onmouseout="IMmouseout('shapeimage_7', '1');" shape="rect" onmouseover="IMmouseover('shapeimage_7', '1');" coords="357, 154, 533, 176" /><area href="mailto:[email protected]?subject=" title="Send Love to Joseph" onmouseout="IMmouseout('shapeimage_7', '2');" shape="rect" onmouseover="IMmouseover('shapeimage_7', '2');" coords="346, 176, 544, 198" /><area href="mailto:[email protected]?subject=" title="Book Us" onmouseout="IMmouseout('shapeimage_7', '3');" shape="rect" onmouseover="IMmouseover('shapeimage_7', '3');" coords="339, 242, 551, 264" /></map>
    (followed by the mouseout image src files)
    Help me!

    What's the URL of the problem page?
    OT

  • 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

  • Rollover Link that displays a message, is there a way to do that in Acrobat?

    Hello,
         Is there a way to create rollover links that display a pop message in the PDF itself? I do not want a separate browser window to pop up, or a link to another PDF page, I just want a bubble, box, or an image to pop up when you rollover a word in the PDF itself.
    Thanks,
    MG

    Post your question in the forum for Adobe Acrobat.

  • Broken Rollover Links in Safari

    I'm having some trouble with rollover links in a facebook app I'm building.
    In Safari 3.0.4 the links become blue squares with question marks after they are clicked or rolled over.
    They work fine in Safari 2.0.4 and in Firefox and IE.
    I've found some other threads here and elsewhere that deal with this topic, but have yet to find a conclusive solution.
    Can anyone help me with this?
    Many thanks

    One problem is that you are using an early version of Safari and it wasn't mature like other browsers. The other is that you are using a "dated" Mac OS X when web designers are moving to more recent technology. You will see that Netscape and Microsoft have stopped developing their browsers for the Mac.

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

  • Disjointed rollover and jQuery (CS4)

    Hi there,
    I made a simple page that starts with a gif animation, when the animation is done, a div fades up and quickly after that another div fades up, both using jQuery. This last div holds just an image. Now I have to change that image for a simple disjointed rollover (show/hide) so that on mouseover a second image is shown. I made that rollover in FireWorks CS4 and exported it as html and images. Then I inserted the html of the rollover in place and did a preview and ouch, everyting is broken. The first hidden div doens't fade up and the second div is shown from the start. How do I fix this?

    I made that rollover in FireWorks CS4 and exported it as html and images.
    It's a huge mistake to rely on graphics apps to generate HTML code and scripts for you.  For best results, use DW to build your HTML & rollover behaviors.  Use graphics apps for images only.
    everyting is broken. The first hidden div doens't fade up and the second div is shown from the start.
    Evidently, you have script conflicts or some other egregious code errors that are killing your page.
    Validate your code:
         CSS - http://jigsaw.w3.org/css-validator/
         HTML - http://validator.w3.org/
    How do I fix this?
    No way to tell without seeing your page.  To simplify things, you could try a CSS Rollover method rather than another JavaScript.
    Pure CSS Button Rollover (Sprite).
    http://alt-web.com/DEMOS/CSS-Button-Sprite.shtml
    Pure CSS Disjointed Rollovers
    http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
    Pure CSS Disjointed Menu Rollovers
    http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

Maybe you are looking for