What is the best way to create a separate text box for each image on a page?

Is it possible to modify this code so that each text box only shows the text corresponding to its respective image? I am still relatively new to coding and am struggling to achieve the desired outcome.

function displayImageInfo(text) {
  document.getElementById("text").innerHTML = text;
  document.getElementById("text2").innerHTML = text;
}

function hideText() {
  document.getElementById("text").innerHTML = "";
  document.getElementById("text2").innerHTML = "";
}
<LINK REL="stylesheet" TYPE="text/css" HREF="test2css.css">
<h1> UFO Test Page </h1>

<img src="ufo.png" id="image" onMouseOver="displayImageInfo('its a ufo baby')" onMouseOut="hideText();">
<div id="text" style="position:absolute; left: 100px; top: 200px;"> </div>

<br>

<img src="alien.png" id="image2" onMouseOver="displayImageInfo('its a grey baby')" onMouseOut="hideText();">
<div id="text2" style="position:absolute; left: 150px; top: 400px;"> </div>

javascripthtmlcss

Answer №1

When tackling this issue, it's important to have two functions for each text division to allow for individual show and hide actions.

function displayText(text){
document.getElementById("text").innerHTML=text;
}
function hideText(){
document.getElementById("text").innerHTML="";
}

function displayText2(text){
document.getElementById("text2").innerHTML=text;
}
function hideText2(){
document.getElementById("text2").innerHTML="";
}
<LINK REL="stylesheet" TYPE="text/css" HREF="test2css.css">
<h1> UFO Testing Page </h1>

<img src="ufo.png" id="image" onMouseOver="displayText('It's a UFO, baby.')" onMouseOut="hideText();">
<div id="text" style= "position:absolute; left: 100px; top: 200px;"> </div>

<br>

<img src="alien.png" id="image2" onMouseOver="displayText2('It's a grey alien, baby.')" onMouseOut="hideText2();">
<div id="text2" style= "position:absolute; left: 150px; top: 400px;"> </div>

This solution offers a straightforward approach to your coding issue. If you are working with multiple images, consider exploring alternative methods for managing text display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the error in this particular stream function?

I created a function that logs the provided arguments to the console when piped into it. function logToConsole() { var stream = new Stream.Transform({objectMode: true}), args = [].slice.call(arguments); stream._transform = function (data, ...

javascriptnode.jsstream

How to easily retrieve additional data and update a document using Meteor

I'm feeling a bit lost on the best approach for obtaining additional data, particularly using an API, and adding it to the existing list. Imagine we're implementing either an infinite scroll or a 'load more' button, when that action oc ...

javascriptnode.jsmeteoriron-routermeteor-blaze

StorageLimit: A new condition implemented to avoid saving repetitive values in the localStorage

Is there a way to store the text of an li element as a localStorage value only once when clicked? If it already exists in localStorage, a second click should have no effect other than triggering an alert. I'm currently using an if statement inside a ...

javascriptjqueryhtmllocal-storage

Unexpected interactions between Socket.io and React using hooks

Currently, I am delving into the world of Socket.io with React utilizing Hooks. My goal is to create a timer that starts upon pressing the start button, and then every second, send the current time in the state to the server using socket.io. The server co ...

javascriptnode.jsreactjssocket.ioreact-hooks

How can I retrieve the name of an HTTP status code using JavaScript and AngularJS?

My web application is built using AngularJS, JS, JQ, HTML5, and CSS3. It interacts with our projects' REST API by sending various HTTP methods and manipulating the data received. The functionality is similar to what can be achieved with DHC by Restlet ...

javascriptangularjshttpdhc

Steps to display the "col-md-6" div upon hovering over list items in a different div

I have been trying to make a hover action work in my HTML document. I've managed to get it to work only when the description is a child of the li tag, but I want the description to be displayed as a separate div. <div class="row"> ...

jqueryhtmlcsstwitter-bootstrap-4

The Ionic search bar will only initiate a search once the keyboard is no longer in view

In my Ionic application, I have implemented a search bar to filter and search through a list. The filtering process is triggered as soon as I start typing in the search bar. However, the updated results are not displayed on the screen until I manually hide ...

javascriptandroidangulartypescriptionic-framework

Exploring the Time Interval Between Sending GET and POST Requests in Node.js and Express

I'm currently in the process of creating a quiz platform with Node/Express. Is there a way to guarantee that users complete the quiz within a specific timeframe without utilizing client-side javascript? For example, if the quiz is set for 10 minutes, ...

javascriptnode.jsexpressmiddleware

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Having trouble asynchronously adding rows using the @angular/material:table schematic. Despite calling this.table.renderRows(), the new rows are not displayed correctly. The "works" part is added to the table, reflecting in the paginator, but the asynchron ...

javascriptangulartypescriptasynchronousangular-material

Can you tell me what this code on Facebook is for?

Upon inspection of Facebook's activity in my browser, I stumbled upon the following code snippet: for (;;);{"t":"refresh"} Attempting to decipher its purpose reveals an infinite loop. Can you identify its function? ...

javascript

Using the method window.open() will launch a new window instead of opening a new tab

When the page loads, I am using JavaScript to call window.open. window.open(url, "Test Page"); Initially, it opens a new Chrome window and displays the page. However, when I use the same JavaScript code after the page has loaded, it opens the page in a n ...

javascripthtml

A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference. Below is the HTML code snippet: <div style="background-c ...

htmlcss

What is the best way to pass a VueJS object to be stored in a Laravel controller?

I am facing an issue with my methods where the data is not getting stored in the database. I am unsure why the information is not being sent to the controller. Even though I input the correct data, it fails to load into the database. However, it does pass ...

javascriptphpdatabaselaravelvue.js

Conceal optional navigation bar options once a user has logged in - utilizing Angular 8

I need assistance with hiding certain links in my navbar once a user has logged in. Below are the current navbar menus: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav ...

htmlangularfirebasefirebase-authenticationangular8

The height of the content in the polymer core-scaffold cannot be set to 100%

I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; ...

htmlcsspolymer

Checking variable length time with JavaScript Regular Expression

My specific requirement is to validate a string ranging from 1 to 4 characters in length (where H stands for hour and M represents minutes): If the string has 1 character, it should be in the format of H (a digit between 0-9). A 2-character string should ...

javascriptregex

Unleashing the power of Sinon: a guide to covertly observing the e

I need to verify if the method "res.render" is invoked with the correct parameters. it("Checks if the page for creating a new user is rendered", done => { const spy = sinon.spy(ejs, "render"); chai .request(app) .get("/users/create ...

javascriptnode.jsmocha.jsejssinon-chai

Order of execution for setImmediate() and setTimeout() callbacks compared to I/O callbacks

In the world of Node.js, the event loop powered by libuv is divided into specific phases. The poll phase is where we wait for I/O tasks to complete before running their associated callbacks. The length of this waiting period is determined by timers, timeou ...

javascriptnode.js

Discover which sub package is needed by running Npm check

While executing the command npm install, I encountered this error message: The package "getSnapshot-pkg-repo@^1.0.0" required by "conventional-changelog-core@^2.0.11" could not be found on the "npm" registry. I am uncertain about the source of this i ...

javascriptnpm

Issue with Django Form not showing up on HTML after encountering an error

I have a question regarding my Django project. When a user sends a GET request, I need to display a form on the page. Here is the initial code snippet: form = SignUpForm() if request.method == 'POST': .... else: return render(request, & ...

pythonhtmldjangodjango-templates