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

    Exclamation Show/Hide Onclick

    Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.


    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    body {
    background-color: #CC6;
    }

    </style></head>
    <body>

    <div id="header-wrap">
    <div id="header-container">
    <div id="header">
    <h1>JavaScript</h1>
    </div>
    </div>
    </div>
    <div id="ie6-container-wrap">
    <div id="container">
    <DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'"
    onmouseout="this.style.fontSize='12pt'">
    <div id="content">
    <h1>Mainframe</h1>
    <p>Enter the content of your website within this area.</p>
    </div></DIV>
    </div>
    </div>
    <div id="footer-wrap">
    <div id="footer-container">
    <div id="footer">

    <center>

    <body onLoad="dateandtime()">


    <script>



    var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December")

    function getthedate(){
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var hours=mydate.getHours()
    var minutes=mydate.getMinutes()
    var seconds=mydate.getSeconds()
    var dn="AM"
    if (hours>=12)
    dn="PM"
    if (hours>12){
    hours=hours-12
    }
    if (hours==0)
    hours=12
    if (minutes<=9)
    minutes="0"+minutes
    if (seconds<=9)
    seconds="0"+seconds
    var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
    +"</b></font></small>"
    if (document.all)
    document.all.clock.innerHTML=cdate
    else
    document.write(cdate)
    }
    if (!document.all)
    getthedate()
    function dateandtime(){
    if (document.all)
    setInterval("getthedate()",1000)
    }

    </script>
    <span id="clock"></span>
    </center>
    </div>
    </div>
    </div>
    </body>
    </html>


    CSS:
    body {
    font: 62.5% Arial, Helvetica, sans-serif;
    color: #597347;
    margin: 0;
    padding: 0;
    background: #beffbf;
    }

    h1, h2 {
    color: #87ac6d;
    font-family: Tahoma, Arial, Geneva, sans-serif;
    margin: 20px 0 10px;
    }

    h1 {
    font-size: 2.5em;
    }

    p {
    margin: 10px 0;
    padding: 0;
    }

    blockquote {
    font-style: italic;
    }

    #header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    }

    #header-container {
    height: 90px;
    background: url(../images/banner.jpg) repeat-x left bottom;
    }

    #header {
    width: 940px;
    margin: 0 auto;
    position: relative;
    }

    #header h1 {
    color: #beffbf;
    text-align: right;
    width: 290px;
    margin: 0;
    position: absolute;
    left: 476px;
    top: 32px;
    }

    #header h1 em{
    color: #90b874;
    font-size: small;
    display: block;
    }

    #header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 35px;
    right: 0;
    }

    #header ul li {
    float: left;
    margin-right: 5px;
    }

    #header ul li a{
    color: #90b874;
    font-weight: bold;
    font-size: 1.4em;
    margin-right: 5px;
    text-decoration: none;
    }

    #header ul li a:hover {
    color: #beffbf;
    }

    #container {
    width: 940px;
    margin: 0 auto;
    font-size: 1.4em;
    overflow: auto;
    padding: 90px 0 40px;
    }

    #content {
    float: left;
    width: 100%;
    }

    #sidebar {
    float: right;
    width: 275px;
    margin-top: 10px;
    }

    #footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    }

    #footer-container {
    height: 40px;
    background-color: #000;
    }

    #footer {
    width: 940px;
    margin: 0 auto;
    position: relative;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I don't see any image, but

    Code:
    <img id ="myImage" src = "One.jpg">
    <br><br><br>
    <div id = MyFooter" onclick = "document.getElementById('myImage').style.display = 'none'">The Footer</div>

    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar which will insert the tags. You can (and should) edit your previous post.


    "By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest." - Confucious


  •  

    Posting Permissions

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