How to become an author
Search
Write a publication
Pull to refresh

HTML Captcha без использования изображений

Reading time24 min
Views1.7K
Lumber room
From sandbox

HTML Captcha на основе таблиц



Основана данная проверка на обычных HTML таблицах. Принцип заключается в следующем:
  • 1. Задается список цветов для букв — ячеек таблицы
  • 2. Задается список цветов для фона — ячеек таблицы


Пропарсить такую таблицу довольно сложно, так как изменить цвета текста и ячеек можно в любое время, или изменить количество выводимых символов.
Данные, вводимые пользователем передаются через переменные сессии, а не как это реализованно во многих других Captcha через невидимое поле элемента «INPUT»


Предварительно создаем в базе данных таблицу


Каждая цифра разделенная точкой с запятой это координата закрашиваемого квадрата(ячейки таблицы) фоном букв.

Класс для получения кода


<?php
class class_get_robot_code
{
	var $amount_letter;//количество символов
	var $general_keycode;
	
	function view_letter($code,$letter_size,$td_size,$sdvig)
	{
		$arr_bgcolor_letter = array("#07078F","#01354F","#000000","#013E7A","#0C0C42","#013737","#1E0636","#1C1C34","#353546");
		$arr_bgcolor = array("#D3D3FF","#BBBBBB","#D5DEEF","#BAC2D3","#80C5E7","#B9AEAE","#C9ECEC","#9DBAD7","#EFD5E8","#E1E7CB");
		$arr_yx = explode(";",$code);
		$arr_y = array();
		$arr_x = array();
		$size_of_arr_xy = sizeof($arr_yx);
		for($n=0;$n<$size_of_arr_xy;$n++)
		{
			$arr_y[$n]=substr($arr_yx[$n],0,1); 	
			$arr_x[$n]=substr($arr_yx[$n],1,1)+$sdvig;			
		}
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<?php
		for($i=1;$i<=5*$letter_size;$i++)
		{
			?>
			<tr>
			<td></td>			
			<?php
			for($j=1;$j<=5*$letter_size;$j++)
			{
				$n_color = rand(0,sizeof($arr_bgcolor)-1);
				$bgcolor = $arr_bgcolor[$n_color];
				for($n=0;$n<$size_of_arr_xy;$n++)
				{
					if(($i==$arr_y[$n]) && ($j==$arr_x[$n]))
					{
						$n_color = rand(0,sizeof($arr_bgcolor_letter)-1);
						$bgcolor = $arr_bgcolor_letter[$n_color];	
					}	
				}				
				?>
				<td bgcolor="<?php echo $bgcolor;?>" width="3" height="3"></td>
				<?php	
			}
			?>
			<td></td>
			</tr>
			<?php
		}
		?>
		</table>
		<?php		
	}
	
	function get_get_robot_code()
	{
			$general_keycode="";
//Это мы конектимся в базу и получаем символы и коды
//Функции для коннекта в базу данных лежат в отдельном файле
			$db = new db_mysql();
			$db->trashdb_sql(); $db->connect();

			$query_string="select symbol,code from antirobot";			
			$result=$db->query($query_string); 

//в результате у нас есть результат с необходимыми кодами
						
			$amount_rec = $db->num_rows($result);
			$arr_symbols=array();
			if($amount_rec>0)
			{
				for($j=1;$j<=$amount_rec;$j++)
				{
					$main_arr = $db->fetch_array($result); 
					$arr_symbols[$j-1]= array($main_arr["symbol"],$main_arr["code"]);	
				}
			}
			
			$size_of_main_arr = sizeof($arr_symbols);
			
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<tr>
		<?php
			for($j=1;$j<=$this->amount_letter;$j++)
			{
				?>
				<td>
				<?php
				$random_letter = rand(0,$size_of_main_arr-1);
				$arr_letter = $arr_symbols[$random_letter];
				$this->general_keycode.=$arr_letter[0];
				$letter_size = rand(1,1);
				$td_size = rand(3,3);
				$sdvig=0;
				$this->view_letter($arr_letter[1],$letter_size,$td_size,$sdvig);				
				?>
				</td>
				<?php				 	
			}			
		?>		
		</tr>
		</table>
		<?php													
	}
}
?>


