ZoomCities IT Community Webmaster Forum

I was trying to use javascript to create an interactive button for my new website. I adapted this tutorial:
http://www.javascript-coder.com/button/j...n-p1.phtml

this is my javascript file:

upHm = new Image();
upHm.src = "upHm.png";
dwnHm = new Image();
dwnHm.src = "dwnHm.png"
overHm = new Image();
overHm.src = "overHm.png";

upPj = new Image();
upPj.src = "upPj.png";
dwnPj = new Image();
dwnPj.src = "dwnPj.png"
overPj = new Image();
overPj.src = "overPj.png";

upLk = new Image();
upLk.src = "upLk.png";
dwnLk = new Image();
dwnLk.src = "dwnLk.png"
overLk = new Image();
overLk.src = "overLk.png";


function overImageH()
{
  document.images["hmButton"].src= overHm.src;
  return true;
}
function normalImageH()
{
   document.images["hmButton"].src = upHm.src;
   return true;
}
function downImageH()
{
 document.images["hmButton"].src = dwnHm.src;
 return true;
}


function overImageP()
{
  document.images["pjButton"].src= overPj.src;
  return true;
}
function normalImageP()
{
   document.images["pjButton"].src = upPj.src;
   return true;
}
function downImageP()
{
 document.images["pjButton"].src = dwnPj.src;
 return true;
}


function overImageL()
{
  document.images["lkButton"].src= overLk.src;
  return true;
}
function normalImageL()
{
   document.images["lkButton"].src = upLk.src;
   return true;
}
function downImageL()
{
 document.images["lkButton"].src = dwnLk.src;
 return true;
}

and heres the html i tried to use it with (only tried to implement the first button):

<a href="page2.html" onMouseOver="return overImageH()" onMouseOut="return upImageH()" onMouseDown="return downImageH()" onMouseUp="return overImageH()" > <img name="hmButton" src="upHm.png" style="position: absolute; left: 25px; top: 200px;" /> </a>

and of course i put this in the head tag:
<script src="button.js"></script>

unfortunately, all of this failed to work at all, the image didnt change with mouseover or click or anything. anyone know what my problem is?


p.s. sorry for long post, i dont have this hosted

Hi. There seems to be not much of a problem. I think there are two possibilities, one being your host isn't too reliable on Javascripts an another in which is more likely, I believe you had some problems in integrating the script to your webpage properly.

You're kidding me? Just use CSS with the :hover attribute!

ah, i was wondering if there was a simpler way, haha. thanks, ill try it out

That code should seriously be on The DailyWTF because that's really amazingly complex for such a simple task.

well its for three separate buttons, i only implemented the first button.

the first 3 sections were for preloading the images
the second three sections were the image switching functions for each of the three buttons

---

ok so i tried css but it was wasn't doing it for me. i looked over my javascript again and made it work. The return statements were completely unnecessary, i think thats what was screwing it up. this is my new code (for just one of the buttons):

the j

the html:

p.s. there seems to be some strange glitch with the forum, in the edit screen, it says "the javascript" but in the post it just says "the j". weird

Hmm - try adding id="hmButton" to your image code as well - sometimes it helps.

That's seriously ridiculous code. You should be able to have

a, a:link { background:#fff url(upHm.png) no-repeat; }
a:hover { background:#fff url(dwnHm.pn) no-repeat; }
a:active { background:#fff url(overHm.png) no-repeat; }

Then you can just have a normal

<a href="#">Link</a>

You should add a class though since you don't want all links doing that.

PS: The forum is just a bit overzealous, it's filtering out javascript because someone might be trying to inject javascript.

I don't know why I never thought of this. I have always used javascript to do rollover imaging too... This is way more simple

You usually want to set it to display:block; and then just set a height and width.