Jump to content

What coding language should I look into?


Recommended Posts

Hi again PHP Freaks.

So I would like to code something similar to the buy menu of Counter-strike: Global offensive in-game module, just in a browser and for a project of mine. I've made the design in photoshop to illustrate better.

I just don't know what I should look into to make this kind of menu, I would love if someone could explain me what languages that this would require. (I'm guessing HTML, CSS and jQuery but I am not sure) more specific help like which particular codes would be much appreciated.


Here is a picture of what I would like to create. (Also attached)




Link to comment
Share on other sites

  • 2 weeks later...

If you want mouse events and highlighting etc then you you could use that image as a background to an overlaying vector (SVG) image. This allows you you apply ids and classes to the vector objects (circles, circle segments, rectangles etc.) and use javascript as you would on other page elements.

Link to comment
Share on other sites

Further to my previous post, here is an example using an SVG overlay (assumes your image is "keys.png" and is in the same folder)

function segments($cx,$cy,$rad) 
    $off = 23;
    $segs = array (
                1 => array($off, -$off),
                2 => array(-$off, -$off),
                3 => array(-$off, -$off),
                4 => array(-$off, $off),
                5 => array($off, $off),
                6 => array($off, $off)
    $prevtheta = deg2rad(-35);
    $x1 = $cx + $rad * cos($prevtheta);
    $y1 = $cy - $rad * sin($prevtheta);
    $cumval = 0;
    $vals = array(1=>68,56,56,68,56,56);
    $total = array_sum($vals);
    foreach ($vals as $k=>$n) {
        $cumval += $n;
        $theta = deg2rad($cumval/$total * 360-35);
        $x = $cx + $rad * cos($theta);
        $y = $cy - $rad * sin($theta);
        $cy1 = $cy + $segs[$k][0];
        $cy2 = $cy + $segs[$k][1];
        $svg .= "<path class='segment' d='M $cx $cy1 L $x1 $y1 A $rad $rad 0 0 0 $x $y L $cx $cy2 Z'  data-segment='$k'/>\n";
        $x1 = $x;
        $y1 = $y;
        $prevtheta = $theta;
    return $svg;
<style type="text/css">
.segment {
    stroke: none;
    stroke-width: 2px;
    fill: #eee;
    fill-opacity: 0;
    cursor: pointer;
.segment:hover {
    fill-opacity: 0.1;
#bullseye:hover {
    fill-opacity: 0.5;
    fill: #f66;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".segment").click(function() {
            var seg = $(this).data("segment");
            // click actions for segments
            switch (seg) {
                case 0: 
                case 1: 
                case 2: 
                case 3: 
                case 4: 
                case 5: 
                case 6: 
        <svg width='621' height='502' viewBox='0 0 621 502'>
        <image x="0" y="0" width="621" height="408" xlink:href="keys.png" />
        <circle id='bullseye' class='segment' cx="310" cy="191" r="35" data-segment='0' />
Edited by Barand
Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

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

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.