Для Вызова используем код:

session_start();
//Указываем сколько символов будет выводится в captcha	 
	$class_get_robot_code->amount_letter=6;
		$class_get_robot_code->get_get_robot_code();
		$_SESSION['answer_key'] = $class_get_robot_code->general_keycode;
session_commit();


Этот код можно вызывать через ajax.

Использовал данную конструкцию на сайте
www.trashjob.ru

Так же есть адаптированный вариант для использования в wordpress. Для этого создал 3 файла:
  • comments.php — файл для защиты от спама при комментариях
  • html-captcha.php — файл формы настройки captcha
  • html-captcha.classes.php — файл класса captcha


comments.php


<code>
            <?php
                /****** HTML Captcha Spam Protection Plugin ******/
                if (function_exists('hc_spam_protection')) {
                $hc_opt = get_option('plugin_htmlcaptcha');
                ?> <p>
                <table>
                <tr><td>
                <input type="text" aria-required="true" tabindex="6" size="22" value="ANTISPAN (Required)" name="<?php echo $hc_opt['hc_opt_fieldname_useranswer'];?>" id="<?php echo $hc_opt['hc_opt_fieldname_useranswer'];?>" 
                onfocus="if(this.value=='ANTISPAN (Required)') this.value='';" onblur="if(this.value=='') this.value='ANTISPAN (Required)';" style="background:none repeat scroll 0 0 #F3FBFF; border:1px solid #CEE0E4; font-family:Helvetica,Arial,sans-serif; font-size:13px; padding:7px 5px;"/>
                </td>
                <td style="padding-bottom: 5px;">
                <small>Введите символы с картинки учитывая регистр. (Защита от спама)</small>
                <? hc_spam_protection();?>
                </td></tr>
                </table>
                
                </p>
            <?php } // if function_exists... ?>


html-captcha.php

<?php
/*
Plugin Name: html Captcha
Plugin URI: http://www.fishbeer.ru/htmlCaptcha
Description: Captcha html.
Version: 1.0
Author: Njabulo Jahra
Author URI: http://www.trashjob.ru

$hc_info['install_dir'] = ABSPATH . 'wp-content/plugins';
if ( basename(dirname(__FILE__)) != 'plugins' ) $hc_info['install_dir'] .= '/' . basename(dirname(__FILE__));


# Include the class and create object
if ( !class_exists('htmlCaptcha') )
	include_once($hc_info['install_dir'] . '/html-captcha.classes.php');
$hc_Obj = new htmlCaptcha;

# Get settings
$hc_opt = get_option('plugin_htmlcaptcha'); 


function hc_spam_protection() {

	global $hc_Obj,$hc_opt, $user_ID;
	// Set class options
    if(isset($user_ID))
    { 
	   //echo $user_ID;
       $hc_Obj->amount_letter = $hc_opt['hc_opt_amount_letter_register'];
    }
    else
    {
        $hc_Obj->amount_letter = $hc_opt['hc_opt_amount_letter'];    
    }
    
    $hc_Obj->letter_color = $hc_opt['hc_opt_color_letter'];
    $hc_Obj->bg_letter_color = $hc_opt['hc_opt_bgcolor_letter'];
    //echo $hc_opt['hc_opt_amount_letter'];
    $hc_Obj->get_get_robot_code();
    
    
    //$_POST['answer_key']=$hc_Obj->general_keycode;
    $_SESSION['answer_key']=$hc_Obj->general_keycode;
    //echo $hc_Obj->dump_array($_SESSION);
    //echo $hc_opt['hc_opt_msg_no_answer'];
	return true;

}

/*******************************************************************************
 * Input validation. 
 ******************************************************************************/
