Question

I’m attempting to apply onmouseover to the Angeline Jolie (example image) in order to change the text of the element above which reads “Your Daily Dose of Contrabang”, (don’t ask). What would be the best way to implement this? Thank you in advance for your help. You can refer to the JSFIDDLE http://jsfiddle.net/cntra/VSCXy/ or the code, which is as follows:

<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

I’d use jQuery, which simplifies things. Adds a little overhead but if you use a CDN (e.g. https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js) it’s probably in your user’s cache anyway.

I removed the two functions you had in there and put this in, instead:

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

I also changed your HTML a bit. I added the class “changeTextClass” to the link, and gave the target element to be changed as a “rel” attribute:

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

Now you just add “targetElm” as an ID to the element you want changed to any element with the “changeTextClass” class:

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

Test it here: http://jsfiddle.net/VSCXy/1/

This way you can extend this function to other elements. You could also add text to the rel attribute to make that extendable, as well.

That html looks like this:

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

And the new function:

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

If you wanted to revert back to the original text inside the element, you could use 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);
});

Hope that helps.