Aim: Program on a concept of text rollover

Aim : program on a concept of text rollover

Photo by Daniel Korpai on Unsplash

Requirement :

1. Working PC or Laptop ,
2. Installed any operating system
3. Any browser (Google Chrome)
4. Any code Editor(VS Code)

Theory:

What Does Rollover Mean?

Rollover is a JavaScript technique used by Web developers to produce an effect in which the appearance of a graphical image changes when the user rolls the mouse pointer over it. Rollover also refers to a button on a Web page that allows interactivity between the user and the Web page. It causes the button to react by either replacing the source image at the button with another image or redirecting it to a different Web page.

Rollover is triggered when the mouse moves over the primary image, causing the secondary image to appear. The primary image reappears when the mouse is moved away.

Occasionally, rollover is referred to as synonym for mouseover.

Some of the key features of rollover include:

• Enables interaction between the user and the Web page
• Makes an image appear or disappear when the mouse is moved over it
• Makes a hidden image or element to appear when the mouse is moved over it
• Makes an element of the page change the color of the entire Web page when the mouse is moved over it
• Causes text to pop up or become highlighted with bold colors when the mouse is moved on a text element.

Image swapping

The earliest rollovers used JavaScript to swap one [img](https://htmldog.com/references/html/tags/img/) element with another. Then CSS came along and, using :hover, we could more easily change a background image used in place of a text link. Cleaner, simpler, more semantic, and nice and accessible

Fade in / fade out

CSS won’t let you change the opacity of background images. If it did, you could apply two background images to a link and change the opacity of one from transparent to solid on hover. Accompanied by a cheeky transition this would achieve a smooth fade-in / fade-out effect.

Other options

There are plenty of rollover noodling opportunities that don’t involve swapping images. When a link is hovered over you could, for example, change its shape by manipulating [border-radius](https://htmldog.com/references/css/properties/border-radius/), rotate it with transformations and go wild with all kinds of animations using transitions.

Conclusion: We can conclude that we have successfully implemented the program on a concept of text rollover.

Result: Finally, we have successfully implemented program on a concept of text rollover.

See other practicals