Show hide behavior

I am trying to assign a behavior to hide to see the to my portfolio. I already have a reversal of the image in place on 15 individual images in a grid, essentially a brighter version of the thumbnail when hovering.

What I also want to do, is to assign a show/hide behavior to each individual tile as well as the working capital which will show a paragraph on every piece of work when you move the thumbnail. I can implement substitution easily enough, but when the mask is added to the div, I'm trying to show just flashes briefly hovering and then disappears...

Any info would be get greatly appreciated?

Heggie

I already have a reversal of the image in place on 15 individual images in a grid, essentially a brighter version of the thumbnail when hovering.

FYI: You could do this with much less code and one set of images use a CSS opacity.

CSS:

#thumbnail img {opacity: 0.5}

#thumbnail img:hover {opacity: 1.0}

HTML:

Anyway, to answer your original question. Show/hide behavior IMO work best with the onClick event triggers.   onMouseover triggers are succeed especially for devices touch screen.

See the demo below, view source to see the code.

http://ALT-Web.com/demos/show-hide-layers.html

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/


Tags: Dreamweaver

Similar Questions

  • Show/hide elements - how to hide an image when you click on another

    I have a page of the library of photo with 10 pictures on it. I organized it where there is a large image on the left side of the page and 10 thumbnails of turning on the right. I put larger images in separate AP div tags hidden. I want the big picture is displayed when the user clicks on the corresponding thumbnail. This works well, but how to make the image of 'hide' when the user clicks on a different thumbnail.

    Can you help me?

    Here is my code:

    < div id = 'eau1"style =" position: absolute; " Left: 20px; top: 50px; Width: 630px; height: 491px; z-index: 100; visibility: hidden; "" "> < img src ="... / media/images/water/water1.jpg "width ="650"height ="500"alt ="eau1"> < / div >
    < div id = "water2" style = "position: absolute;" Left: 20px; top: 50px; Width: 630px; height: 491px; z index: 103; visibility: hidden; "" "> < img src ="... / media/images/water/water2.jpg "width ="650"height ="500"alt ="water2"> < / div >
    < table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" >
    < b >
    < td width = "20" height = "20" > < table >
    < td > < table >
    < td > < table >
    < td > < table >
    < td width = "20" > < table >
    < /tr >
    < b >
    < height td = "20" > < table >
    < height td = '30' class = "copy18grey" > water Applications < table >
    < td > < table >
    < td > < table >
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    "" < td width = "650" height = "500" rowspan = "5" valign = "top" > < img src = "... / media/images/water/water1.jpg" width = "650" height = "500" alt = 'eau1' > < table >
    "" < td = '100' height > < a href = "#" onMouseOver = "MM_swapImage ('Image12 '", '... / media/images/water/water1_thmb_over.jpg',1) "Mm_swapimgrestore" > < img src = "... / media/images/water/water1_thmb.jpg" name = 'Image12' width = "160" height = "100" border = "0" onClick = "MM_showHideLayers ('eau1',", 'show') ' onDblClick = "MM_showHideLayers ('eau1',", 'hide') "" > < /a > < table > "
    "" < td > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    "" < td = '100' height > < a href = "#" onMouseOver = "MM_swapImage ('Image13 '", '... / media/images/water/water2_thmb_over.jpg',1) "Mm_swapimgrestore" > < img src = "... / media/images/water/water2_thmb.jpg" name = "Image13" width = "160" height = "100" border = "0" onClick = "MM_showHideLayers ('water2',", 'show') ' onDblClick = "MM_showHideLayers ('water2',", 'hide') "" > < /a > < table > "
    "" < td > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    "" < td = '100' height > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    "" < td > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    "" < td = '100' height > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    "" < td > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    "" < td = '100' height > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    "" < td > < img src = "... / media/images/test.jpg" alt = "" width = "160" height = "100" > < table > "
    < td > < table >
    < /tr >
    < b >
    < td > < table >
    < td > < table >
    < td > < table >
    < td > < table >
    < td > < table >
    < /tr >
    < /table >

    Show/hide behavior is not just for a single element.  With a single application of the behavior, you can display an image and 24 other people hide.  The trick is to keep by selecting the named items and their visibility, that is, to select "img1" and click display, then select "img2" and click Hide, etc.

  • Need help with show/hide Div position

    WDRC project site

    I use a show/hide behavior with my menu items. If you mouseover all the links (except the home), you will see an image with some text appear below. The one shown in the right position is the "press room". The rest are falling down, based on their position within the Division 'description' how can I do each of their ascent to the proper position when their respective link is wriggling on?

    Thanks a lot for your senses! Problem solved.
    :-)

  • layers - show/hide, positioning and models

    I want to show an image in a table when I rollover a navigation button image.
    Images of navigation buttons have been implemented with the swap image restore behaviors, and I also want to display an image related elsewhere on the page but also simply by changing the button image.
    The obvious solution seems to be to use layers for each of the images I want to view, and then show/hide the appropriate reversal. The problem is that I do work for lack of problem of the layers being absolute and therefore change position if the browser window is resized etc.. I thought about layers of nesting, but the site uses a model that prevents me to implement a global layer on the position at the breast.
    If I try to use the layer relative positioning I get a problem the layer "overlay each other" they disappear in the layer list Dereamweaver shows as available in the list of show/hide behavior.
    I have not attached any code that I'm really looking for a little advice on how best to address the problem, I hope that there is a much simpler way to do this.
    Thanks in advance

    mainplus wrote:
    > I want to show an image in a table when I rollover a navigation button
    > image.
    > Images of navigation buttons have been implemented with swap image restore
    > behaviors and I also want to display an associated image elsewhere on the page as
    > as well as simply by changing the button image.
    > The obvious solution seems to be to use layers for each of the images I have
    > want to view and then show/hide the appropriate reversal. The
    > problem is that I have make it work without problem of the layers being absolute and
    > so change position if the browser window is resized etc. I thought about
    > the layers but the site nesting uses a model that keeps me from
    > establishing a global layer on the position at the breast.
    > If I try to use relative positioning layer I get a layer problem
    > "overlap between them", they disappear in the layer list which
    > Dereamweaver shows as available in the list of show/hide behavior.
    > I'm not attached to any code because I'm really looking for a little advice regarding
    > the best way to approach the problem that I hope there are many more
    > straight forward to do this.
    > Thanks in advance
    >

    Rather than using layers and as your site appears to be table-you
    might try this tut...

    http://www.DWfaq.com/tutorials/basics/disjointed.asp

    you might find other tuts - just google "disjoint bearings.

    HTH

    --
    Chin chin
    Sinclair

  • Show-hide sticky acts!

    By using the behavior show hide to reveal a series of images on our web page, and if you fly over the elements quickly skin doesn't seem to be able to do its job. Is this just an inherent problem with behavior? I have the page in test mode on. Mac. No links beyond this page are available, but maybe someone can give me a clue as to why this is happening. Its at http://homepage.mac.com/ibexcom/.public/samples_nsts.htm

    In this case, I write a little script that hides all layers. I have add this
    at each outbreak of layer to show before the behavior that shows the layer there
    supposed to.

    onMouseOver = "hideAllLayers (); MM_showHideLayers [...] »

    I think there is an extension to
    http://www.Projectseven.com
    makes this kind of layer management.

    --
    James M. Shook
    http://www.jshook.com

  • DW: Show-hide layers

    Hey, I am having two problems with behavior show - hide layers in Dreamweaver and I was wondering if anyone else has had the same problems and has a solution.

    My test page is http://www.petermcphee.com/dreamweaver/popup-layer.html

    (1) what I would like is to show the layer when the link is hovered over, which works very well. However, I also want the layer remains visible when the mouse passes over the layer and disappear when the mouse leaves the layer.

    I googled for a while and found some tutorials that deal with show/hide layers, but they hide the layers once the mouse leaves the original link, not the layer.

    (2) in addition, the site I want to apply this behavior to a an auto centering wrapper, box, so I would layer to the right of the pop-up window under the link every time without converting them the entire site Absolute positioning. As it is now, the popup appears in different places depending on the width is my browser.

    Is this possible with the current functionality of DW?

    Thank you very much!

    Peter.

    > 1) what I would like is to show the layer when the link is hovered over,
    > who
    > works very well. However, I also want the layer to be visible while the
    > mouse is
    > over-the-top and disappear when the mouse leaves the layer.

    When you view the layer, also show an underlying layer that contains a
    GIF image transparent who is the subject of more large/more grand than the layer 10px you
    See the property. Apply a layer of skin behavior to the GIF image which hides both the
    you have just showed and the underlying layer of the layers. Skin mouseout/mouseouthandler()
    the original trigger event. Who is?

    (> 2) in addition, the site I want to apply this behavior to a car
    > centering
    > wrapper, box, so I would layer towards the good popup under the link
    > each
    > time without converting the entire site to absolute positioning. As it is
    > now,.
    > is the popup appears in different places depending on the width of my browser.

    -Change

    on this subject.


    -change

    on this subject.


    and this-

    on this subject.



    and see if that helps.

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    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
    ==================

    "petertyler" wrote in message
    News:f1a45m$7jv$1@forums. Macromedia.com...
    > Hey, I? m in both problems with the behavior show - hide layers in
    > Dreamweaver
    > and I was wondering if anyone else has had the same problems and has a
    > solution.
    >
    > My test page is http://www.petermcphee.com/dreamweaver/popup-layer.html
    >
    > 1) what I would like is to show the layer when the link is hovered over,
    > who
    > works very well. However, I also want the layer to be visible while the
    > mouse is
    > over-the-top and disappear when the mouse leaves the layer.
    >
    > I googled for a while and found some tutorials that deal with
    > show/hide
    > layers but they hide the layers once the mouse leaves the original link.
    > not
    > layer.
    >
    (> 2) in addition, the site I want to apply this behavior to a car
    > centering

    > wrapper, box, so I would layer towards the good popup under the link
    > each
    > time without converting the entire site to absolute positioning. As it is
    > now,.
    > is the popup appears in different places depending on the width of my browser.
    >
    > Is still possible with the current feature of DW?
    >
    > Thank you very much!
    >
    > Peter.
    >

  • I found the show/hide button toolbars, but you should know how to REMOVE toolbars that appear on this list?

    I found the show/hide button toolbars, but you should know how to REMOVE toolbars that appear on this list?

    Is attached a screenshot of my screen with the context menu to show/hide tabs. I want to delete some of them and let others. Please help me to know how. Thank you!

    Hmm, maybe this "one-time" imported into the new preference? Try this:

    (1) in a new tab, type or paste Subject: config in the address bar and press ENTER. Click on the button promising to be careful.

    (2) in the search above the list box, type or paste the cust and make a pause so that the list is filtered

    (3) double-click the preference of browser.uiCustomization.state and the content must be highlighted in a small dialog box.

    (4) copy the whole line and paste it into Notepad and save it as a backup.

    (5) in Firefox, click on the button '3-bar' menu > developer > Notepad. Remove the comment that appears and paste data preferably, that must appear on a long line. Click on the "Pretty Print" button to make it more readable.

    So I hope that you can spot the extra toolbars and change them out, taking care to preserve the commas between the elements.

    I don't have the extra toolbars in mine, but I copied and pasted back this spaced format and Firefox was able to handle it well. I went into customize and moved a button, and when I left, Firefox has rewritten the preference set as a single line. Assuming that yours works fine, then you can get rid of the backup from step (4).

  • Is there a keyboard short/shortcut to show/hide bookmarks bar?

    I would like to have in options > bookmark unchecked and a shortcut key, or key shortcut to show or hide the bar bookmarks.
    Checking takes room, and the score addons mouse autohide sometimes annoying when your going to type in the URL bar and not use the bookmarks.

    Y at - it a keyboard shortcut for this.
    Thank you in advance.

    Is there a keyboard short/shortcut to show/hide bookmarks bar?

    There is no shortcut keyboard corresponding to the bookmarks bar.

    'Alt' displays the menu bar
    ' Ctrl + / ' activates / deactivates the add-on bar
    "Ctrl + K" shows the search bar because it's his entry area.
    "Ctrl + L" shows the address bar because it's his entry area.

    But there are alternatives, and you can configure the zombie fashion with the extension 'hide automatically", then that is the only toolbar, hidden or not hidden, even if I don't do it.

    You can use F11 to toggle mode full-screen that hides the toolbars and the title bar.

    On Windows, you can use AutoHide - http://www.krickelkrackel.de/autohide
    which provides a window mode full ('zombie mode') with 'SHIFT + F11"similar to full screen, but within the limits of the window that allows you to display only the title bar, with the options I use with it always display bars tabs and addons in full screen or full window mode.

    In full-screen or full window, you can move the cursor to the top and see toolbars, use F10 or Alt to see the menu bar, use Ctrl + K to see the search bar, use Ctrl + L to see the address bar. To show the Favorites bar, you will need to show all toggle F10 or F11 to toggle toolbar.

    My bookmarks toolbar takes up very little space less vertical space that shows this before and after photo, see Articles 61 to 66 on the style in the following:

    You can make Firefox 6.0 look to Firefox 3.6. *, see numbered items 1-10 of the next topic difficulty Firefox 4.0 UI toolbar, problems (make Firefox 4.0 to 6.0, resemble 3.6). If you make changes, you must be aware of what has changed and what it takes to use changed or missing features.

    It is much more beyond these first 10 steps in the list, if you want to make Firefox more functional.

    Please mark "resolved" a response that will better help others with a similar problem - hope it was her.

  • Show/hide multiple Button controls increment/decrement is AWOL

    As far as I can see (LV 2013), there is a missing feature in LabVIEW, whereby, when you select multiple digital controls, you can't show/hide their increment/decrement buttons:

    Here, I have 3 DBL, 1 I32 and 1 enum, but that goes for any combination of numeric values. If I right click on one of the selected controls, I have access to only two points in the title of the "visible Points":

    -Label

    -Legend

    Where is ' Increment/decrement' part, whereas it is common to all these controls?

    BUG? I couldn't find it mentioned elsewhere, but I would not be surprised to be the first to have noticed.


  • Show/hide fields based on T/F control - only showing or hiding, not both.

    Hi Forum,

    I'm looking to show/hide fields address based on a T/F control (or a single entry check box).

    My online form has a number of business address fields, a T/F control and a number of postal address fields. I want the mailing address fields to hidden when a user clicks on the box 'As Above' (and demonstrated once again if they click this box once more).

    I used the sample code (https://docs.oracle.com/cloud/latest/process_gs/CPRCW/GUID-F3BD3386-F333-45C6-AA56-C77136D169E5.htm) as a starting point for my Web form rule and it works as expected the first time that a user clicks area T/F (i.e. He's hiding the post fields) but it does not work the second time they until it clicks (where I assumed that fields would still be visible).

    The T/F box has the following options:

    true = as above

    false = No

    And my web rule looks like this:

    If (AsAbove.value = true) {}

    PostalAddress.visible = true;

    PostalState.visible = true;

    PostalPostCode.visible = true;

    } else {}

    PostalAddress.visible = false;

    PostalState.visible = false;

    PostalPostCode.visible = false;

    }


    I tried the same thing (with similar results) using a Checkbox control with a single option (according to the example code)

    If (PostalAddressCheckbox [0] .value == 'As Above') {}

    PostalAddress.visible = true;

    PostalState.visible = true;

    PostalPostCode.visible = true;

    } else {}

    PostalAddress.visible = false;

    PostalState.visible = false;

    PostalPostCode.visible = false;

    }

    As verified does not seem to be supported, is there another way to accomplish what I'm after, or I missed something somewhere simple (and y at - it documentation on the T/F control)?

    See you soon,.

    James.

    Hello

    Web Forms address these true-false as the boxes and, as such, in the form of tables.

    You can see if you try to print the TrueFalse value. You should get something like java object lang @XXXXXX

    Try to put the code as follows (in bold and underlined):

    If (AsAbove[0].value = true """""") {}

    PostalAddress.visible = true;

    PostalState.visible = true;

    PostalPostCode.visible = true;

    } else {}

    PostalAddress.visible = false;

    PostalState.visible = false;

    PostalPostCode.visible = false;

    }

    This should do the trick

    See you soon

    José

  • Where the control to show/hide the removable storage settings

    I try to install Win 8 Prof.  I have a HP desktop with a CD player and 4 slots for removable media devices.

    In a previous installation, there was a way to show/hide the removable drives / slots unless there was inserted media.

    I don't know where the setting.  I tried the

    strategies group without result.

    I also lost the capacity of my office to recognize and attach my CD player.  It appears in Device Manager, but he said he is not physically attached.

    I can boot from the drive.

    Help, please.

    Have you installed Windows 8 or you try to install it?

    I use Windows 7 on my PC and in that, the option "Hide or show empty leads in computer folder" is located in the view tab of the window "Options records". It should be the same in Windows 8 as well.

    Visit this link:

    http://www.SevenForums.com/tutorials/6969-drives-hide-show-empty-drives-computer-folder.html

    If Windows 8 will not detect the device, try the steps in this link:

    http://Windows.Microsoft.com/en-us/Windows-8/why-isn ' t-windows-conclusion-device

  • The use of password for show/hide forms - anyway to keep the setting "does not print?

    I have a George_Johnson script that allows me to enter a password to show/hide the fields selected (keys actually).  It works perfectly, but when I enter the password and buttons appear again, setting general/Common Properties amounts to 'visible' instead of ' visible but does not print ', and the buttons appear when I print the document.  I thought I could change these lines and print buttons...

    case 'password': / / your password goes here

    getField("x").readonly = readonly;

    getField("x").display = readonly? Display.Hidden: display.visible

    App.Alert ("level 1 support is now" + readonly_desc + "d", 3);

    break;

    .. .to change the 3rd line to read as follows: getField("x").display = readonly? display.hidden: display.visible but does not print  (or _but_doesn't_print;)

    but then I started to make syntax errors in the 4th line.  I don't know about Java, but I thought I might get lucky.  I get hot?  What is the "3" that needs to change?  Or is that I started quite wrong?

    Thanks for reading,

    Zac

    You can't guess correctly that the value can be and expect it to work... You should consult the documentation.

    In this case, what you're looking for is "display.noPrint".

  • Show/hide region when the drop-down list is changed

    Hello

    I need show/hide a region when dropdow (selection list) is changed.

    I used dynamic action:

    Event : change
    Selection Type : Item(s)
    Item(s):P50_my_list
    condition : JS expression
    $v('P50_my_list') == 1
    
    True Action :
    Action : Execute JS Code
    Code : $('#region_name').show();
    
    // OR use Action ==> Show
    
    

    False Action :
    Action : Execute JS Code
    Code : $('#region_name').hide();
    
    // OR use Action ==> hide
    

    But the region has still shown!

    Also, I used a JS function (in the dynamic action of the place) but I met the same result.


    function showHideRegion(pValue)
    {     var show_or_hide = $x(pValue).value;
        if (show_or_hide == 1)
          {$('#ALTERNATIVEN_LIST').hide();}
        else
          {$('#ALTERNATIVEN_LIST').show();}
    }
    
    
    

    Hello

    I solved the problem with the js function:

    function showHideRegion (pThis, pValue)

    {var show_or_hide = $x (pValue) .value;}

    If (show_or_hide == 1)

    {

    var element = $x_UpTill (pThis, 'DIV');

    Element.style.display = 'none ';

    } else {}

    var element = $x_UpTill (pThis, 'DIV');

    Element.style.Display = "block" ;}

    }

  • Show/hide menu based on the logged in user

    Hello

    12.1.3 Jdev

    I want to show/hide some menu items based on the logged in user.

    I will explain the current design:

    In my application, I created a menu as below. (It is created using 'Create or Update ADF Menu' file adfc_config).

    ibis_menu. XML

    <?xml version="1.0" encoding="windows-1252" ?>
    <menu xmlns="http://myfaces.apache.org/trinidad/menu">
      <itemNode id="itemNode_home" label="Home" action="goHome" focusViewId="/home"/>
      <itemNode id="itemNode_transaction" label="Transaction" action="goTransaction" focusViewId="/transaction"/>
      <itemNode id="itemNode_customer" label="Customer" action="goCustomer" focusViewId="/customer"/>
      <itemNode id="itemNode_upload" label="Upload" action="goUpload" focusViewId="/upload"/>
      <itemNode id="itemNode_profile" label="Profile" action="goProfile" focusViewId="/profile"/>
      <itemNode id="itemNode_serviceRequest" label="Service Request" action="goServiceRequest"
                focusViewId="/serviceRequest"/>
      <itemNode id="itemNode_report" label="Report" action="goReport" focusViewId="/report"/>
    </menu>
    

    I have a navigation pane in my Pages that use this menu as below:

    <af:navigationPane hint="bar" id="np1" value="#{ibis_menu}" var="menuInfo">
                            <f:facet name="nodeStamp">
                                <af:commandNavigationItem id="ni1" text="#{menuInfo.label}"
                                                          destination="#{menuInfo.destination}"
                                                          action="#{menuInfo.doAction}"/>
                            </f:facet>
                        </af:navigationPane>
    

    Now, I want to hide some items on the menu, depending on the Type of user loggedIn. I have the userType stored in the managed bean.

    How can I get this feature.

    An approach which I think is as below:

    Define a variable for each itemNode in a managedbean(session scope) and who associate with the property ' visible ' / ' rendering ' of the itemNode in the Menu xml.

    Please let me know is a good way to do it or is there another solution better?

    See you soon

    AJ

    So, maybe this can help:

    http://www.Oracle.com/technetwork/developer-tools/ADF/learnmore/48-sitemenu-protection-169190.PDF

  • Show/hide layers in PDF format on iOS

    Hi - I ask it just to see if there is perhaps a more modern response: is theer any (links, buttons, javascript) to show/hide layers or any content on an iOS device? Thank you!

    Hi patrickh20438662,

    If you are referring to the option on the iOS device, then I am sorry that there is no available option to show or hide layers on iOS device.

    Kind regards

    Meenakshi

Maybe you are looking for