Search code examples
javascriptjqueryimagevariablescursor

What code is required to swap a javascript variable (trailimage) to another when clicking within a website


When clicking (onmousedown or onclick) for example, I would like to change the variable of the trailimge in the javascript to another image. You see, I have an image (a hand) that is following the cursor coordinates. I am unable to code and change the current image to swap to another trailimage after clicking. I will also need to find a way of reverting to the original trailimage when unclicking. The affect will seem as though the handis tapping or pointing.

var trailimage=["images/contact/gardening-glove-cursor.png", , ]

I believe the answer may be within some form of swap variable scripting

e.g.

var a = 1,
b = 2;

var foo = 1;
var bar = 2;
foo = [bar, bar = foo][0];

Trailimage javascript excerpts

var trailimage=["images/contact/gardening-glove-cursor.png", , ]
var offsetfrommouse=[-110,5]
var displayduration=0

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}

</script>

Solution

  • Try this

    Fiddle

    var trailimage = ["http://img2.wikia.nocookie.net/__cb20130626213446/elderscrolls/images/2/2d/TES3_Morrowind_-_Glove_-_Black_Left_Glove.png",
                "http://img2.wikia.nocookie.net/__cb20130626213454/elderscrolls/images/9/91/TES3_Morrowind_-_Glove_-_Black_Right_Glove.png"]
    $(function() {
      $(".logo").attr("src",trailimage[0]);
      $(document).mousemove(function(e) {
        $('.logo').offset({
            left: e.pageX,
            top: e.pageY + 20
        });
      });
        $(document).on("mousedown",function() {
             $(".logo").attr("src",trailimage[1]);   
        })
        $(document).on("mouseup",function() {
             $(".logo").attr("src",trailimage[0]);   
        })
        
    });    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="glove" />