With the millions of websites on the Internet, it is essential that your website be memorable and unique. One technique used to add a dynamic effect to websites is rollover images, also known as rollover buttons. Essentially, when the visitor rolls over an image, it will change to something else. When the user rolls off the image, it will return to the original graphic. Common rollovers include subtle effects such as changing the colour of the image or the typeface. You can create your own rollover image with basic HTML formatting in various web-design programs.
- Skill level:
Other People Are Reading
Things you need
- Photo-editing software
- Web-design software
Create a new document of the desired size in pixels in photo-editing software such as Photoshop. Create the button and rollover images. The two images must be identical in size.
Save both images separately by navigating to the "File" menu and clicking "Save." Save the images as either JPEG, GIF or PNG files. Although JPEG and GIF files are more commonly used, PNG files retain transparency. Ensure that you save the image in your website's local root folder.
Open the desired web design software, such as Adobe Dreamweaver. Click the refresh button in your library to update the website's library and local root folder. Locate the images in the local root folder.
Switch to the web page's "Code View" by selecting the Code View button.
Type "<a href=" http://yourwebsite.com "><img src=" IMAGE1" onmouseover="this.src=' IMAGE2 '" onmouseout="this.src=' IMAGE1 '" alt="Click Me"></a>" without the opening and closing quotation marks into the code.
Replace "http://yourwebsite.com" with the name of your website. Replace "IMAGE1" and "IMAGE2" with the name of your button and rollover images. Your rollover image will replace "IMAGE2," while "IMAGE1" stands for the initial button image.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for