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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with Show/Hide thing HTML

    Hello,

    I am trying to make this thing work on my blog but I can't.

    Code:
    <img src="http://www.dynamicdrive.com/dynamicindex15/button1.jpg" onmouseover="this.src='http://www.dynamicdrive.com/dynamicindex15/button2.jpg'" onmouseout="this.src='http://www.dynamicdrive.com/dynamicindex15/button1.jpg'" onclick="changeimage='http://2.bp.blogspot.com/-H6GkoZM5Iqs/T_M5tjibnQI/AAAAAAAAHT8/_ws1yS9B7i4/s1600/rollover-image-2.png'"title="Show Press Release" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>
    <div id="spoiler" style="display:none">
    HIDDEN CONTENT HERE
    </div>
    I want it to behave like that of Engadget's Show/Hide Press Release button. You can see that here http://www.engadget.com/2011/08/15/g...rola-mobility/. I want that both the Show Press Release and Hide Press Release buttons have a onmouseover and onmouseout effect.

    This is how it should behave:

    Initial showpr.png.
    User hovers mouse it changes to showpr2.png.
    IF user clicks showpr2.png, it will change to hidepr.png and will display the hidden PR text (continue below). IF NOT, it will revert to showpr.png
    User hovers mouse it changes to hidepr2.png.
    IF user clicks hidepr2.png, it will change again to showpr.png and will hide the PR text. IF NOT, it will revert to hidepr.png

    The code is not working at the moment. Can anyone help me? =)

    Thanks
    Last edited by iloveallgadgets; 08-20-2012 at 11:03 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Code:
    <div id="spoiler" style="display: none;visibility: hidden;">
    HIDDEN CONTENT HERE
    </div>
    The second part of the code is for IE> Also make sure you have a valid doctype for IE>

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
    <div id="spoiler" style="display: none;visibility: hidden;">
    HIDDEN CONTENT HERE
    </div>
    The second part of the code is for IE> Also make sure you have a valid doctype for IE>
    But how about the images? Can you rewrite the entire code how it should be and paste it here again? I don't really know a lot about HTML except for some basics. Thanks a lot!


  •  

    Posting Permissions

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