43 users online (1 members and 42 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 16

Related

  1. a html code to make a picture smaller    Forum: HTML Forum
    Replies: 1
  2. Lights out here    Forum: General Discussion
    Replies: 1
  1. #1
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile How to make blinking lights red and green in html.

    I do not know much of html but will learn.
    First I need to draw 2 circled lights, like in Christmas, then I want to make the red blink 3 times, and then green 3 times, then red 2 times, and then green 2 times, then 1 blink for red and then 1 blink for green color. Then go back from the beginning 3-3,2-2,1-1. In a loop non stop.

    Is possible, examples would be appreciated.

    Many thanks...

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    and a warm welcome to these forums.

    An animated gif is probably the easiest way to achieve your goal.

    Check out the attachment for a working example.
     
     
    Attached Files Attached Files

  3. #3
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    Thanks you for a blinking file, How do I place into website a .gif file, so as the website loads it would blink?

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    the index.html file has the code for placing the blink.gif in a web page.

    Have you not tried it yet?

    Clicking the index.html file will open it in your default browser.

  5. #5
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    Yes I looked at it, but I am not sure yet what exactly I need to copy.

    Also i would like to place 3 of these images into 1 line next to each other by the indent, into the website as well as into email sending software, as html.

    Replay...
    Last edited by Surgey46; 02-24-2011 at 01:26 PM.

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    If you want the images to display until the page has finished loading, then javascript is required to achieve this.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>blinking circles</title>
    
    <style type="text/css">
    #container {
        width:424px;
        margin:auto;
     }
    .circle {
        float:left;
        display:inline;
        width:100px;
        height:100px;
        padding:10px;
        border:5px double #666;
        margin:4px;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
       document.getElementById('container').className='hide';
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div  id="container">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
    </div>
    
    </body>
    </html>
    

  7. #7
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    thanks, i inserted the whole code into the web side, first web page loads and about 1 second disappears. I tried with different domains providers, it the same thing. May be something wrong with <head> or <body> statements, it does not understand, since i have other staff on a web page.

    replay...

  8. #8
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    if the images disappear after one second, then the page has taken one second to load.

    If the page takes ten seconds to load, then the images will disappear after ten seconds.

  9. #9
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    Actually, the whole page disappears, and it blank, but how to make sure these images do not disappear? I have other staff on a web page, like some pictures and other inserted html, the code you gave me if I insert it exactly as it is, it does not work!

    For example:

    I insert your code into web site:

    http://picturesexy.weebly.com/

    test it what do you think?
    Last edited by HTML; 03-08-2012 at 11:50 AM.

  10. #10
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    your page does not validate...


    The reason that the whole page disappeared is because you had a div element with the same id as I had used for my code - (id="container").

    Also you cannot just C&P all of my code straight into the middle of your document.

    It would need to be done coded something like this...
    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 profile="http://gmpg.org/xfn/11">
    
    <meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />
    <meta property='og:site_name' content='picture' />
    <meta property='og:title' content='Home' />
    <meta property='og:description' content='picture' />
    <meta property='og:image' content='http://picturesexy.weebly.com/images/blink.gif' />
    <meta property='og:url' content='http://picturesexy.weebly.com/' />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title> picture - Home</title>
    
    <link rel='stylesheet' href='http://cdn1.weebly.com/weebly/images/common/common.css?8' type='text/css' />
    <link rel='stylesheet' type='text/css' href='/files/main_style.css' title='weebly-theme-css' />
    
    <style type='text/css'>
    #weebly_page_content_container div.paragraph, #weebly_page_content_container p, #weebly_page_content_container .product-description, .blog-sidebar div.paragraph, .blog-sidebar p{}
    #weebly_page_content_container h2, #weebly_page_content_container .product-title, .blog-sidebar h2{}
    #weebly_site_title{}
    .weebly-footer {
    	position: relative !important;
    	}
    	
    .weebly-footer a {
    	position: relative !important;
    	z-index: 2 !important;
    	cursor: pointer;
    	}
    	
    .weebly-footer-dynamic {
    	position: relative !important;
    	display: inline-block !important;
    	width: 72px !important;
    	height: 1px !important;
    	vertical-align: middle !important;
    	background: url("http://static-cdn.weebly.com/images/weebly-footer-active.png") no-repeat -9999px 0; /* preload */
    	text-decoration: none !important;
    	border: 0 !important;
    	margin: 0 !important;
    	padding: 0 !important;
    	}
    	
    .weebly-footer-button {
    	position: absolute;
    	top: -14px;
    	left: 0;
    	display: block;
    	_display: inline-block;
    	width: 72px;
    	height: 29px;
    	background: url("http://static-cdn.weebly.com/images/weebly-footer.png") no-repeat;
    	_background: url(data:image/gif;base64,AAAA);
    	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static-cdn.weebly.com/images/weebly-footer.png', sizingMethod='crop');
    	}
    	
    .weebly-footer-hover .weebly-footer-button {
    	background: url("http://static-cdn.weebly.com/images/weebly-footer-active.png") no-repeat;
    	_background: url(data:image/gif;base64,AAAA);
    	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static-cdn.weebly.com/images/weebly-footer-active.png', sizingMethod='crop');
    	}
    	
    .weebly-footer-button-text {
    	display: none;
    	}
    	
    .weebly-footer-message {
    	display: none;
    	position: absolute;
    	top: -86px;
    	left: 1px;
    	width: 395px;
    	height: 98px;
    	_background: url(data:image/gif;base64,AAAA);
    	}
    	
    .weebly-footer-dynamic-hover .weebly-footer-message {
    	display: block;
    	}
    	
    .weebly-footer-right .weebly-footer-message {
    	left: -310px;
    	}
    	
    .weebly-footer-message-content {
    	position: relative;
    	display: block;
    	width: 100%;
    	height: 59px;
    	background: url("http://static-cdn.weebly.com/images/weebly-footer-content.png") no-repeat;
    	_background: none;
    	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static-cdn.weebly.com/images/weebly-footer-content.png', sizingMethod='crop');
    	}
    	
    .weebly-footer-message-carrot {
    	position: relative;
    	left: 55px;
    	float: left;
    	display: block;
    	width: 12px;
    	height: 7px;
    	background: url("http://static-cdn.weebly.com/images/weebly-footer-carrot.png") no-repeat;
    	_background: none;
    	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static-cdn.weebly.com/images/weebly-footer-carrot.png', sizingMethod='crop');
    	}
    	
    .weebly-footer-right .weebly-footer-message-carrot {
    	left: 367px;
    	}
    </style>
    <style type="text/css">
    #circle-holder {
        width:424px;
        margin:auto;
     }
    .circle {
        float:left;
        display:inline;
        width:100px;
        height:100px;
        padding:10px;
        border:5px double #666;
        margin:4px;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
       document.getElementById('circle-holder').className='hide';
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    <script type='text/javascript'>
    var STATIC_BASE = 'http://cdn1.weebly.com/';
    </script>
    <script type='text/javascript' src='http://cdn1.weebly.com/libraries/prototype/1.7-custom/prototype.min.js' ></script>
    <script type='text/javascript' src='http://cdn1.weebly.com/libraries/scriptaculous/1.9.0-custom/effects.min.js' ></script>
    <script type='text/javascript' src='http://cdn1.weebly.com/weebly/images/common/weebly.js?1' ></script>
    <script type='text/javascript' src='http://cdn1.weebly.com/weebly/images/common/lightbox202.js?8' ></script>
    <script type='text/javascript' src='http://cdn1.weebly.com/weebly/libraries/flyout_menus.js?11'></script>
    
    <script type='text/javascript'>
    function initFlyouts(){initPublishedFlyoutMenus([{"id":"576661259965716665","title":"Home","url":"index.html"}],'576661259965716665','<li class=\'weebly-nav-more\'><a href=\"#\">more...</a></li>','')}if (Prototype.Browser.IE) window.onload=initFlyouts; else document.observe('dom:loaded', initFlyouts);
    </script>
    
    </head>
    <body class="weeblypage-index" >
    <div id="container">
    <div id="masthead">
    <h1><span id="weebly_site_title">picture</span></h1>
    </div>
    <ul id="nav">
    <li id='pg576661259965716665'><a class="current" href="/index.html">Home</a></li> 
    </ul>
    <div id="header_img" class="weebly_header">
    <div>&nbsp;</div>
    </div>
    <div id="content_box">
    <!-- WEEBLY_START_CONTENT -->
    <div id='weebly_page_content_container'>
    <div >
    <div id="310791156286084699" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">
    
    <div id="circle-holder">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
     <img class="circle" src="images/blink.gif" alt="alternating circles">
    </div>
    
    </div>
    
    </div>
    </div>
    </div>
    <div id="footer">
    <p class="center">
    <span id='weeblyFooter'>
    
    <script type='text/javascript'>
    function positionWeeblyFooter() {
    	var e = $('weebly-footer-mark');
    	if (e.cumulativeOffset().left > document.viewport.getWidth()/2) {
    		e.up().addClassName('weebly-footer-right');
    	}else{
    		e.up().removeClassName('weebly-footer-right');
    	}
    }
    </script>
    
    <span class='weebly-footer'
     onmouseover="$(this).addClassName('weebly-footer-hover')"
     onmouseout="$(this).removeClassName('weebly-footer-hover')">
    	Create a <a target="_blank" href="http://www.weebly.com/">free website</a> with
    	<span id='weebly-footer-mark'></span>
    
    	<a class='weebly-footer-dynamic' target="_blank" href="http://www.weebly.com/?footer"
    	 onmouseover="$(this).addClassName('weebly-footer-dynamic-hover');positionWeeblyFooter()"
    	 onmouseout="$(this).removeClassName('weebly-footer-dynamic-hover')">
    		<span class='weebly-footer-button'>
    			<span class='weebly-footer-button-text'>Weebly</span>
    		</span>
    		<span class='weebly-footer-message'>
    			<span class='weebly-footer-message-content'></span>
    			<span class='weebly-footer-message-carrot'></span>
    		</span>
    
    	</a>
    </span>
    
    <script type='text/javascript'>
    if (document.cookie.match(/(^|;)\s*is_mobile=1/)) {
    	document.write(
    		"&nbsp;&nbsp;&nbsp;&nbsp;" +
    		"<a href='?mobile'>Mobile Site</a>"
    	);
    }
    </script>
    
    </span>
    </p>
    </div>
    <div style='height: 1px; overflow: hidden; clear: both;'></div>	
    </div>
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-7870337-1']);
      _gaq.push(['_setDomainName', 'none']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    
    </script>
    
    <!-- Start Quantcast tag -->
    <script type="text/javascript">
      _qoptions={
        qacct:"p-0dYLvhSGGqUWo"
      };
    </script>
    <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
    <noscript>
    <img src="http://pixel.quantserve.com/pixel/p-0dYLvhSGGqUWo.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
    </noscript>
    <!-- End Quantcast tag -->
    
    </body>
    </html>
    
    ...but note that I have not attempted to correct the coding errors that the validator indicated.

  11. #11
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    I need some time to figure this out, maybe day or two, I will get back if I am unable to figure this out,

    thanks...

  12. #12
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    Well, I managed to insert images into 1 line on a site, however, what I really would like to do is to have them blink not at the same time, the first one blinks, then the second blinks 1/2 second later then the third another 1/2 second later. With the same setting red and green 3:3,2:2,1:1.

    This is an example of a simple site with flashing lights, but they flash at the same time, I want them to flash like a snake effect.

    http://buyforless2.yolasite.com/

    Waiting for replay...
    Last edited by HTML; 03-08-2012 at 11:49 AM.

  13. #13
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    I am not sure if I have got your requirement quite right, but try this image and let me know.
    &#160;
    &#160;
    Attached Files Attached Files

  14. #14
    Surgey46's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    9

    Smile Re: How to make blinking lights red and green in html.

    Good so far, where do you get those images, do you make them, I would want to play with frequency, timing delays and what ever...
    How do you make those animated .gif(s) files.

    many thanks.

  15. #15
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to make blinking lights red and green in html.

    Hi there Surgey46,

    I made the circles and frames in "photoshop" and used "GIF Construction Set Professional" to create the animation.
    Of course, this can done with other image editors and constructors.

    I will attach the folder for you to examine.
    &#160;
    &#160;
    Attached Files Attached Files



Page 1 of 2 1 2 Last