What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link.

Here is my website:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Encyclopedia</title>
  <link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>This is our Encyclopedia about animals</h1>
  <p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
    to your email for when we have a more updated selection
  </p>
  <nav id=n av1>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="ImageGallery.html">Image gallery</a></li>
      <li><a href="SignUp.html">SignUp</a></li>
    </ul>
  </nav>
  <nav id=n av3>
    <ul>
      <li><a href="encyclopedia.html">Marine life</a></li>
      <li><a href="encyclopedia.html">Mammals</a></li>
      <li><a href="encyclopedia.html">Birds</a></li>
      <li><a href="encyclopedia.html">Reptiles</a></li>
      <li><a href="encyclopedia.html">Amphibians</a></li>
    </ul>
  </nav>
</body>

</html>

I am looking to customize the links to show specific text upon clicking. Right now, they just redirect to the same page. How can I modify it so that clicking the link displays relevant information on the page?

javascriptcsshtml

Answer №1

There are multiple methods to achieve this, but here's a straightforward approach: You'll require a DIV element to accommodate the text.

<div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;width:120px;">Content will be inserted here.</div>

For the Href links, incorporate something similar to the following code snippet:

<a onmouseover="document.getElementById('uniquename3').innerHTML = 'Mammals\,some intriguing information about mammals\, more fascinating facts about mammals';ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">Mammals</a>


// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}

Answer №2

Learn how to use JavaScript to dynamically display and hide elements based on user interaction.

const app = {
  init: function() {
    document.querySelectorAll(".link").forEach(link => {
      link.addEventListener("click", app.nav);
    });
  },
  nav: function(ev) {
    ev.preventDefault();
    let currentPage = ev.target.getAttribute("data-target");
    let content = document.querySelectorAll('.content')
    for(i = 0; i < content.length; i++) {
      if(content[i].classList.contains('showing')) {
        content[i].classList.remove("showing");
      }
    }
    document.getElementById(currentPage).classList.add("showing");
  }
};
document.addEventListener("DOMContentLoaded", app.init);
.content {
  display: none;
}
.showing {
  display: block;
}
#marine-life {
  background: green;
}
#mammals {
  background: blue;
}
#birds {
  background: yellow;
}
#reptiles {
  background: purple;
}
#amphibians {
  background: red;
}
<body>

  <h1>Discover the World of Animals</h1>
  <p>Welcome to our Animal Encyclopedia! Although still a work in progress, we offer a small selection of interesting animals that you can learn about. Click on "Sign Up" to receive updates when more animals are added.
  </p>
  <nav id=n av1>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="ImageGallery.html">Image gallery</a></li>
      <li><a href="SignUp.html">Sign Up</a></li>
    </ul>
  </nav>
  <nav id=n av3>
    <ul>
      <li><a class="link" data-target="marine-life" href="#">Marine Life</a></li>
      <li><a class="link" data-target="mammals" href="#">Mammals</a></li>
      <li><a class="link" data-target="birds" href="#">Birds</a></li>
      <li><a class="link" data-target="reptiles" href="#">Reptiles</a></li>
      <li><a class="link" data-target="amphibians" href="#">Amphibians</a></li>
    </ul>
  </nav>
  <div id="contentWrap">
    <div id="marine-life" class="content">
      <h1>Marine Life</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>    
    <div id="mammals" class="content">
      <h1>Mammals</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="birds"class="content">
      <h1>Birds</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="reptiles" class="content">
      <h1>Reptiles</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="amphibians" class="content">
      <h1>Amphibians</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
  </div>

