Results 1 to 5 of 5

Thread: Display a javascript in a png or gif?

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Display a javascript in a png or gif?

    I was wondering if there was a simple way to do this.

    I have a javascript that counts the number of days till the end of a time period.

    I also have a png of a TV set. I thought it would look kind of cool to have that number somehow imposed over the gif, so it would like like it was in the TV

    For example go to

    http://dtvallocations.com/countdown/test.html

    If you look at the bottom of the page in black you see it says 330 days till the end of analog TV. In the right side there is a png of a TV set. Anyway to get it too look like the TV is saying 330 days till the end of analog TV?

    I tried a few things like positioning with CSS but since different monitors have different screen resolutions what works as 600X800 won't work. It also varies in different browsers.

    So if you go to the above site can you give me an idea if this can be done someone easily. I don't want nothing too complex.

    Thanks

  2. #2
    Join Date
    May 2006
    Posts
    266
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Here you are Hope this helps

    Code:
    <html>
    <head>
    <style type="text/css">
    div.tv{
    float:left;
    width:180px;
    padding-top:4EM;
    padding-left:0.5em;
    padding-right:0.5em;
    text-align:center;
    height:130px;
    background-image:URL(http://dtvallocations.com/tvguide.png);
    background-color:#000;
    }
    </style>
    
    </head>
    <body>
    <div class="tv">
    
    <script>
    
    /*
    Count down until any date script-
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free scripts here!
    */
    
    
    //change the text below to reflect your own,
    var before="the end of analog TV"
    var current="Digital TV is now mandatory!"
    var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    
    function countdown(yr,m,d){
    var today=new Date()
    var todayy=today.getYear()
    if (todayy < 1000)
    todayy+=1900
    var todaym=today.getMonth()
    var todayd=today.getDate()
    var todaystring=montharray[todaym]+" "+todayd+", "+todayy
    var futurestring=montharray[m-1]+" "+d+", "+yr
    var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
    var dstring=difference.toString()
    if (difference==0)
    document.write(current)
    else if (difference>0){
    document.write("Only<br/>")
    for (i=0;i<=dstring.length-1;i++)
    document.write('<img src="http://dtvallocations.com/countdown/c'+dstring.charAt(i)+'.gif">')
    document.write(' <br />days until '+before)
    }
    }
    //enter the count down date using the format year/month/day
    countdown(2009,02,17)
    </script>
    
    </div>
    </body>
    
    </html>
    The web in one word.

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,314
    Thanks
    1
    Thanked 241 Times in 236 Posts

    Default

    Hi there Markxxx,

    as you are using xhtml1-strict.dtd, I would suggest that you do not use the deprecated document.write()
    which requires the script to be placed in the markup.
    Using document.getElementById() instead, allows you to place the javascript in the head section of your document
    or better still in an external file.

    Here is the code, with the script in the head section...
    Code:
    
    <!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>
    <base href="http://dtvallocations.com/countdown/"/>
    <link rel="shortcut icon" href="../favicon.ico"/>
    <meta name="author" content="Mark"/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="description" content="Digital TV Allocations For the USA   - Channel 10"/>
    <meta name="keywords" content="Channel 10"/>
    <title>Welcome to DTV Allocations.Com</title>
    <style type="text/css">
    body{
        margin:0;
        padding:0;
        line-height:1.5em;
        background-color: white;
        font-family: sans-serif;
        font-size: 12px;
     }
    h1 {font-size:x-large;}
    a:link {text-decoration: underline;}     
    a:visited {text-decoration: underline;}  
    a:hover {text-decoration:none;}
    a.one:link {text-decoration: none;}     
    a.one:visited {text-decoration: none;}  
    a.one:hover {text-decoration:none;}
    
    img{
        border:none;
        padding: 0;
        margin:0;
        vertical-align:text-bottom;
     }
    b{font-size: 110%;}
    em{color: red;}
    #topsection{
        background-color: white;
        height: 90px; /*Height of top section*/
     }
    #topsection h1 {
        margin: 0;
        padding-top: 15px;
     }
    #contentwrapper {
        float: left;
        width: 100%;
     }
    #contentcolumn{
        margin-left: 200px; /*Set left margin to LeftColumnWidth*/
        text-align: center;
     }
    #leftcolumn{
        float: left;
        width: 200px; /*Width of left column*/
        margin-left: -100%;
        background: #c8fc98;
     }
    #footer{
        clear: left;
        width: 100%;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 4px 0;
     }
    #footer a{
        color: #ffff80;
     }
    .innertube{
        margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
        margin-top: 0;
     }
    #tvguide {
        width:199px;
        height:200px;
        margin:auto;
        background-image:url(../tvguide.png);
     }
    #only {
        padding-top:64px;
     }
    #digital {
        padding-top:90px;
     }   
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    /*
    Count down until any date script-
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free scripts here!
    */
    
    //change the text below to reflect your own,
       var before='the end of analog TV';
       var current='<div id="digital">Digital TV is now</div><div> mandatory!</div>';
       var montharray=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
       var obj;
    function countdown(yr,m,d){
       var today=new Date();
       var todayy=today.getYear();
    if(todayy<1000)  {
       todayy+=1900;
     }
       var todaym=today.getMonth();
       var todayd=today.getDate();
       var todaystring=montharray[todaym]+' '+todayd+', '+todayy;
       var futurestring=montharray[m-1]+' '+d+', '+yr;
       var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1);
       var dstring=difference.toString();
    if(difference==0){
       obj.innerHTML=current;
     }
    else { 
    if(difference>0){
       obj.innerHTML='<div id="only">Only </div>';
    for(i=0;i<=dstring.length-1;i++){
       obj.innerHTML+='<img src="c'+dstring.charAt(i)+'.gif">';
     }
       obj.innerHTML+='<div> days until </div><div>'+before+'</div>';
       }
      }
     }
    //enter the count down date using the format year/month/day
    window.onload=function() {
       obj=document.getElementById('tvguide');
       countdown(2009,02,17);
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="maincontainer">
    <div id="topsection">
    <div class="innertube">
    <h1>
    <a href="../index.html">
    <img title="Click Here To Return To Home Page" src="http://dtvallocations.com/logo.jpg" alt="dtv allocations logo gif"/>
    </a>
    Welcome To DTV ALLOCATIONS
    </h1>
    </div>
    </div>
    <hr />
    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube"><b>Content Column: <em>Fluid</em></b> <br /><br />
    <div id="tvguide"></div>
    </div>
    </div>
    
    </div>
    <div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b> 
    <h2>
    Menu
    </h2>
    <div>
    Maps<br />
    About This Site<br />
    FAQS<br />
    Forum<br />
    Analog To Digital Coupon Program<br />
    Links<br />
    Contact Us<br />
    Site Map<br />
    </div>
    </div>
    </div>
    <div id="footer">copyright 2008 dtvallocations.com</div>
    </div>
    
    </body>
    </html>
    
    Also note that the coding errors have been corrected and the page now validates.

    coothead
    Last edited by coothead; 03-23-2008 at 11:27 AM.

  4. #4
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much I'll have to study it to see how you did it.

    You guys are great

    By the way if you don't have cable or a dish and get your TV over the air remember by Feb 17, 2009 all TV will have to be digital so, if you don't have a digital TV you have to get a converter box

    Go to

    http://www.dtv2009.gov

    This is the United States government program to order a coupon good for $40.00 off the price of a box

    Thanks again

    )

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,314
    Thanks
    1
    Thanked 241 Times in 236 Posts

    Default

    No problem, you're welcome.

Bookmarks

Posting Permissions

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