ZuoTi.Pro
Question

Create a document that has a small image of yourself, which must appear with the center...

Create a document that has a small image of yourself, which must appear with the center at the position of the mouse cursor when the mouse button is clicked, regardless of the position of the cursor at the time. Include a heading explaining what the page is for. Use an external style sheet to display the heading in red color.

After creating, testing, and validating the HTML5 and CSS documents, publish them together with your Javascript code file on your document root on the server.

(three separate documents)

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Stylesheet information of an Image : clg.css

<!-- image style and position -->

#clg{
border-color:red;
border-style:dotted;

width: 120px;
height: 120px;
position: absolute;
background-image: url(./clg.jpg);
top: 0px;
left: 0px;
}

<!-- heading style -->

#h

{ color:red; text-align:center; }

----------------------------------------------------------------

html file ::::::::::: image.html

<html>
<head>

<link href="./clg.css" rel="stylesheet">

<script type="text/javascript" src= "./image.js">

</head>
<body>

<h1 class="h"> HTML File to move image along with mouse movement. </h1>
<span id="clg">

<img src="./clg.jpg" height="120" width="120"></img>

</span>
</body>
</html>

--------------------------------------

javascript file : image.js
var clgimage = document.getElementById("clg"); // idenfitifes span eleme nt
var roll = false; // to know the image is moving or not , intitally it is not moving state hence value is false
clgimage.addEventListener("mousedown", starting, false); // at starting image is in rest
function mouse_move(e) // funciton to move image with mouse
{
var latestX = e.clientX; // copies mouse x position
var latestY = e.clientY; // copies mouse y position
clgimage.style.left = latestY + "px"; // assigns latest mouse position to span (image)
clgimage.style.top = latestX + "px";
}
function starting(e) // span (image) starting no rolling mode
{
if(roll){ // when the mouse is moving
document.removeEventListener("mousemove", mouse_move); // initiages image span move
roll = !roll;
return;
}
roll = !roll; // when the mouse is not moving
document.addEventListener("mousemove", mouse_move, false);
}

---------------------------------------------

finally copy the respective files into weserver root folder (.html , .css , .js ) files

execute the .html file by typing url path in the browser....

0 0
Add a comment
Know the answer?
Add Answer to:
Create a document that has a small image of yourself, which must appear with the center...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

    Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned. Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab....

  • Design an original, professional web site following the specifications listed below. This web sit...

    Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT