Because Joomla permits user-edited hypertext markup language code, you can use custom HTML to add special effects to your site. One easy effect to add is the hover button, also referred to as the mouse-over button. By adding a hover effect, your button images will change each time your website visitor hovers his mouse over the image. To make the hover effect work, choose two button images you want to use. The first image will appear before the mouse-over. The second image appears afterward.
Instructions
- 1Log in to your Jooma administration Control Panel.
- 2Click “Media Manager.”
- 3Click “Upload” to upload your two button images from your computer's hard drive to your Web hosting server. Write down the file name for the uploaded image. For example, “http://www.yourdomain.com/yourpicture1.jpeg” and “http://www.yourdomain.com/yourpicture2.jpeg.”
- 4Click “Site” from the top navigation menu. Select “Control Panel” to return to the main portal page.
- 5Click “Article Manager” to view a list of your site pages.
- 6Click the radio box located beside the page to which you wish to add a hover button. Click “Edit” to open the page editor.
- 7Click “HTML” from the page editor toolbar to launch an HTML version of the editor.
- 8Locate the “<body>” and “</body>” tags inside the editor window.
- 9Insert the following HTML code anywhere between the two body tags. Position the code exactly where you want your hover button to appear. Be sure to replace the generic image file names with your real image file names.<a href= http://www.yourdomain.com onMouseOver= "if (document.images) document.yourpicture1.src= 'http://www.yourdomain.com/yourpicture2.jpeg';" onMouseOut= "if (document.images) document.yourpicture1.src= 'http://www.yourdomain.com/yourpicture1.jpeg';"><img src="http://www.yourdomain.com/yourpicture1.jpeg" name=yourpicture1 border=0></a>
- 10Click the “Update” button located at the bottom of the editor window.
- 11Click “Save” to save the changes the changes to your page.
- 1
