Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide iframe in css and/or html

    Hi all,

    I have an existing website, which has gallery/portfolio pages so that when the user hovers over one of the thumbnails to the right, the image is revealed.

    I am creating a new page which will also follow the aforementioned gallery format, but instead of larger images, it will show/hide iframes when the user hovers/clicks over the corresponding thumbnails. I don't remember much of the rules of coding, as this was created years ago. I am at a point where I am having trouble doing the following two things:
    1. I would like the larger image to stay revealed when the user not only hovers, but also clicks on the corresponding thumbnail image.
    2. I have managed to figure out how to keep the iframe hidden, but cannot figure out how and where to place the code to reveal the iframe when when the corresponding thumbnail is hovered over and/or active.


    Attached is the css stylesheet for the site. And here is some of the applicable code to the new page I am trying to create:

    Code:
    <div id="container2"> 
    <div id="galleries">
      <a class="gallery slideac" href="#nogo"><span><iframe src="siteDiag/index.html" width="700"
    		height="550" frameborder="0" style="display:none" name="siteDiagGallery"></iframe></span></a> 
      <a class="gallery slidead" href="#nogo"><span>placeholder<br />photo<br /><img src=
            "placeholder.jpg" alt="placeholder" title="placeholder" /></span></a> 
      <a class="gallery slideae" href="#nogo"><span>placeholder<br />photo<br /><img src=
            "placeholder.jpg" alt="placeholder" title="placeholder" /></span></a> 
      <a class="gallery slideaf" href="#nogo"><span>placeholder<br />photo<br /><img src=
      		"placeholder.jpg" alt="placeholder" title="placeholder" /></span></a> 
      <a class="gallery slideag" href="#nogo"><span>placeholder<br />photo<br/><img src=
      		"placeholder.jpg" alt="placeholder" title="placeholder" /></span></a> 
      <a class="gallery slideah" href="#nogo"><span>placeholder<br />photo<br /><img src=
      		"placeholder.jpg" alt="placeholder" title="placeholder" /></span></a>
      </div>
     </div>
    I am using Dreamweaver CS6, a trial version.
    Thanks in advance for reading this and for any help
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •