How to change a clickable <a> tag to an image with the same function within JQuery Javascript

Question

Basically I am very new to JQuery and Javascript and have come to a sticking point and cannot find an answer to my question.

At the moment I have this code and it is all working:

$(document).ready( function() {
    var textArray = [
        '"This piece of text is 106 characters (with spaces) and I think it is the max length for the rotator quotes"',
        '"consectetur adipiscing elit. Phasellus congue nibh quam. Pellentesque sed"',
        '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus"',
        '"ccumsan dictum eu felis. Maecenas ultricies, diam vitae bibendum"',
        '"Nam tincidunt nisi ut mi gravida ac fermentum lacus rhoncus"',
        '"Class aptent taciti sociosqu ad litora torquent per conubia nostra"',
        'The quickest way to double your money is to fold it in half and put it back in your pocket.',
        'An optimist is someone who falls off the Empire State Building, and after 50 floors says, "So far so good!"',
        'If you wish to live wisely, ignore sayings, including this one.',
        'A consultant is someone who takes a subject you understand and makes it sound confusing.',
        'You have the right to remain silent. Anything you say will be misquoted, then used against you.',
        'Join the Army, meet interesting people, kill them.',
        'The early bird may get the worm, but the second mouse gets the cheese.',
        'Everybody wants to go to Heaven but nobody wants to die.',
        'Evening news is where they start by saying "Good Evening" and proceed by telling you why it\'s not.',
        'What are you going to do for a face when the monkey asks for his butt back?',
        'All generalizations are false, including this one.'  /**/
    ];
    $('#text-box').randomText( textArray, 12000, "Next Quote" ); // ( array, interval, ["reload text or html"] )
});
// custom jquery plugin loadText()
$.fn.randomText = function( textArray, interval, randomEle, prevText ) {
    var obj = $(this);
    if( $('#text-content').length == 0 ){ obj.append('<div id="text-content">'); }
    var textCont = $('#text-content');
    if( typeof randomEle != 'undefined' ){ if( $('#randomizer').length == 0 ){ obj.append('<a href="javascript:;" id="randomizer"><em>' + randomEle ); } }
    textCont.fadeOut( 'slow', function() {
        var chosenText = random_array( textArray );
        while( chosenText == prevText ) { chosenText = random_array( textArray ); }
        textCont.empty().html( chosenText );
        textCont.fadeIn( 'slow' );
        sendText = chosenText;
    });
    timeOut = setTimeout( function(){ obj.randomText( textArray, interval, randomEle, sendText ); }, interval );
    $("#randomizer").click( function(){
        if( !textCont.is(':animated') ) { clearTimeout( timeOut ); obj.randomText( textArray, interval, randomEle, sendText );} // animation check prevents "too much recursion" error in jQuery 
    });
}
//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

I basically want to change the <a> which is 'Next Quote' with an image which is available on our server. it needs to have the same refresh/randomize function as the clickable text did.

The image source would be <img src="/images/masterpage-template/click-to-view-the-next-client-feedback" />

Any help would be much appreciated.

Answer 1

If that's what you want to do, I would say you simply need to change this line:

obj.append('<a href="javascript:;" id="randomizer"><em>' + randomEle );

with this line:

obj.append('<img src="/images/masterpage-template/click-to-view-the-next-client-feedback" id="randomizer" />');

The .click() function will work in the same way, so you should be good to go.