49 users online (1 members and 48 guests)  

Thread: Image Clocks


  Results 1 to 6 of 6

Related

  1. Put an image over the top of something?    Forum: Myspace Forum
    Replies: 3
  2. Replies: 3
  3. Replies: 3
  4. Replies: 14
  5. How do I swap an image for BOTH an image and a sound?    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    htmldummie's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    6

    Image Clocks

    Hiya,
    Can anyone tell me how to make digital image clocks? I've seen them on other websites, but I can't figure out how to make them. All I can find, are javascripts, to use on an entire page. I just want to add a code to an image, so I can put multiple clocks on a webpage for people to download them.
    Greetz

  2. #2
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86
    Something like this?

    http://www.scriptsearch.com/cgi-bin/jump.cgi?ID=355

    -David

  3. #3
    htmldummie's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    6
    No, not exactly. It's a picture from a band, and the clock should appear on that pic.
    So you have the basic picture, and for example, in the upper right corner the clock appears

  4. #4
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86
    Okay... I stuck with a basic text clock, but, using this concept, you could do it with anything. I'm also assuming you do not mean that you want the clock watermarked into the picture dynamically. I saw a place using PHP you can do that (I can look on google for the link again)... so I take the avenue of putting the picture into one "lower" layer and the clock into one "upper" layer.

    The "demo.htm" code:

    HTML Code:
    <html>
    <head>
    <style>
    .BandPhoto {
    	position: absolute;
    	top: 10px;
    	left: 10px;
    	width: 200px;
    	height: 200px;
    	z-index: 1;
    	
    }
    
    .Clock1 {
    	position: absolute;
    	top: 25px;
    	left: 130px;
    	z-index: 2;
    	color: white;
    	text-align: right;
    }
    </style>
    </head>
    <body>
    <img src="photo.jpg" class="bandphoto"/>
    <div class="clock1"><SCRIPT LANGUAGE="JavaScript">
    <!--
    Stamp = new Date();
    document.write('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getYear() + ' <br> ');
    var Hours;
    var Mins;
    var Time;
    Hours = Stamp.getHours();
    if (Hours >= 12) {
    Time = " P.M.";
    }
    else {
    Time = " A.M.";
    }
    
    if (Hours > 12) {
    Hours -= 12;
    }
    
    if (Hours == 0) {
    Hours = 12;
    }
    
    Mins = Stamp.getMinutes();
    
    if (Mins < 10) {
    Mins = "0" + Mins;
    }
    
    document.write(Hours + ":" + Mins + Time);
    
    //-->
    </SCRIPT></div>
    Closer or are you looking for something to watermark it? Also, you wouldn't need to use this text clock... you could use one of the graphical clocks and use the same concept to layer them.

    -David
    Last edited by dlongnecker; 10-29-2004 at 09:49 AM.

  5. #5
    htmldummie's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    6
    Okay, that seems to work except for the fact that my clock doens't tick, lol! It just kinda stays at the same hour. Something wrong in the code maybe? I'll see if maybe I can find a script myself, or if you can find the error you can always let me know.
    But thanks a lot already. That has really set me on my way

  6. #6
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86
    Hmm, shouldn't be the same hour--should tick minute by minute. I suppose you could add the seconds, but unless you had your page refresh every second; you wouldn't see the update.

    Try this one, but using the same overlay techniques:

    http://javascript.internet.com/clocks/basic-clock.html

    -David



Tags for this Thread