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.

Tags: Dreamweaver

Similar Questions

  • How to open an image when you click in a Word.

    Im working in a demo for an interactive book for ipad with the Digital Publishing Suite > Folio Builder and I need to be able to open a specific image when you click in a Word. I have not found a tutorial which shows how to do this can point me to it someone in the right direction please?  THX so much

    Simply put a box above the word. Then convert the box to a button with the action "go State" that points to a specific State in MSO with your image. While an invisible button (no fill and no stroke). Probably the ASM must be first vacuum State.

  • How to disable a button when you click on another and vice versa in busy border?

    Hi guys!

    I have a question about the buttons!

    I'm not an expert in coding, but I managed to create buttons with actions, but the question is how do I deactivate (deselect) a button by clicking on another and how to activate it when clicking on it?

    I would really appreciate your help!

    Thank you!

    composition of loan:

    button_1 = 0;

    button_2 = 0;

    in the click event of button 1

    If (button_1 == 0)
    {
    button_1 = 1;
    sym.getSymbol("button_1").play (0);  play anything, this button is

    If (button_2 == 1)
    {
    sym.getSymbol("button_2").playReverse ();   Reset everything that made the other button
    button_2 = 0;
    }
    }

    in the click event of button 2

    If (button_2 == 0)
    {
    button_2 = 1;
    sym.getSymbol("button_2").play (0);  play anything, this button is

    If (button_1 == 1)
    {
    sym.getSymbol("button_1").playReverse ();   Reset everything that made the other button
    button_1 = 0;
    }
    }

  • How to get the event when you click Add another button in a table.

    Hello
    How to recognize the event in processFormRequest click on the button Add another line of the footer of a table?

    Suppose if the ID is anotherRow (I mean ID of the button to add another line of the footer)

    If I give if (pageContext.getParameter ("anotherRow")! = null)... its not recognizing the event that is returning null only...

    I want to perform certain actions when the user clicks Add another line of footer. Please let me know the details of how identify when add another line is clicked...

    Thank you
    Srikanth

    Hello

    If you have only one table with add_row_button, and then copy the following code works perfectly

    If (tableBean.getName () .equals (pageContext.getParameter (SOURCE_PARAM)))
    (& ADD_ROWS_EVENT.equals (pageContext.getParameter (EVENT_PARAM)))
    {
    ...
    }

    tableBean is the Handle for your advanced table, hope, it will help you.

    Kind regards
    Out Sharma

  • Someone at - it an easy way to hide an image when you click on it?

    Hello

    I have an image where I need each arrow/box text to remove once clicked. There must be an easier way to create millions of images? Is it possible to do it with a button? The person using the animation should click on vouchers that would lead to their dissappearing.

    It was fun place in photoshop. That the picture will be brought in the library of hot flashes.

    Thanks in advance.

    A17L01P120.jpg

    F8 to convert the image into a symbol

    give a name to the new video clip (perhaps image1)

    then add the code in the framework (F9)

    Image1. addEventListener (MouseEvent.CLICK, hideImages)

    function hideImages(e:MouseEvent):void {}

    e.Target.Visible = false;

    }

    for other images just add a line of image

    Image2. addEventListener (MouseEvent.CLICK, hideImages)

    image3. addEventListener (MouseEvent.CLICK, hideImages)

    image4. addEventListener (MouseEvent.CLICK, hideImages)

  • How to hide a TextField when you click another button

    Hello!

    I was able to generate a TextField appear when you click a button, but when I click on another button, to display further information, I have still the first TextField shows.  I had a quick glance, but not managed to find something to help me get the first to disappear.  Can anyone provide ideas for this?

    The code I am using to display the TextField object is:

    Button10.addEventListener (MouseEvent.CLICK, fl_ClickToPosition);

    var fl_TF:TextField;
    var fl_TextToDisplay:String = "send the right projector/screen disply";

    function fl_ClickToPosition(event:MouseEvent):void
    {
    fl_TF = new TextField();
    fl_TF. AutoSize = TextFieldAutoSize.LEFT;
    fl_TF. Background = true;
    fl_TF. Border = true;
    fl_TF.x = 300;
    fl_TF.y = 100;
    fl_TF. Text = fl_TextToDisplay;
    addChild (fl_TF);
    }

    Thanks in advance

    use:

    Button10.addEventListener (MouseEvent.CLICK, fl_ClickToPosition);

    var fl_TF:TextField;
    var fl_TextToDisplay:String = "send the right projector/screen disply";

    function fl_ClickToPosition(event:MouseEvent):void
    {

    if(fl_TF&&fl_TF.parent) {/}

    fl_TF.parent.removeChild (fl_TF);

    fl_TF = null

    }

    fl_TF = new TextField();
    fl_TF. AutoSize = TextFieldAutoSize.LEFT;
    fl_TF. Background = true;
    fl_TF. Border = true;
    fl_TF.x = 300;
    fl_TF.y = 100;
    fl_TF. Text = fl_TextToDisplay;
    addChild (fl_TF);
    }

    Thanks in advance

  • Tips for the HTML and CSS code enlarge an image when you click on it?

    Hello

    When you click on an image of an inch that I want users to be able to display a version grown in the same Web page, and then click close to return to thumb image.

    Is not in a gallery is a sales page that contains 3 images.

    I'm new to this - learning all the time any help greatly appreciated!

    Kind regards, Matt.

    PS code used so far;

    "< img src="images/gallery_images/thumbs/120px-Glass_1.jpg "alt =" glass image 1 "width ="150"/ >

    Add class = 'fancybox' to your ankles.

    class = "fancybox" href = "images/gallery_images/large_images/700px-Glass_1.jpg" >images/gallery_images/thumbs/120px-Glass_1.jpg "alt ="description">

    Nancy O.

  • Zoom on image when you click on

    Hello.  I have an image that I converted to a movieclip.  I have added a click event to it, and when you click on it, I'm trying to zoom in on the image to the point that it has been activated.  I tried a few following code but ended up in trouble.

    var scaleFactor:Number = 0.8;
    
    var minScale:Number = 0.25;
    
    var maxScale:Number = 2.0;
    
    men.addEventListener(MouseEvent.CLICK, menOver);
    
    
    function menOver(e:Event)
    {
    
        var mat:Matrix;
        var externalCenter:Point = new Point(men.mouseX,men.mouseY);
        var internalCenter:Point = new Point(men.mouseX,men.mouseY);
    
        men.scaleX = Math.max(scaleFactor*men.scaleX, minScale);
    
        men.scaleY = Math.max(scaleFactor*men.scaleY, minScale);
        mat = men.transform.matrix.clone();
        MatrixTransformer.matchInternalPointWithExternal(mat,internalCenter,externalCenter);
    
        men.transform.matrix = mat;
    }
    

    For now, it is not automatically zoom in (you will need to keep clicking on).  Also, he is currently zooming.  Not sure where I'm wrong.

    The effect I'm after is really, like a pan of the camera and the zoom.

    Any advise appreciated.

    For now, it is not automatically zoom in (you will need to keep clicking on).

    If you want to get an animation effect, you have to keep calling the lines where you recalculate the balance in a few for example, timer or repeting function enterFrameHandler of.

    Also, he is currently zooming.

    You calculate new minScale, which is smaller than 1, property ladder so: zoom out.

    Try this code. I hope that it compiles - I wrote it in Notepad.

    The basic idea is to call the repetedly function that sets the scale. The repeting function starts when you press the mouse down on your movieclip and stops when the scale is almost the same as targetScale. When you release the mouse button, it should animate scale = 1.

    Let me know if this helped.

    var scaleFactor:Number = 0.8;
    var minScale:Number = 1;
    var maxScale:Number = 2.0;
    var targetScale:Number;
    
    men.addEventListener(MouseEvent.MOUSE_DOWN, men_mouseDownHandler);
    
    function men_mouseDownHandler(event:MouseEvent):void {
        targetScale = maxScale;
        addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
    }
    
    function stage_mouseUpHandler(event:MouseEvent):void {
        stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
        targetScale = minScale;
        addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    }
    
    function enterFrameHandler(event:Event):void {
        var mat:Matrix;
    
        var externalCenter:Point = new Point(men.mouseX, men.mouseY);
        var internalCenter:Point = new Point(men.mouseX, men.mouseY);
    
        if(Math.abs(men.scaleX - targetScale) > 0.05) {
            men.scaleX = men.scaleY = scaleFactor * scaleX + (1 - scaleFactor) * targetScale;
        }
        else {
            men.scaleX = men.scaleY = targetScale;
            removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
    
        mat = men.transform.matrix.clone();
        MatrixTransformer.matchInternalPointWithExternal(mat,internalCenter,externalCenter);
    
        men.transform.matrix = mat;
    }
    
  • I have 11 on mac elements. Clone Stamp does not, when you click the command to clone I get the tool move?

    I have 11 on mac elements. When I click on the sample order get the move tool and no cloning happens?

    Option (Alt on windows OS) key is what you press and hold the key and then click on the image to define the sample (source of duplication) for duplication tool and Healing Brush tool.

  • Hide a clip when you click on

    Currently, making an escape the room game. How can I write a piece of script that will allow me to click on the value of video clips and then they will be hidden.

    One of the many ways:

    1. you can change the alpha of the movieclip to 0 property. The object will still be active, but is not visible.

    2. you can change the visible property of the movieclip to false. The object is not active and is not visible.

    3. you can change the x or y property of the movieclip to bring out of the visible area of the scene.

    4. If you have added the movieclip to the display list using addChild() to show on the stage, you can use removeChild() to remove the movieclip from the display list and make them disappear.

    5. If you have added the movieclip to the display list using addChild(), then you can change the order of the child and hide the movieclip behind one another, bigger, movieclip in the display list.

  • Hide the Textbox when you click on buttons

    Hi all

    Im trying to create a form to our customer service representatives to make their life easier. Which is a plus for me.

    I tried Googling and playing with scripting Validation and nothing seems to work.

    Here's what I'm trying to accomplish.

    There are 3 radio buttons (credit, repair and replacement), I need to have the possibility of having only 1 of the selected three

    So if a button is clicked it would make a series of text boxes and text visible and hide others

    I can't mention how to proceed.

    Found this article, but im not sure if it applies. IM using Acrobat X Pro.

    I have acutally thought of it earlier

    var f = this.getField ("c1");

    var g = this.getField ("Text2");

    If (f.value == (2)) # changed that "if (f.value is"YES") #

    {

    g.Display = display.hidden;

    }

    on the other

    {

    g.Display = display.visible;

    }

    If (event.value == 'Yes') { ##Changed that "if (event.value == 'YES') {} ' # }

    this.getField ("Hidden_Field") .display = display.visible

    } else {}

    this.getField('Hidden_Field').display = display.hidden

    }

    Thanks for the reply so :-D

  • How to set the variable when you click on text/image

    Hello

    I have the following parts of the code. What I'm trying to do is set a variable and then the new window will read this variable and show detail appropriate according to the value. I call the new window, no problem, but struggling to get all of the variable 'productidkey '...

    Image

    < td width = "202" rowspan = 2 align = "center" bgcolor = "#FFFFFF" >
    < a href = 'details.php' > < form method = "POST" action = "details.php' style =" margin-bottom: 0; ">
    < input type = "hidden" id = "productidkey" name = "productidkey" value = "6198' > < img src ="6198.JPG"width ="200"height = '133' alt ="in more detail"border = '1' >"
    < / form > < /a > < table >

    Text

    < td >
    < div align = "right" >
    < are method = "POST" action = "details.php' style =" margin-bottom: 0; ">
    < input type = "hidden" id = "productidkey" name = "productidkey" value = "6198' > < a href = 'details.php' > < span class ="TexteÉlément"> < b >... < /b >"
    </span > < / form > < / div > < table >

    It works:




  • Charting application: how to display graphic detail when you click

    Hi, I have a graphic flash that displays values of monthly summary. When the user clicks on a bar (say for the month of January), I want to show another chart based on data for January only. I am trying to find a way to show my detail table when the user clicks on a summary bar.
    Can someone advise how can I pass value of graph parent to the child table?

    Thank you
    Aali

    Published by: Estelle on February 2, 2010 00:30

    Hi, Estelle,.

    Create 2 pages, a summary, the other for detailed (assuming P1 & P2). The query for your first chart needs to link to the second including a month value. It might look like this:

    select 'f?p=&APP_ID.:2:'||:app_session||'::::P2_MONTH:'||MONTH||':' link, MONTH  label, SUM(SALES) value1
     from TBL_DETAILS
    group by MONTH
    
    -- :2: is the page you're linking to (detailed chart)
    -- P2_MONTH should be a hidden item on that page to store the month value
    -- MONTH is the value to be passed...this could be some substr(date_col, 4,6) or something
    

    Create your hidden P2_MONTH item by ensuring that it is NOT hidden and protected. Page 2 of the application something like:

    select null link, DAY label, SUM(SALES) value1, SUM(COSTS) value2, COUNT(STAFF) value3
     from TBL_DETAILS
    where MONTH = :P2_MONTH
    group by DAY
    

    I have no information on your tables if so I hope it's aid.

    Mike

  • Express Outlook XP email opens automatically even if they are spam. How to open emails only when you click it?

    Hello
    I use Windows XP. At the opening of the e-mail messages by using outlook express, e-mail open automatically, including spam emails. How can I put it as well as the emails I click Open and power safely delete spam emails?
    Thank you

    View | Page layout. Turn off the preview pane.

  • How to play the music when you click on a button?

    Hello

    Could someone help me a little bit to start?
    My first attempt is just to create a scene, in which clicking on a button, it starts to play an mp3 file. I get to start playing as a background music after reading the help file and also tried to find the source code from the internet and also here without success.

    Thus, a person could be that kind of give me an example of jargon code snipplet, who would begin to play music immediately without first importing the file (such as file streaming) if possible and also small instructions how to assign to the key (Yes, not as background music).

    I just got the Adobe Director 11 a few days ago, and my wife is trying to get angry for me to sit with my NB every night without any progress,

    Thank you, in the case where a person pick up...

    Here's a demo movie: . You can download the source from here.

    It uses a member of ShockWave Audio (SWA), which connects to an external file.

