How to Make an Image Rollover
The term image rollover refers to the technique of changing an image display on a web page when the end-user mouses over a picture or image embedded on a web page. When you program a web page to contain a rollover image, two pictures are commonly used for the effect. One of the images is displayed when the web page is loaded in the user's web browser, and the second image is displayed when the mouse is positioned over the image. The JavaScript method “onMouseOver” is invoked when the mouse is positioned over the picture and the method “onMouseOut” when the cursor leaves the surface area of the image. The methods can be invoked via the attributes of the <a> tag or defined in the <head> tag of the web page. The following exampled demonstrates how to create image rollovers in the <a> tag of a web page.
How to Make Image Rollovers
Step 1 – Open the web page that you intend to add an image rollover effect on in your HTML autoring program or in a text editor to an existing web page.
Step 2– Enter the following code to embed a hyper linked image on the web page:
<a href=”http://www.mywebpagelink.com”><IMG src=”http://www.mywebpage.com/image1.jpg”></a>
This code will include an image hyperlinked to a link of your choice on the page.
Step 3 – Enter the following attribute inside of the “<A>” HTML tag in order to define the image to display when the mouse is rolled ontop of the displayed image:
ONMOUSEOVER='rollover.src=”http://www.mywebpage.com/imagenew.jpg” '
This code will display the new image when the user mouses over the displayed image on the webpage.
Step 4 – Enter the following attribute after the ONMOUSEOVER attribute entry to define the image to display when the mouse cursor leaves the display area of the image on the web page:
ONMOUSEOUT='rollover.src=”http://www.mywebpage.com/image1.jpg” '
Step 5 – Verify that the rollover image code appears similar to the following code. Realize that the hyper link and image links should be modified to match code to live images and links on your webpage:
<a href=”http://www.mywebpagelink.com” ONMOUSEOVER=‘rollover.src=“http://www.mywebpage.com/imagenew.jpg” ’ ONMOUSEOUT=‘rollover.src=“http://www.mywebpage.com/image1.jpg” ’><IMG src=”http://www.mywebpage.com/image1.jpg”></a>
Step 6 – Save and view the web page in your web browser to confirm the image rollover has the desired effect.
Note that if you use an integrated development environment to author web pages, that you may have automated functions available to create image rollovers on web pages. The above instructions can be used to manually create image rollovers directly in the HTML text of a web page.
|
|
- How to Use Google Advanced Image Search
For most web surfers, searching for information is incredibly easy using search engines such as Google. Since the early/mid 90s,when the web started to become a popular place for posting and searching for information, the main type of info was text based. Most search engines would immediately return a list of web sites that had [...]...
- How to Create a Drive Image
Hard drives are designed to contain and keep amounts of files that will be of great use. Although technologically made, hard drives are subject to fail or crash. They may operate perfectly in a given period of time, but because of the fact that they are not created equal, there's always a great possibility for [...]...
- Image Spamming
Image spamming is a new method of email spamming. The text is imbedded in image or picture files, which most anti-spam software ignore. They are not detected as spam simply because they are pictures and not text. Blocking image spam is proving difficult, as images and pictures (whether as attachments or embedded in the body [...]...
- How to Burn an ISO Image
An ISO file contains not only files and folders but also the disk file system metadata. This includes boot code, structures, and attributes. This is why burning an ISO image is different from writing files from a CD or DVD. To burn an ISO image, you need a CD or DVD burning program that can [...]...
- How Do You Make a Group on Facebook?
One of the many perks of having a Facebook account is that you can create a group–otherwise known as a fan page or business page–that you can invite people to. In theory, a Facebook group is similar to a Facebook account. There is a feed where you can post updates. You can have photos and [...]...