Maharashtra's Most Trusted

with more than 0 members

Chapter 5 - Regular Expression, Rollover & Frames

PART 2

Frames in HTML -: 

In HTML, frames allow you to display multiple HTML documents within one browser window. Each document is contained in a “frame” or a section of the browser. However, it’s important to note that the use of frames has become outdated and is generally discouraged in modern web design in favor of newer methods such as iframes or layout techniques like CSS Flexbox and Grid. Still, here’s an explanation of frames in HTML:

1. The <frameset> Tag

Instead of using the <body> tag to define the body of a webpage, frames use the <frameset> tag to define how the screen should be divided into multiple sections (or frames).

This will divide the page into two horizontal frames. The first frame will display the top.html document, and the second frame will display the bottom.html document.

  • rows: Defines the horizontal division of the window (in this case, 50% for each row).
  • cols: You can also divide the window vertically using the cols attribute.

The <frame> Tag

The <frame> tag specifies the content of each frame. You can link each frame to a different HTML document or content using the src attribute.

Attributes of <frame>

Some useful attributes for the <frame> tag are:

  • src: The source of the content.
  • name: Specifies a name for the frame, which can be used to target links.
  • scrolling: Can be set to yes, no, or auto to control whether a scrollbar should appear in the frame.
  • noresize: Prevents the user from resizing the frame.
Calling a child window -: 

Calling a child window within a frame involves opening a new browser window or tab from one of the frames, usually using JavaScript. This technique is common when you want a link or action in a frame to open content in a new window, separate from the current frameset.

Here’s how it works, including the typical scenarios and the process for communicating between a parent window (the frame) and a child window (the new window).

Steps for Calling a Child Window from a Frame

  1. Creating the Frameset: You define your frameset as usual, and one of the frames contains a button or link that will trigger a child window (popup).

  2. Opening a Child Window: Using JavaScript, you can open a new window (child window) from the frame by calling the window.open() method.

  3. Interaction Between Parent Frame and Child Window: You can use JavaScript to interact between the frames (parent window) and the newly opened child window.

 
 

Key Points to Remember

  • window.open() opens a new browser window.
  • window.opener allows a child window to reference and interact with its parent.
  • You can pass data between the parent (frame) and child windows, enabling complex interactions.
  • Make sure to handle the window closing or refreshing behavior properly, as browsers sometimes block popups or close child windows unexpectedly.
Rollover -: 

A rollover in web design refers to a visual or interactive effect that occurs when the user moves their mouse pointer over a particular element on a webpage, such as an image, button, or link. Rollovers are commonly used to enhance user experience by providing feedback (e.g., changing color, highlighting, or displaying additional information) when a user interacts with an element.

Types of Rollovers

  1. Image Rollover: The image changes when the user hovers over it (e.g., swapping an image with another).
  2. CSS Rollover: Changes are applied to an element’s styling, such as color, size, or visibility, using CSS on hover.
  3. JavaScript Rollover: Dynamic effects, including more complex interactions, are created using JavaScript.

In web development, mouseover and mouseout events are commonly used for implementing rollover effects. These events are triggered when the user hovers their mouse pointer over an element (mouseover) and when the pointer leaves the element (mouseout). These events can be handled using JavaScript to create dynamic interactions, such as changing images, showing tooltips, or modifying styles.

Understanding mouseover and mouseout

  • mouseover: This event occurs when the mouse pointer enters the area of an HTML element. It is typically used to trigger some effect, such as changing an image, highlighting a button, or displaying a tooltip.

  • mouseout: This event occurs when the mouse pointer leaves the area of an HTML element. It is commonly used to revert the changes made during the mouseover event, like switching an image back or removing the highlight.

Example 1: Simple Image Rollover with mouseover and mouseout

In this example, we will swap an image when the user hovers over it and revert it back when the user moves the mouse away.


CSS Chapter 5 Assignment -------->

Chapter 5 Assignment - Regular Expression, Rollover & Frames

Explore Other Chapters

Chapter 1 Notes - Basics of Java Script Programming
Chapter 2 Notes - Array, Function & String
Chapter 3 Notes - Form & Event Handling
Chapter 4 Notes - Cookies & Browser Data
Chapter 5 Notes - Regular Expression, Rollover & Frames
Chapter 6 Notes - Menus, Navigation & Webpage Protection