Display a javascript in a png or gif?

**Markxxx** · 03-22-2008, 07:39 AM

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

**queerfm** · 03-22-2008, 09:09 AM

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>

**coothead** · 03-22-2008, 10:54 AM

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

**Markxxx** · 03-23-2008, 08:42 PM

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

)

**coothead** · 03-23-2008, 10:24 PM

No problem, you're welcome.

Thread: Display a javascript in a png or gif?

Thread Tools

Search Thread

Display a javascript in a png or gif?

Bookmarks

Bookmarks

Posting Permissions