Scribd Logo
Upload

Welcome to Scribd!

  • rn4 js7

    Uploaded by

    newsneha775
    4 views7 pages
    The document describes an HTML/CSS/JavaScript web page that implements various form events. The page includes elements to demonstrate click, double click, resize, mouseup, mousedown, mouseover, and mouseout events. Code is provided to handle each event type and update the page accordingly, such as changing text for click/double click events, rotating an element for mouse down/up, and switching an image for mouseover/out.

    Original Description:

    practical of javascript

    Original Title

    rn4_js7

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes an HTML/CSS/JavaScript web page that implements various form events. The page includes elements to demonstrate click, double click, resize, mouseup, mousedown, mouseover, and mouseout events. Code is provided to handle each event type and update the page accordingly, such as changing text for click/double click events, rotating an element for mouse down/up, and switching an image for mouseover/out.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views7 pages

    rn4 js7

    Uploaded by

    newsneha775
    The document describes an HTML/CSS/JavaScript web page that implements various form events. The page includes elements to demonstrate click, double click, resize, mouseup, mousedown, mouseover, and mouseout events. Code is provided to handle each event type and update the page accordingly, such as changing text for click/double click events, rotating an element for mouse down/up, and switching an image for mouseover/out.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    PRACTICAL NO: 7

    Create web page to implement Form Events. Part I PROGRAM:


    <html>

    <head>

    <title>Experiment 7</title>

    <style>

    Body

    background-color:babypink;

    background-repeate:no-repeate;

    background-size:cover;

    background-attachment:fixed;

    margin:0;

    padding:0;

    .container

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-gap:10px;

    .eventOutput

    background-color:pink;

    padding:20px;

    margin:20px;

    border:1px solid #ccc;

    border-radius:5px;
    }

    label

    display:block;

    font-weight:bold;

    margin-bottom:5px;

    #single, #double

    width:30%;

    padding:6px;

    margin:8px;

    background-color:black;

    color:#fff;

    border:none;

    border-radius:4px;

    cursor:pointer;

    .resizable-div

    width:200px;

    height:200px;

    border : 5px solid #000;

    resize:both;

    overflow:auto;

    margin:auto;

    #box

    {
    width:150px;

    height:150px;

    margin:auto;

    background:#008000;

    box-shadow:0px 0px 30px rgba(0, 0, 0, 0.8);

    border-radius:10px;

    transition:10s;

    #mainImage

    border:8px solid #414141;

    width:250px;

    height:150px;

    #thumbnails img

    width:150px;

    height:90px;

    margin-right:10px;

    </style>

    </head>

    <body>

    <h1 style="color:black"><center>Practical 7</center>

    <br>

    <center>Form events</center></h1>

    <div class="container">

    <div class="eventOutput" style="text-align:center">

    <h3 style="margin:0">Click and double Click event </h3><br><br><br>


    <input type="button" id="single" onclick="onClick()" value="Single click" style="margin:0">

    <p><b>Selected event : </b><span id="singleMsg"></span></p><br><br>

    <input type="button" id="double" ondblclick="ondbClick()" value="Double click"

    style="margin:0">

    <p><b>Selected event : </b><span id="doubleMsg"></span></p><br><br>

    </div>

    <div class="eventOutput" style="text-align:center">

    <h3 style="margin:0">Resize event</h3><br><br><br>

    <p><b>Drag to resize the div element</b></p>

    <div class="resizable-div" id="resizeDiv" onresize="reSize()">

    <p><b>Resizable Content</b></p>

    </div>

    </div>

    <div class="eventOutput" style="text-align:center">

    <h3 style="margin:0">MouseUp and MouseDown Event</h3><br><br><br>

    <div id="box" onmouseup="mouseUp()" onmousedown="mouseDown()">

    </div>

    </div>

    </div>

    <center>

    <div class="eventoutput" style="text-align:center">

    <h3 style="margin:0">MouseHover and MouseOut Event

    <div id="imageContainer" >

    <img id="mainImage" src="D:\Javascript\main.jpeg" alt="mainImage"></div><br>

    <div id="thumbnails">

    <img id="img1" src="D:\Javascript\tony.jpeg" alt="thumbnail 1"

    onmouseover="onmouseOver('D:\Javascript\tony.jpeg')"

    onmouseout="onmouseOut()">

    <img id="img2" src="D:\Javascript\thor.jpeg" alt="thumbnail 2"


    onmouseover="onmouseOver('D:\Javascript\thor.jpeg')"

    onmouseout="onmouseOut()">

    <img id="img3" src="D:\Javascript\nat.jpeg" alt="thumbnail 3"

    onmouseover="onmouseOver('D:\Javascript\nat.jpeg')"

    onmouseout="onmouseOut()">

    <img id="img4" src="D:\Javascript\clint.jpeg" alt="thumbnail 4"

    onmouseover="onmouseOver('D:\Javascript\clint.jpeg ')"

    onmouseout="onmouseOut()">

    <img id="img5" src="D:\Javascript\cap.jpeg" alt="thumbnail 5"

    onmouseover="onmouseOver('D:\Javascript\cap.jpeg')"

    onmouseout="onmouseOut()">

    <img id="img6" src="D:\Javascript\bb.jpeg" alt="thumbnail 6"

    onmouseover="onmouseOver('D:\Javascript\bb.jpeg')"

    onmouseout="onmouseOut()">

    </div>

    </div>

    </center>

    <script>

    function onClick()

    alert("Welcome to the click event");

    document.getElementById("singleMsg").innerText="Click Event";

    function ondbClick()

    alert("Welcome to the double click event");

    document.getElementById("doubleMsg").innerText="Double Click Event";

    function mouseUp()
    {

    document.getElementById("box").style.transform="rotate(0deg)";

    function mouseDown()

    document.getElementById("box").style.transform="rotate(360deg)";

    function reSize()

    const div = document.getElementById();

    function onmouseOver(imageSource)

    var mainImage = document.getElementById("mainImage");

    mainImage.src = imageSource;

    function onmouseOut()

    var mainImage = document.getElementById("mainImage");

    mainImage.src = "main.jpeg";

    </script>

    </body>

    </html>
    Output:-

    You might also like