function hc_check_input($comment_data) {

	global $user_ID, $hc_opt;

    
    if ( ( $comment_data['comment_type'] == '' ) ) { // Do not check if the user is registered & do not check trackbacks/pingbacks
					
		// Get value user has entered
		$value_entered = $_POST[$hc_opt['hc_opt_fieldname_useranswer'] ];
        //session_start();
        if(isset($_SESSION['answer_key']))
        {

            if ($value_entered==$_SESSION['answer_key'])
            {
            $result='';    
            }   
            else
            {
            $result = 'Wrong answer';
            unset($_SESSION['answer_key']);    
            } 
        }
        else
        {
        $result = 'No answer';   
        }
		//echo "result".$result;
        
        // Get input validation result
		//$result = $hc_Obj->InputValidation($actual_result, $value_entered);
    
		// DIE if there was an error. Apply filter for security reasons (strip JS code, etc.)
        //echo $hc_opt['hc_opt_msg_no_answer'];
		switch ($result) {
			case 'No answer': 
				hc_aux_die( apply_filters('pre_comment_content', stripslashes($hc_opt['hc_opt_msg_no_answer'])) );
				break;
			case 'Wrong answer': 
				hc_aux_die( apply_filters('pre_comment_content', stripslashes($hc_opt['hc_opt_msg_wrong_answer'])) );
				break;
		}

	}
	return $comment_data;
}



/*******************************************************************************
 * Apply plugin
 ******************************************************************************/
add_filter('preprocess_comment', 'hc_check_input', 0);


$hc_db_version = "1.0";
$page_title = "Настройки HTML Captcha";

function hc_deinstall () {
   global $wpdb;
   $table_name = $wpdb->prefix . "antibot_codes";      
   $sql = "DROP TABLE " . $table_name;
   $results = $wpdb->query( $sql );
}

function hc_install () {
   global $wpdb;
   global $hc_db_version;


   $table_name = $wpdb->prefix . "antibot_codes";
   if($wpdb->get_var("show tables like '$table_name'") != $table_name) {
      
      $sql = "CREATE TABLE " . $table_name . " (
	  id int(2) NOT NULL AUTO_INCREMENT,
      symbol char(1) NOT NULL DEFAULT '',
      code char(50) NOT NULL DEFAULT '',
	  PRIMARY KEY (`id`)    
	) DEFAULT CHARSET=utf8 AUTO_INCREMENT=22;";

      require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
      dbDelta($sql);

      $insert = "      
        INSERT INTO " . $table_name ." (`id`, `symbol`, `code`) VALUES
        (1, 'B', '11;12;13;21;24;31;32;33;41;44;51;52;53;54'),
        (2, 'A', '11;12;13;14;21;24;31;34;41;42;43;44;51;54'),
        (3, 'T', '11;12;13;22;32;42;52'),
        (7, 'L', '11;21;31;41;44;51;52;53;54;'),
        (5, '1', '13;22;23;33;43;52;53;54'),
        (6, '4', '11;13;21;23;31;32;33;34;43;53'),
        (8, 'H', '11;14;21;24;31;32;33;34;41;44;51;54'),
        (9, '8', '11;12;13;14;21;24;31;32;33;34;41;44;51;52;53;54'),
        (10, 'P', '11;12;13;14;21;24;31;32;33;34;41;51'),
        (11, 'C', '11;12;13;14;21;24;31;41;44;51;52;53;54'),
        (12, '9', '11;12;13;14;21;24;31;32;33;34;44;51;52;53;54'),
        (13, '2', '11;12;13;14;21;24;33;34;42;51;52;53;54'),
        (14, 'F', '11;12;13;14;21;31;32;33;41;51'),
        (15, 'K', '11;14;21;23;31;32;41;43;51;54'),
        (16, 'E', '11;12;13;14;21;31;32;33;41;51;52;53;54'),
        (17, 'G', '11;12;13;14;21;31;33;34;41;44;51;52;53;54'),
        (18, 'R', '11;12;13;14;21;24;31;32;33;34;41;43;51;54'),
        (21, 'J', '12;13;14;24;34;41;44;52;53');
        ";

      $results = $wpdb->query( $insert );
 
      add_option("jal_db_version", $hc_db_version);

   }
}

