rec0il Posted November 5, 2014 Share Posted November 5, 2014 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) http://i1227.photobucket.com/albums/ee433/rec0ill/CSGOKeyz_zps4195288a.png Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/ Share on other sites More sharing options...
cyberRobot Posted November 5, 2014 Share Posted November 5, 2014 Have you looked into using HTML image maps? More information can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1495778 Share on other sites More sharing options...
rec0il Posted November 5, 2014 Author Share Posted November 5, 2014 (edited) Have you looked into using HTML image maps? More information can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map Had it in my mind, but would it be possible to make the area of my map tag, highlight on mouseover too? Can't really seem to get it working this way Edited November 5, 2014 by rec0il Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1495816 Share on other sites More sharing options...
Barand Posted November 13, 2014 Share Posted November 13, 2014 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. Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1496526 Share on other sites More sharing options...
ignace Posted November 14, 2014 Share Posted November 14, 2014 Search for "js|jquery radial menu" it shows quite a few available code samples or available plugins to use directly. Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1496545 Share on other sites More sharing options...
Barand Posted November 15, 2014 Share Posted November 15, 2014 (edited) 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) <?php 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) ); $svg=''; $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; } ?> <html> <head> <title>sample</title> <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; } </style> <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: alert("Zero"); break; case 1: alert("One"); break; case 2: alert("Two"); break; case 3: alert("Three"); break; case 4: alert("Four"); break; case 5: alert("Five"); break; case 6: alert("Six"); break; } }) }) </script> </head> <body> <div> <svg width='621' height='502' viewBox='0 0 621 502'> <image x="0" y="0" width="621" height="408" xlink:href="keys.png" /> <?=segments(310,191,181)?>; <circle id='bullseye' class='segment' cx="310" cy="191" r="35" data-segment='0' /> </svg> </div> </body> </html> Edited November 15, 2014 by Barand Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1496634 Share on other sites More sharing options...
NetKongen Posted November 18, 2014 Share Posted November 18, 2014 You could use Flash, even though its not good for SEO. Quote Link to comment https://forums.phpfreaks.com/topic/292278-what-coding-language-should-i-look-into/#findComment-1496860 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.