Jump to content
Sign in to follow this  
Dart990

Помогите проапгрейдить капчу

Recommended Posts

Есть капча с ajax, при наведении на картинку появляется под ней иконка подсказывающая что если кликнуть на саму капчу то картинка поменяется, задача сделать чтоб иконка всегда была видимой, и если как то можно, сделать её тоже кликабельной как капчу и при клике на неё чтоб капча тоже обновлялась.

 

0b136c96ef4e.jpg

 

Помогите пожалуйста с данной задачей кому не сложно. Ниже код:

 

Часть кода из common.js

$(document).ready(function() {
	
	var browser=navigator.appName;

		var refreshImgPath = 'image/capcha/refresh.png';
		var capchaBlock = $('img[src="index.php?route=information/contact/captcha"], img[src="index.php?route=product/product/captcha"], img[src="index.php?route=account/return/captcha"]');
		
		capchaBlock.hover(
			function() {
				var capchaBlockPosition = capchaBlock.position();
				var capchaBlockLeftMargin = capchaBlock.width() / 2 - 10;
				var capchaBlockTopMargin = capchaBlock.height() + 5;
				$('body').append('<img id="refreshIcon" src="'+refreshImgPath+'" style="position: absolute; z-index: 10; left: '+ capchaBlockPosition.left +'px; top: '+ capchaBlockPosition.top +'px; margin-left: '+capchaBlockLeftMargin+'px; margin-top: '+capchaBlockTopMargin+'px" />');
				$(this).animate({'opacity': '1'}, 300);
			}, 
			function() {
				$('#refreshIcon').remove();
				$(this).animate({'opacity': '1'}, 300);
			}
		);

		capchaBlock.css({
			'cursor': 'pointer',
			'position': 'relative'
		});
		
		capchaBlock.click(function() {
		
			$.get('index.php?route=checkout/cart/add', function(data) {		
				capchaBlock.attr('src', 'index.php?route=information/contact/captcha&rand='+ Math.round((Math.random() * 10000 )));				
			});
		});
});

Captcha.php

<?php

class Captcha {

	protected $fontName = 'x.ttf';
	protected $darkFont = false; // dark or light font?
	protected $length = 5; // code length
	protected $images_list = 5; // how many images do u have?
	
	protected $code;
	protected $bg_image;
	protected $font;
	
	function __construct() { 
		$this->code = substr(sha1(mt_rand()), 17, $this->length); 
		$this->bg_image = $this->getImg();
		$this->font = $this->getFont();
	}

	function getCode(){
		return $this->code;
	}
	function getImg() {
		return DIR_IMAGE."capcha/". rand(1, $this->images_list) .".jpg";
	}
	function getFont() {
		return DIR_IMAGE."capcha/". $this->fontName;
	}
	function getDarkColor() {
		return rand(0, 100);
	}
	function getLightColor() {
		return rand(150, 255);
	}
	function showImage() {
		
		$image = imagecreatefromjpeg($this->bg_image);
	
        $width = imagesx($image); 
        $height = imagesy($image);
		
        $borderColor = imagecolorallocate($image, 0, 0, 0); 

        imagefilledrectangle($image, 0, 0, $width, 0, $borderColor); 
        imagefilledrectangle($image, $width - 1, 0, $width - 1, $height - 1, $borderColor); 
        imagefilledrectangle($image, 0, 0, 0, $height - 1, $borderColor); 
        imagefilledrectangle($image, 0, $height - 1, $width, $height - 1, $borderColor); 
         
		$i = 0;
		foreach (str_split($this->code) as $letter) {
			$i++;
			
			if ($this->darkFont) {
				$randomColor = imagecolorallocate($image, $this->getDarkColor(), $this->getDarkColor(), $this->getDarkColor()); 
			} else {
				$randomColor = imagecolorallocate($image, $this->getLightColor(), $this->getLightColor(), $this->getLightColor()); 
			}
			
			$spacing = rand(13, 18);
			imagettftext($image, 14, rand(-20, 20), intval(($width - (strlen($this->code) * $spacing)) / strlen($this->code) + ($i * $spacing)), intval(($height + 10) / 2), $randomColor, $this->font, $letter);
			unset($randomColor);
			
		}
	
		header('Content-type: image/jpeg');

		
		imagejpeg($image, NULL, 100);
		
		imagedestroy($image);		
	}
}
?>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.