Button

One of the most basic elements for an interactive image is a button. Arguably any element associated with an onmouseup() event can be considered a button (note that buttons tend to be activate when the mouse button is released, not when it is first pressed down).

To make something that looks a bit like a button, we can draw a rectangle (possibly with rounded corners) and write some text on it. We can then group these elements with the <g> tag and add the onmouseup() event to them both.

<script type="text/ecmascript"> 
<![CDATA[
  function buttonClick(evt)
  {
    alert('Click');
  }
]]></script> 
 
<g onmouseup="buttonClick(evt)">
  <rect x="20" y="1" rx="5" ry="5"
        width="52" height="22"/>
  <text x="25" y="16">Button</text>
</g>

This basic design is far from perfect - for one thing, if it weren't for the label, it might not be obvious that it even is a button.

The main problem is the way the cursor changes when it moves over the text element. To fix this, we set the cursor attribute of the group to 'pointer'. We can also make it more obviously a button by adding a hover effect.

<style> 
  g.button:hover{
    opacity: 0.75;
  }
</style>

<g class="button" cursor="pointer"
   onmouseup="buttonClick(evt)">
  <rect x="20" y="1" rx="5" ry="5"
        width="52" height="22"/>
  <text x="25" y="16">Button</text>
</g>

Other options for the cursor attribute include:

  • default
  • crosshair
  • move
  • text
  • wait
  • help
  • e-resize (resize eastwards, also w-, s-, n-, ne-, nw-, se- and sw-resize)

 

Comments

Hi, is it possible with the button element to make another path visible or hidden?
Greets
Martin

Hi Martin,

You can do that by changing the click function to something like:

document.getElementById('target_id').setAttributeNS(null, 'visibility', 'hidden');

Post new comment

The content of this field is kept private and will not be shown publicly.