Looking for more efficiency in Javascript -

i'm writing web app/game has ton of clickable .png images glow when hover on them , change further momentarily when clicked. code have want do, i'm noticing there lot of redundancies going out , getting elements id. i'm wondering if maybe more javascript savvy me knows of better way write this. naturally, in root folder there 3 .png files every "button", each representing pic in different states...(i.e. inventorypic.png, inventorypicglow.png, , inventorypicdown.png image files changed in , out of dom depending on status of "inventorypic" element.)

function glowtext(element) {     var glowpicname = element.id +  "glow.png";     element.src = glowpicname; } function normaltext(element) {     var normalpicname = element.id + ".png";     element.src = normalpicname; } function downtext(element) {     var downpicname = element.id + "down.png";     element.src = downpicname; } document.getelementbyid("inventorypic").addeventlistener("mouseover", function(){glowtext(this)}, false); document.getelementbyid("inventorypic").addeventlistener("mouseout", function(){normaltext(this)}, false); document.getelementbyid("inventorypic").addeventlistener("mousedown", function(){downtext(this)}, false); document.getelementbyid("inventorypic").addeventlistener("mouseup", function(){glowtext(this)}, false);  document.getelementbyid("refinementpic").addeventlistener("mouseover", function(){glowtext(this)}, false); document.getelementbyid("refinementpic").addeventlistener("mouseout", function(){normaltext(this)}, false); document.getelementbyid("refinementpic").addeventlistener("mousedown", function(){downtext(this)}, false); document.getelementbyid("refinementpic").addeventlistener("mouseup", function(){glowtext(this)}, false);  document.getelementbyid("propertiespic").addeventlistener("mouseover", function(){glowtext(this)}, false); document.getelementbyid("propertiespic").addeventlistener("mouseout", function(){normaltext(this)}, false); document.getelementbyid("propertiespic").addeventlistener("mousedown", function(){downtext(this)}, false); document.getelementbyid("propertiespic").addeventlistener("mouseup", function(){glowtext(this)}, false);  document.getelementbyid("locationpic").addeventlistener("mouseover", function(){glowtext(this)}, false); document.getelementbyid("locationpic").addeventlistener("mouseout", function(){normaltext(this)}, false); document.getelementbyid("locationpic").addeventlistener("mousedown", function(){downtext(this)}, false); document.getelementbyid("locationpic").addeventlistener("mouseup", function(){glowtext(this)}, false);  document.getelementbyid("descriptionpic").addeventlistener("mouseover", function(){glowtext(this)}, false); document.getelementbyid("descriptionpic").addeventlistener("mouseout", function(){normaltext(this)}, false); document.getelementbyid("descriptionpic").addeventlistener("mousedown", function(){downtext(this)}, false); document.getelementbyid("descriptionpic").addeventlistener("mouseup", function(){glowtext(this)}, false); 

there lot more of these 4-line blocks (i didn't copy them here).. 1 each button , it's getting kind of ridiculous looking. there better way this?

i have 1 other smaller question think know answer want check anyway... can make elements in custom shapes, in shape other square or rectangle? think no, tell me if i'm wrong please.

try object once id, , use reference.

var inventorypic = document.getelementbyid("inventorypic"); addevents(inventorypic);      var refinementpic= document.getelementbyid("refinementpic"); addevents(refinementpic);   var propertiespic = document.getelementbyid("propertiespic"); addevents(propertiespic );     var descriptionpic= document.getelementbyid("descriptionpic"); addevents(descriptionpic);      fucntion addevents(obj) {     obj.addeventlistener("mouseover", function(){glowtext(this)}, false);     obj.addeventlistener("mouseout", function(){normaltext(this)}, false);     obj.addeventlistener("mousedown", function(){downtext(this)}, false);     obj.addeventlistener("mouseup", function(){glowtext(this)}, false); }