function hc_add_options_to_admin() {
    if (function_exists('add_options_page')) {
		add_options_page('HTML Captcha', 'HTML Captcha', 8, basename(__FILE__), 'hc_options_subpanel');
    }
}

// This will add the new item, 'Math Comment Spam', to the Options menu.
function hc_options_subpanel() {
    $tmp_noanswer =	'<p align="center">
    <strong>Ошибка:</strong> Вы не заполнили поле защитного кода.
    </p>';
   	$tmp_wronganswer = '<p align="center">
    <strong>Ошибка:</strong> Вы ввели неправильный код, вернитесь назад и повторите попытку.
    </p>';
    
    $optionarray_def = array(
		'hc_opt_amount_letter'				=> 5,
        'hc_opt_amount_letter_register'		=> 2,        
        'hc_opt_color_letter'				=> '#07078F,#01354F,#000000,#013E7A,#0C0C42,#013737,#1E0636,#1C1C34,#353546',
		'hc_opt_bgcolor_letter' 		=> '#D3D3FF,#BBBBBB,#D5DEEF,#BAC2D3,#80C5E7,#B9AEAE,#C9ECEC,#9DBAD7,#EFD5E8,#E1E7CB',
        'hc_opt_msg_no_answer' 		=> $tmp_noanswer,
		'hc_opt_msg_wrong_answer' 	=> $tmp_wronganswer,
		'hc_opt_fieldname_useranswer' => 'hc_value'
    );
    add_option('plugin_htmlcaptcha', $optionarray_def, 'HTML Captcha Plugin Options');
    
    	/* Check form submission and update options if no error occurred */
	if (isset($_POST['submit']) ) {
		### SECURING FORMS ###
		/*	if ( function_exists('current_user_can') && !current_user_can('manage_options') )
      			die(__('Cheatin’ uh?'));
			check_admin_referer( $mcsp_nonce );*/
		### SECURING FORMS ###

		$optionarray_update = array (
			'hc_opt_amount_letter' 		=> $_POST['hc_opt_amount_letter'],
            'hc_opt_amount_letter_register' => $_POST['hc_opt_amount_letter_register'],             
            'hc_opt_color_letter'		=> $_POST['hc_opt_color_letter'],
            'hc_opt_bgcolor_letter'		=> $_POST['hc_opt_bgcolor_letter'],
			'hc_opt_msg_no_answer'		=> $_POST['hc_opt_msg_no_answer'],
			'hc_opt_msg_wrong_answer' 	=> $_POST['hc_opt_msg_wrong_answer'],
			'hc_opt_fieldname_useranswer' => $_POST['hc_opt_fieldname_useranswer']
		);
		update_option('plugin_htmlcaptcha', $optionarray_update);

	}    
    $optionarray_def = get_option('plugin_htmlcaptcha');
    ?>    
    <!-- ############################## Страница опции ################### -->
    <div class="wrap">
    <form name="hc_options_form" method="post" action="<?php echo $_SERVER['PHP_SELF'] . '?page=' . basename(__FILE__); ?>&updated=true">

      
   	<fieldset class="options">
        <p style="margin-left: 5px; color: #555; font-size: .85em;">
        <label for="hc_opt_amount_letter">Количество символов для незарегистрированных:</label>
		<input name="hc_opt_amount_letter" type="text" id="hc_opt_amount_letter" value="<?php echo $optionarray_def['hc_opt_amount_letter']; ?>" size="2" />
        <br />
        <label for="hc_opt_amount_letter_register">Количество символов для зарегистрированных:</label>
		<input name="hc_opt_amount_letter_register" type="text" id="hc_opt_amount_letter_register" value="<?php echo $optionarray_def['hc_opt_amount_letter_register']; ?>" size="2" />
        <br />        
        <label for="hc_opt_color_letter">Цвета букв через запятую:</label>
		<br /><input name="hc_opt_color_letter" type="text" id="hc_opt_color_letter" value="<?php echo $optionarray_def['hc_opt_color_letter']; ?>" size="100" />
        <br />
        <label for="hc_opt_bgcolor_letter">Цвета фона под буквами через запятую:</label>
		<br /><input name="hc_opt_bgcolor_letter" type="text" id="hc_opt_bgcolor_letter" value="<?php echo $optionarray_def['hc_opt_bgcolor_letter']; ?>" size="100" />
        </p>
	</fieldset>
       
       	<!-- ****************** Field Names ****************** -->
	<fieldset class="options">
		<p style="margin-left:5px; color: #555; font-size: .85em;">
			<label for="hc_opt_fieldname_useranswer">Поле для ответа:</label>
			<br /><input name="hc_opt_fieldname_useranswer" type="text" id="hc_opt_fieldname_useranswer" value="<?php echo $optionarray_def['hc_opt_fieldname_useranswer']; ?>" size="30" />
		</p>
	</fieldset>
    
    	<!-- ****************** Error Messages ****************** -->
	<fieldset class="options">
		<!-- No Answer -->
		<p style="margin-left: 5px; color: #555; font-size: .85em;">
			Сообщение, которое будет показано при отсутствии ответа:
		</p>
		<textarea style="margin-left: 5px" name="hc_opt_msg_no_answer" id="hc_opt_msg_no_answer" cols="100%" rows="3"><?php 
			echo htmlspecialchars(stripslashes($optionarray_def['hc_opt_msg_no_answer']));
		?></textarea>

		<!-- Wrong Answer -->
		<p style="margin-left: 5px; color: #555; font-size: .85em;">
			Сообщение, которое будет показано, если введено не правильное число:
		</p>
		<textarea style="margin-left: 5px" name="hc_opt_msg_wrong_answer" id="hc_opt_msg_wrong_answer" cols="100%" rows="3"><?php 
			echo htmlspecialchars(stripslashes($optionarray_def['hc_opt_msg_wrong_answer']));
		?></textarea>

	</fieldset>
    
        	<div class="submit">
		<input type="submit" name="submit" value="<?php _e('Применить опции') ?> »" />
	   </div>   
    </form>
    </div>
    <?    
}

