Mouse over animation

devil lady · Jan 15, 2007

Hi all. I'm adding a page to our business website and need help.
I have a 6 frame animation that I would like to show on mouse over. Currently I only have a static image with a click to see the animation which opens on a new page. http://www.hoistandcrane.com.au/mobile.htm
I have tried several javascripts but none seem to work. I know its something simple I'm missing but I give up after 3 hours. :4-dontkno

KoosHopeloos · Jan 15, 2007

@ devil lady: this is the code (made in Dreamweaver) I use for my site to have a mouse-hover image in my menu. Perhaps you can spot the difference. When I get home I'll try to make the hoover image and post the code...

Code:

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

devil lady · Jan 15, 2007

Wow that one is a lot more complicated than what I was trying. Being stubborn I kept searching and had success. Thanks for the offer though, I really appreciate it.

I found one that works. http://javascript.internet.com/generators/preload-images.html

Code:

<!-- TWO STEPS TO INSTALL PRELOAD IMAGES:

   1.  Paste the first into the HEAD of your HTML document
   2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Copy this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->

<!-- Begin

image1 = new Image();
image1.src = "http://www.hoistandcrane.com.au/testbed.gif";

// End -->
</script>
</HEAD>

<!-- STEP TWO: Insert this code into the BODY of your HTML document  -->

<BODY>

<a href="http://www.hoistandcrane.com.au/mobile.htm" onmouseover="image1.src='http://www.hoistandcrane.com.au/testbed.gif';"
onmouseout="image1.src='http://www.hoistandcrane.com.au/test2.gif';">
<img name="image1" src="http://www.hoistandcrane.com.au/test2.gif" border=0></a>

</BODY>

KoosHopeloos · Jan 16, 2007

@ Devil Lady: I know mine is a bit more complicated, but that is also due to the fact the way I have set-up evrything. Anyway, good to hear that you were able to solve your problem!

Mouse over animation

devil lady

Registered

KoosHopeloos

Registered

devil lady

Registered

KoosHopeloos

Registered