Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out the JSFIDDLE http://jsfiddle.net/cntra/VSCXy/ or refer to the code below:

<div class="columa">
 <div id="text-display">
  <span>Your Daily Dose of Contrabang</span>
   </div>

<div class="morphing-tinting">
<span class="image-wrap" 
 style="position:relative; 
  left: 0px; top:0; 
   display:inline-block; 
    background:url
    (http://www.howmuchdotheyweigh.com/wp-content/uploads/2011/02/angelina-jolie.jpg)
     no-repeat center center; 
      width: 250px; 
      height: 250px;">

The CSS:


   #text-display{
   top:; position: relative;
   display:inline-block; padding:5px 10px; 
   font-family: sans-serif; font-weight:bold; font-size:50px; 
   color: white; text-align: center; line-height: 1.2em; margin:0px;      
   background-color:#E94F78;}

.morphing-tinting .image-wrap {
 position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;}

.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;}

Answer №1

To simplify the process, I recommend using jQuery. While it does add some overhead, utilizing a CDN like https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js can help speed up loading times as it may already be in the user's cache.

In place of the two functions previously used, you can replace them with the following code snippet:

$('.changeTextClass').hover(function(){
     $('#'+$(this).attr('rel')).text('Howdy.');
});

Additionally, I made some modifications to your HTML by adding the "changeTextClass" class to the link and setting the target element to be changed through a "rel" attribute:

<a href="#" class="changeTextClass" rel="targetElm">

You can then assign the ID "targetElm" to the element you want to change text for:

<span id="targetElm">Your Daily Dose of Contrabang</span>

Feel free to test the functionality here: http://jsfiddle.net/VSCXy/1/

This approach allows for easily extending the function to other elements. You have the option to include additional text in the rel attribute to make it more adaptable as well.

For instance, you can format the html like this:

<a href="#" class="changeTextClass" rel="targetElm|some sample text">

And implement the modified function as follows:

$('.changeTextClass').hover(function(){
    var elmData = $(this).attr('rel').split('|');
    $('#'+elmData[0]).text(elmData[1]);
});

If you ever need to revert back to the original text within the element, you can utilize this function:

var elmData, origText;
$('.changeTextClass').hover(function(){
    elmData = $(this).attr('rel').split('|');
    origText = $('#'+elmData[0]).text();
    $('#'+elmData[0]).text(elmData[1]);
 }, function(){
    $('#'+elmData[0]).text(origText);
});

I hope this clarifies things for you!

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

Exploring AngularJS ng-repeat features for custom attribute settings

I'm currently facing a challenge in removing multiple repetitive divs by utilizing ng-repeat. <!-- I have 21 of these --> <div class="table-row"> <span class="glyphicon glyphicon-wrench"></span> <label>Chlo ...

jQuery toggle functioning in one scenario, but failing in another

My experience with JS/Jquery is limited which might explain why I'm struggling with this. I am attempting to hide some text on a page and then make it visible again by clicking on a toggle link. The JavaScript code below is what I have been using. The ...

Align Horizontal Fixed Element

<html> <head> <style> #rectangle { position: absolute; right: 0; bottom: 0; width: 150px; height: 200px; } </st ...

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

how to use beautifulsoup to insert a new tag within a text block

When a browser encounters the text www.domain.com or http://domain.com/etc/ within an HTML text section, it automatically converts it into <a href="http://www.domain.com">www.domain.com</a> or <a href="http://domain.com/etc/">http://domai ...

Arranging divs within list items in a single row

My goal is to create a dropdown menu within an <li> element of <ul>. Here's what I have so far: HTML: <ul class="navigationTable"> <li>1</li> <li>2</li> <li><div id="comittee"> <div id= ...

Ensuring Date Data Integrity with HTML5 Validations

I need to set up validation for a mobile website that includes two input fields. The first field should validate that the value is not later than today's date, while the second field should validate that it is not later than one year in advance of the ...

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

Troubleshooting Angular JS loading problems

I'm attempting to implement the Angular-Spinner in my project: Specifically, I want to use it with http.get calls. This is what I have so far: Within controllers: $scope.loading = true; $http.get('js/data/test.json').success(function(resu ...

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

Using jQuery functions on inputs within a Bootstrap Modal

I've encountered an issue with my jQuery functions that validate input fields based on a regex pattern. Everything works smoothly when the form is displayed on a regular page, but as soon as I try to implement it within a Bootstrap Modal, the validati ...

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

Guide on implementing automatic callbacks with AJAX

I am facing an issue with my index page that has one input tag and one division. There is an ajax function that retrieves data from the server, but I am encountering a problem. When I enter a single letter, it returns 3 records. Then, if I add another lett ...

Customizable user profile page

I'm currently working with twitter bootstrap. My goal is to design a profile page featuring an edit button positioned on the top left corner. Upon clicking this button, all the profile details will transition into editable form fields (which I bel ...

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

Ensure that the "select" dropdown menu remains a constant size

One section of my Android app, powered by JQuery Mobile, displays a table with a combobox. The issue arises when selecting the option with a very long text, causing the combobox to expand and show half of the table off-screen. My goal is to set the combob ...

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...