function hc_aux_die($message) {

		if ( function_exists('wp_die') ) {
			wp_die($message);
		} else {
			die($message);
		}
}
	
register_activation_hook(__FILE__,'hc_install');
register_deactivation_hook(__FILE__,'hc_deinstall');
add_action('admin_menu', 'hc_add_options_to_admin');
?>


html-captcha.classes.php

<?php
class htmlCaptcha
{
	var $amount_letter;//количество символов
	var $general_keycode;//возвращает результат формирования каптчи
    var $letter_color;//цвета букв
    var $bg_letter_color;//цвета фона букв
	
    function dump_array($array)
    {
    if(is_array($array))
    	{
    		$size = count($array);
    		$string = "";
    		if($size)
    		{$count=0;
    			$string.="{";
    			foreach($array as $var => $value)
    			{$string.="$var=$value";
    				if($count++<($size-1))
    				{$string.=", ";}}
    			$string.="}";}
    		return $string;
    	}
    	else
    	{
    		return $array;
    	}
    }
    
	function view_letter($code,$letter_size,$td_size,$sdvig)
	{
	    $arr_bgcolor_letter = explode(',',$this->letter_color);
        $arr_bgcolor = explode(',',$this->bg_letter_color);
		//$arr_bgcolor_letter = array("#07078F","#01354F","#000000","#013E7A","#0C0C42","#013737","#1E0636","#1C1C34","#353546");
		//$arr_bgcolor = array("#D3D3FF","#BBBBBB","#D5DEEF","#BAC2D3","#80C5E7","#B9AEAE","#C9ECEC","#9DBAD7","#EFD5E8","#E1E7CB");
		$arr_yx = explode(";",$code);
		$arr_y = array();
		$arr_x = array();
		$size_of_arr_xy = sizeof($arr_yx);
		for($n=0;$n<$size_of_arr_xy;$n++)
		{
			$arr_y[$n]=substr($arr_yx[$n],0,1); 	
			$arr_x[$n]=substr($arr_yx[$n],1,1)+$sdvig;			
		}
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<?php
		for($i=1;$i<=5*$letter_size;$i++)
		{
			?>
			<tr>
			<td></td>			
			<?php
			for($j=1;$j<=5*$letter_size;$j++)
			{
				$n_color = rand(0,sizeof($arr_bgcolor)-1);
				$bgcolor = $arr_bgcolor[$n_color];
				for($n=0;$n<$size_of_arr_xy;$n++)
				{
					if(($i==$arr_y[$n]) && ($j==$arr_x[$n]))
					{
						$n_color = rand(0,sizeof($arr_bgcolor_letter)-1);
						$bgcolor = $arr_bgcolor_letter[$n_color];	
					}	
				}				
				?>
				<td bgcolor="<?php echo $bgcolor;?>" width="3" height="3"></td>
				<?php	
			}
			?>
			<td></td>
			</tr>
			<?php
		}
		?>
		</table>
		<?php		
	}
	
