html

Homely Hare answered on January 3, 2024 Popularity 1/10 Helpfulness 1/10

answer html

html

Comment

Tip Homely Hare 1 GREPCC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Coordinates</title>
    <style>
        #image-container {
            position: relative;
            width: 100%;
        }

        #coordinate-display {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>

    <h1>Image Coordinates</h1>

    <div id="image-container">
        <img src="your_image.jpg" alt="Your Image" id="image" style="width: 100%; height: auto;">
        <div id="coordinate-display">Coordinates: <span id="coordinates">0, 0</span></div>
    </div>

    <script>
        // Function to display coordinates
        function displayCoordinates(event) {
            var x = event.clientX;
            var y = event.clientY;

            // Display coordinates
            document.getElementById("coordinates").innerText = x + ", " + y;
        }

        // Attach event listener to the image
        document.getElementById("image").addEventListener("mousemove", displayCoordinates);
    </script>

</body>
</html>

xxxxxxxxxx

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Coordinates</title>

    <style>

        #image-container {

            position: relative;

            width: 100%;

        #coordinate-display {

            position: absolute;

            top: 0;

            left: 0;

            background-color: rgba(255, 255, 255, 0.8);

            padding: 5px;

            font-family: Arial, sans-serif;

    </style>

</head>

<body>

    <h1>Image Coordinates</h1>

    <div id="image-container">

        <img src="your_image.jpg" alt="Your Image" id="image" style="width: 100%; height: auto;">

        <div id="coordinate-display">Coordinates: <span id="coordinates">0, 0</span></div>

    </div>

    <script>

        // Function to display coordinates

        function displayCoordinates(event) {

            var x = event.clientX;

            var y = event.clientY;

            // Display coordinates

            document.getElementById("coordinates").innerText = x + ", " + y;

        // Attach event listener to the image

        document.getElementById("image").addEventListener("mousemove", displayCoordinates);

    </script>

</body>

</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Jan 03 2024

Homely Hare

0 Answers Avg Quality 2/10

html

Contents

More Related Answers

html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.