Modify the paragraph content upon clicking

After experimenting with JavaScript to switch images, I now want to explore how to do the same with text.

My dilemma lies in having 10 different paragraphs (where each link corresponds to a specific paragraph), but I'm unsure of where to input these paragraphs. While my images are linked to existing files, I want my text to remain text, and I am uncertain as to how to assign this in CSS or HTML.

CODE USED:

Currently, I have CSS code to define my text content that will change upon clicking, along with the map content where the text changes are controlled:

    #content 
    #content div {float:left;}  
    #content_map {width:595px;}     
    #content_text {width:290px;;}
    #content_profile {width:900px;}

For instance, my current html for map 'hotspots' looks like:

  <area shape="circle" coords="276,326,15" href="#" alt="Kinnloch" onclick="MM_swapImage('stboswells_01','','discover_kinnloch.png',1)"/>
  <area shape="circle" coords="202,264,11" href="#" alt="Lochinver" onclick="MM_swapImage('stboswells_01','','discover_lochinver.png',1)"/>

... etc

Essentially, I am currently swapping images in the 'profile' div based on coordinates from the 'map' div. What I aim to achieve is to also swap text in my 'text' div using these coordinates. For example, the first set of coordinates would change the text to 'Paragraph 1,' while the second set would change it to 'Paragraph 2,' and so on...

Answer №1

If you're utilizing jQuery, one way to enhance the functionality is by assigning a specific class to each area element and then targeting it accordingly:

$(".areaClass").click(function(){
    $("your text div id/class").text("Explore " + $(this).attr("alt"));
});

For reference, here's an illustration provided at http://jsfiddle.net/Vphf2/

In this demonstration, I converted the area elements to anchor links for visibility purposes; nevertheless, the same approach can be applied in your scenario.

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

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen: https://codepen.io/jossnaz/pen/BMwpjR HTML <br> <div class="" style=" "> <span class="" style=""> Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos h ...

Guide to Implementing h-100 Class in Bootstrap 4

I am facing an issue with the height of the sidebar in my admin panel. Despite trying to set the sidebar's height to 100%, I have been unsuccessful in solving this problem. <html class="h-100"> <head> <title>Admin</title> ...

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

Utilize Sass variables to store CSS font-size and line-height properties for seamless styling management

How can I save the font size and line height in a Sass variable, like so: $font-normal: 14px/21px; When using this declaration, I notice that a division occurs as explained in the Sass documentation. Is there a way to prevent this division from happening ...

Styling a webpage with a two-row layout using just CSS

I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria: The page height should not exceed 100% The first row's height will vary bas ...

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

ways to access a designated nodal point in angularJS from a constantly updating data source

I am in need of assistance with how to open a specific node using angularJS from a dynamic data source. I have been able to toggle (hide/show) the sub nodes, but what I would like is for clicking on a specific node to only show its sub-nodes. Currently, wh ...

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

Ways to create a fixed top navigation bar that adjusts content similarly to a non-fixed navbar

I'm looking to achieve a fixed navbar at the top that pushes down content when I open the collapse menu, similar to how it functions in static or regular navbars. Something like this example: (https://getbootstrap.com/examples/navbar-static-top/) but ...

Problem with Submitting Form using Search Bar

I've tried everything, but I can't seem to get this search form to submit. <div id="search_bar_container" style="z-index:99999"> <div class="container"> <form action="tour-list-search-results.php" method="post" name="searc ...

Collapse the columns and set them to float on the left side

My current setup might not be the most visually appealing, but it gets the job done. I have several col-md-4 tags in place. The issue arises when the height of the first tag is larger than the ones next to it, causing the subsequent tag to appear in the mi ...

The functionality of AngularJS routing is malfunctioning

I'm having trouble with implementing angularJS routing on my page. Initially, it was working fine but now the browser is not returning anything. Here's the code snippet: angular.module('myRoutingApp', ['ngRoute']) .conf ...

Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I&apo ...

Having trouble with JQuery's .prop function not unchecking a checkbox?

I have been experimenting with different solutions in order to uncheck a checkbox when another checkbox is checked. Unfortunately, none of the methods I've tried seem to be working effectively... Currently, my code looks like this: $("#chkBox1").cli ...

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

Counter for the type="range" HTML input

I recently read an article discussing the possibilities of displaying ticks in Chrome and Firefox for a number input with the type "range". I was intrigued to find out more about this feature and came across a helpful discussion on Stack Overflow. ...

Revamp the button's visual presentation when it is in an active state

Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...