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

69 views Asked by At

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>
2

There are 2 answers

8
mplungjan On BEST ANSWER

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" />

0
Dickens A S On

Possible Duplicate How do I change the style of the cursor with JQuery?

you can specify like

$('#trailimageid').css('cursor', 'url(' + trailimage[i] + ')');

assuming i as array index