How to | Make Dynamic Graphics
The graphics language of the Wolfram Language is fully integrated with dynamic interactivity. This lets you create graphics that can respond to input devices in a variety of ways.
Begin by using Graphics to create a Disk:
The Wolfram Language lets you embed tooltips in graphics. Tooltips are a great way to add annotations to your graphics.
Use Tooltip inside Graphics to embed a tooltip in the disk. Mouseover the disk to reveal the tooltip:
Other mouseover features can also be added to graphics.
For example, use Mouseover to make the disk turn red when you mouseover it:
You can also handle mouse clicks inside a graphic by using Button around the disk. Clicking on the disk here produces an audible beep:
The Wolfram Language even lets you create hyperlinks from a graphic. Clicking the disk here takes you to the homepage of Wolfram Research:
By placing Dynamic in the appropriate position inside the Graphics expression, you can create a graphic that updates when the mouse pointer is moved inside the graphic.
For example, move your mouse pointer over the frame here. The disk dynamically re-centers itself on your mouse pointer. MousePosition is used inside Dynamic to give the position of the mouse wherever it is moved:
This graphic will update when the mouse pointer is over any graphic. If you move your mouse over the disk that is also a hyperlink, you will see that the framed disk moves within the frame to follow your mouse pointer.
If you do not want the graphic to behave this way, constrain the mouse position to trigger only when it is inside that specific enclosing graphic.
For example, moving your mouse pointer over the graphic here causes the position of the disk in both framed graphics to match. However, the reverse is not true. In fact, mousing over any of the above graphics does not cause the position of the disk here to change: