Member Avatar for mickeyfitzray

Hi,

Im trying to create a button that will perform different functions depending on what part of the button you click. The button will be a diamond shape with six different regions on it that will perform different actions (play, pause, volume up/down etc). Does anyone know any good sites where I can get help with this as Im not sure where to start.

Thanks.

  • 2 Contributors
  • 1 Reply
  • 420 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by plazmo

Dani AI

Generated

For the diamond-with-six-actions idea from , and noting ’s WinForms/Region suggestion (excellent for desktop apps), the most robust web approach is SVG: it gives precise, scalable hit regions, per-region events, and keyboard/focus control. Alternatives are CSS clip-path (multiple elements), an HTML image map (quick but hard to style/accessify), or Canvas with manual hit-testing (useful for highly custom visuals).

Below is a compact, practical SVG pattern: the outer diamond is a 6-vertex polygon and the control is split into six triangular wedges (center → adjacent vertex pairs). Each wedge is a focusable element (tabindex + role) with click and keyboard handling. The viewBox keeps it responsive; CSS and pointer-events ensure hits work even when fills are transparent.

<!-- Diamond split into six interactive wedges (SVG) -->
<svg viewBox="0 0 100 100" width="200" height="200" style="display:block;">
  <polygon points="50,5 80,30 80,70 50,95 20,70 20,30"
           fill="#f3f3f3" stroke="#333" stroke-width="1"/>

  <g id="regions" fill-opacity="0" style="pointer-events:all">
    <polygon class="region" id="r1" points="50,50 50,5 80,30" tabindex="0" role="button" aria-label="Play"/>
    <polygon class="region" id="r2" points="50,50 80,30 80,70" tabindex="0" role="button" aria-label="Next"/>
    <polygon class="region" id="r3" points="50,50 80,70 50,95" tabindex="0" role="button" aria-label="VolUp"/>
    <polygon class="region" id="r4" points="50,50 50,95 20,70" tabindex="0" role="button" aria-label="Pause"/>
    <polygon class="region" id="r5" points="50,50 20,70 20,30" tabindex="0" role="button" aria-label="VolDown"/>
    <polygon class="region" id="r6" points="50,50 20,30 50,5" tabindex="0" role="button" aria-label="Prev"/>
  </g>
</svg>

<style>
  .region { cursor: pointer; transition: fill-opacity .12s; fill:#007acc; fill-opacity:0; }
  .region:focus, .region:hover { fill-opacity:.14; outline:none; }
</style>

<script>
  document.querySelectorAll('.region').forEach(el=>{
    el.addEventListener('click', ()=>handle(el.id));
    el.addEventListener('keydown', e=>{
      if(e.key==='Enter' || e.key===' ') { e.preventDefault(); handle(el.id); }
    });
  });

  function handle(id){
    const map = { r1:'play', r2:'next', r3:'volUp', r4:'pause', r5:'volDown', r6:'prev' };
    console.log('action:', map[id]);
    // call real functions here (play(), pause(), etc.)
  }
</script>

Notes and troubleshooting:

  • If shapes seem unclickable, ensure fills aren’t fully removed; using fill-opacity:0 with pointer-events:all is reliable.
  • Avoid tiny touch targets—aim for ~44px at typical rendering sizes or add padding around the SVG.
  • Handle overlapping edges carefully: small intentional overlaps prevent 1px dead seams.
  • Add ARIA state (aria-pressed, aria-controls) and map Enter/Space to actions for keyboard users.
  • For a desktop app, ’s Region/OnPaint approach remains the right pattern; for the web, SVG gives best combination of precision and accessibility.
Member Avatar for plazmo

I suggest you create a control with 4 seperate buttons for each function, but then draw them together so it looks like one button.

below is code that makes a button look like a circle. this should be the onPaint function for the button. it shouldnt be to difficult to edit this to work for you

// This method will change the square button to a circular button by 
		// creating a new circle-shaped GraphicsPath object and setting it 
		// to the RoundButton objects region.
		private void roundButton_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
		{

			System.Windows.Forms.Button tButton = (System.Windows.Forms.Button)sender;
			

			System.Drawing.Drawing2D.GraphicsPath buttonPath = 
				new System.Drawing.Drawing2D.GraphicsPath();

			
			// Set a new rectangle to the same size as the button's 
			// ClientRectangle property.
			System.Drawing.Rectangle newRectangle = tButton.ClientRectangle;
			
			// Decrease the size of the rectangle.
			newRectangle.Inflate(-10, -10);
        
			// Draw the button's border.
			e.Graphics.DrawEllipse(System.Drawing.Pens.Black, newRectangle);

			// Increase the size of the rectangle to include the border.
			newRectangle.Inflate( 1,  1);


			// Create a circle within the new rectangle.
			buttonPath.AddEllipse(newRectangle);
                
			// Set the button's Region property to the newly created 
			// circle region.
			tButton.Region = new System.Drawing.Region(buttonPath);

		}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.