JSFiddle - React, Tailwind, and code Playground

by tyage

HTML

<p>
    <a href="http://www.pixiv.net/mypage.php" target="_blank" id="pixiv">click here</a>
</p>

<p>this is my original captcha. click red area.</p>

<div id="pixiv-links"></div>

CSS

#pixiv-links {
    position: relative;
}
#pixiv-links a {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: yellow;
}
#pixiv-links a:hover {
    border: 1px solid black;
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
    z-index: 2;
}
#pixiv-links a:visited {
    background: red;
}

JavaScript

$(function() {
    var minID = +prompt("あなたのpixivID - 好きな4桁の数字を入力してください")
    var str = ""
    var width = 100
    var height = 100
    for (var x=0;x<width;++x) {
        for (var y=0;y<height;++y) {
            id = minID + x + y * width
            str += "<a style='top:" + (x * 5) + "px;left:" + (y * 5) + "px;' href='http://www.pixiv.net/mypage.php#id=" + id + "'></a>"
        }
    }
    $("#pixiv-links").html(str)
    
    $('#pixiv-links a').click(function() {
        var id = $(this).attr('href').split('=')[1]
        alert('your pixiv id is ' + id + "?")
    })
})