Maybe you are looking for

  • 10.4 QuickTime (Sierra) will not autoplay movies.

    For the life of me I don't remember if it started with the installation of Sierra, just after or just before. I don't think it's the Sierra at all, I think at some point in these last days I did something somewhere is a QuickTime affected/changed beh

  • configuration screens in search of different

    Hello I am trying install iMessage and Face time upward on a friends machine they are a Mac using an iPhone running iOS 9.3.1 and El Capitan 10.11.4. When looking on the iPhone I see these screens, and they are not the ones I've seen before. We know

  • G500, order of installation of the drivers on Windows 7

    Hello I just bought this laptop model name, a G500,: 20236 and model number CB03103187. LENOVO ESSENTIAL G500H 59-395372 15.6 "INTEL CORE I3 - 3120M 4 GB 1 TB AMD RADEON HD8570M 1 GB FREE BACK Without windows. It came with free back to this topic. Wh

  • How can I clear the "Recently added" in Windows Media Player 11 on Windows Vista?

    After the transfer of all my music on a drive network hard my list 'recently added' in the library contains now each MP3 on my machine!

  • Cannot download free game Battlefield of Internet

    Original title: pc user 2 nd degree twice I tried to download versions-free Internet .comes returned as error file download .went to find the window to find the problem and under tools in the file correct them was lack something error file step, in a