</body>

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 are the steps to program a bot to respond to different types of media messages (such as pngs, mp4

I have been attempting to elicit a reaction from him based on the media message, but my attempts have been fruitless so far. It seems that the only time it reacts is when there is no text within the message... which complicates things. Can anyone provide s ...

javascriptnode.jsjsondiscorddiscord.js

preserving the current state even after refreshing the page

Currently, I am teaching myself React. When I click on the favorites button, which is represented by a heart symbol, it changes color. However, upon refreshing the page, the color change disappears. To address this issue, I came across the following helpfu ...

javascripthtmlreactjsreduxmaterial-ui

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

javascriptcsscharts

No data retrieved from database using PDO, Empty Table

I am struggling to integrate MySQL database information into HTML. Despite researching extensively on this forum for solutions, I have not been successful. The code below aims to retrieve data such as courseNumber, section, instructor, startTime, endTime ...

phphtml

A technique for postponing the addition of a class to a div

I am attempting to create a unique type of slider effect. Inside a single div named #slider, I have 9 items displayed in a line. Link to JsFiddle The slider is 1860px wide, but only 620px is visible at any given time due to the parent having an overflow: ...

javascriptjqueryhtmlcss

I need help figuring out the right way to define the scope for ng-model within a directive

I found a straightforward directive to automate sliders: app.directive('slider', function() { return { restrict: 'AE', link: function(scope, element, attrs) { element.slider({ value: scop ...

javascriptjqueryangularjsangularjs-directiveuislider

Is there a way to smoothly transition a FlatList while the keyboard is open?

At the moment, the appearance and animation of my messaging screen are as follows: However, I'm eager to enhance my messaging initial animation to lift up my flatlist like this (opens with scrolling): This is the code for the screen: // Code goes he ...

javascriptreact-nativeinputkeyboardreact-native-flatlist

Tips for successfully passing multiple data IDs in a Bootstrap modal

Greetings! I am currently facing a challenge with passing multiple data IDs into a bootstrap modal. When I manually assign the data IDs, everything works perfectly: <a id="testB" href="#my_modal2" data-toggle="modal" data-book-id='{"id":10,"name ...

javascriptjquerynode.jsbootstrap-modal

Ensuring Form Accuracy - Mandatory Selection from Group

Currently, in the project I am working on, there are three textboxes that need to be validated to ensure at least one of them has been filled out. I have been researching custom validation with Angular directives and found that it is possible to set the v ...

javascriptangularjs

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

Performing date comparison in JavaScript with varying date formats

My system includes a table that retrieves dates from an FTP location. On the user interface page, there is a form that gathers all details related to a specific FTP date. However, I am facing difficulties in comparing the FTP dates with those specified in ...

javascripthtmlnode.jsexpress

Which is the Better Choice for an MMO WebSocket Server: Node.js or C++?

Contemplating creating a live game using WebSockets for the web has been on my mind. With my knowledge of Node.js, it's tempting to develop it there. However, C++ appears to be the favored server language due to its speed. Would it be best to try bui ...

javascriptc++node.jsperformanceserver

Is Q.js capable of functioning independently from node.js and require()?

Currently experimenting with the latest version of q.js to integrate promises into my ajax calls without utilizing node.js at all. I retrieved the most recent version from https://github.com/kriskowal/q and only included q.js in my project. While testing, ...

javascriptajaxnode.jsrequirejsq

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

javascripthtml

Selection box and interactive buttons similar to those found in Gmail

Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...

javascripthtmlcss

Recoil: Executing a function when an atom is modified

My goal is to store a user object in an atom and cache it in localStorage every time it changes to avoid having the user sign in repeatedly if the app crashes: localStorage.setItem('user', JSON.stringify(user)) Previously, with useContext, I ach ...

javascriptreactjsnext.jsrecoiljs

A guide on utilizing AngularJS to extract data from a webpage

I'm attempting to transfer the information from a specific page on my website and paste it into a file. I know how to post a sample text stored in a variable from Angular and save it in a file in the backend using Node Express, so writing a file isn&a ...

javascriptangularjsnode.js

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

javascripthtmldatedatetime

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

"Implement a feature to recognize and handle various file extensions within an npm

I need help with my npm script where I am trying to include both ts and tsx file extensions. My current code snippet is as follows: "test": "mocha ..... app/test/**/*.spec.{ts,tsx}" Unfortunately, the above syntax is not working correctly. Can someone pl ...

javascriptnode.jsnpmpackage.jsonnpm-scripts