XHTML - <b (event)="..."> Bold Text Tag with Events
Definition
See <b> </b> Bold Text for basic information about this tag.
Events
onclick
onclick is an event that can be attached to the bold text element. If onclick is added to the bold text then when the mouse is held over the bold text and clicked, the instructions shown in onclick="..." will be carried out.
The bold text element in the first paragraph of the following example will change color when it is clicked. It will only change color once. If you want to see the effect again, you will have to reload the page.
When the bolt text in the second paragraph is clicked an alert box will open.
Example
<p>When you click on the <b onclick="this.style.color='#00CC00';">bold text</b> in this paragraph it will change color.</p>
<p>When you click on the <b onclick="alert('You clicked the bold text');">bold text</b> a javascript function is called that opens an alert window.</p>
Output
When you click on the bold text in this paragraph it will change color.
When you click on the bold text a javascript function is called that opens an alert window.
ondblclick
ondblclick is an event that can be attached to the bold text element. If ondblclick is added to the bold text then when the mouse is held over the bold text and double clicked, the instructions shown in ondblclick="..." will be carried out.
The bold text element in the following example will change color when it is double clicked. It will only change color once. If you want to see the effect again, you will have to reload the page.
Example
<p>When you double click on the <b ondblclick="this.style.color='#0000CC';">bold text</b> in this paragraph it will change color.</p>
Output
When you double click on the bold text in this paragraph it will change color.
onmousedown, onmouseup
onmousedown and onmouseup are events that can be attached to the bold text element. If onmousedown is added to the bold text then when the mouse is held over the bold text and clicked, the instructions shown in onmousedown="..." will be carried out. If onmouseup is added to the bold text then when the mouse is held over the bold text and released, the instructions shown in onmouseup="..." will be carried out.
The bold text element in the following example will change color when the mouse is held down or released, but only if the mouse is over the text. Try pushing the mouse up or down on and off the bold text and moving the mouse between the click and release on and off the bold text.
Example
<p>When you click on the <b onmousedown="this.style.color='#FF0000';" onmouseup="this.style.color='#000000';">bold text</b> in this paragraph it will change color. When the mouse is released the color will change back.</p>
Output
When you click on the bold text in this paragraph it will change color. When the mouse is released the color will change back.
onmouseover, onmouseout
onmouseover and onmousedown are events that can be attached to the bold text element. If onmousedown is added to the bold text then when the mouse is moved over the bold text, the instructions shown in onmouseover="..." will be carried out. If onmouseout is added to the bold text then when the mouse is moved off the bold text, the instructions shown in onmouseout="..." will be carried out.
The bold text element in the following example will change color when the mouse is moved on and off the bold text.
Example
<p>When you move the mouse over the <b onmouseover="this.style.color='#FF00FF';" onmouseout="this.style.color='#000000';">bold text</b> in this paragraph it will change color. When the mouse is moved out of the bold text the color will change back.</p>
Output
When you move the mouse over the bold text in this paragraph it will change color. When the mouse is moved out of the bold text the color will change back.
Other events
These events can also be attached to a bold text tag. No examples are provided:
- onmousemove
- onkeypress
- onkeydown
- onkeyup
BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:
- Link to us
- Tell a friend
- Correct any you might find
- Make for improvement
- Make a donation
BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.
For further information please review our Terms of Use and Privacy Policy.
Copyright 2005-2008 CrystalClearWeb.net. All rights reserved.