	function get_get_robot_code()
	{
	        global $wpdb;
            //echo $this->amount_letter;
            $table_name = $wpdb->prefix . "antibot_codes";
			$general_keycode="";
			//$db = new db_mysql();
			//$db->trashdb_sql(); $db->connect();
			$query_string="select symbol,code from " . $table_name;			
			$result=$wpdb->get_results($query_string,'ARRAY_A');
            //echo $this->dump_array($result)."<br>";                                   						
			$amount_rec = $wpdb->num_rows;
            //echo $amount_rec;            
			$arr_symbols=array();
			if($amount_rec>0)
			{
                $j=-1;
	           foreach($result as $main_arr)
    			{
    			     
                     $j++;                
    			     //echo "main_arr: ".$this->dump_array($main_arr)."<br>";
                     //echo $j; 
    			     $arr_symbols[$j] = array($main_arr["symbol"],$main_arr["code"]);
                     
    			}
			}
			
			//echo "arr_symbols: ".$this->dump_array($arr_symbols)."<br>";
            $size_of_main_arr = sizeof($arr_symbols);
            //echo "size".$size_of_main_arr;
			
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<tr>
		<?php
			for($j=1;$j<=$this->amount_letter;$j++)
			{
				?>
				<td>
				<?php
				$random_letter = rand(0,$size_of_main_arr-1);
				$arr_letter = $arr_symbols[$random_letter];
				$this->general_keycode.=$arr_letter[0];
				$letter_size = rand(1,1);
				$td_size = rand(3,3);
				$sdvig=0;
				$this->view_letter($arr_letter[1],$letter_size,$td_size,$sdvig);				
				?>
				</td>
				<?php				 	
			}
            //echo $this->general_keycode; 			
		?>		
		</tr>
		</table>
		<?php													
	}
}
?>


Настройки плагина в wordpress будут выглядеть как:


Установка html-Captcha
  • 1. Скопируйте папку html-Captcha из архива в директорию плагинов вашего сайта(Например: wp-content/plugins)
  • 2. Со страницы установки плагинов в административной панели WordPress активируйте плагин
  • 3. Войдите на страницу настроек плагина и установите требуемые параметры(по умолчанию они уже заданы, если не уверены то не трогайте их)
  • 4. Откройте файл comments.php из архива и скопируйте в буфер обмена весь код который в нем написан.
  • 5. Вставьте только что скопированный код в файл comments.php вашего шаблона в том месте где прописана кнопка SUBMIT(«Отправить»)
  • 6. Вставьте код в самое начало файла wp-config.php, находящийся в корневой папке wordpress


Вот такой код Captcha получается на странице после формирования.

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Может быть и оптимизировать можно как то.
Готовый плагин для для wordpress лежит тут: html-captcha
Пользуйтесь.

PS. Интересны конструктивные комментарии. Каптчу на хабре смог пройти с третьего раза. ;)

Tags:
Hubs:
Total votes 21: ↑13 and ↓8+5
Comments38
3
Karma
0
Rating
@NjabuloJahra

User

Send message

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr