Есть капча с ajax, при наведении на картинку появляется под ней иконка подсказывающая что если кликнуть на саму капчу то картинка поменяется, задача сделать чтоб иконка всегда была видимой, и если как то можно, сделать её тоже кликабельной как капчу и при клике на неё чтоб капча тоже обновлялась.
Помогите пожалуйста с данной задачей кому не сложно. Ниже код:
Часть кода из 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);
}
}
?>