NEED help with a Javascript code...(mouseover and stuff)

Quintox · 04-27-2007, 11:32 PM

don't know how to write it on my own, but is there anyway to write a code that will do this:

Let's say I have a 40x40 black block (image) that is also a link. Is there a way to write script so that when the mouse passes over the block, it changes to a custom made 40x40 block "underneath" it if you know what I mean?

I am using a program called Kompozer, and on the black block I have on my site, you can double click on it, goto advanced, and it has a Javascript tab where you can add JS. So all I can do it put "onmouseover" and "onmouseout"...hard to explain, check out the screenshot.

http://img234.imageshack.us/img234/9154/kompsq8.png

Of course that code doesn't work in the image...but why can't you just put the URL direct link to images you want up there, so much easier.

Soo...how can I do this? I can do it the hard way and copy/paste into my source code, but that is sooooo long and confusing, would take literally days.

NathanLedet · 04-27-2007, 11:50 PM

Try this...

Put the following code between the <head> </head> tags

Code:

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

and in the body of the page

Code:

<body onload="MM_preloadImages('OverState.jpg')">

<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImageName','','OverState.jpg',1)"><img src="UpState.jpg" name="ImageName" width="88" height="31" border="0" id="ImageName" /></a>

That code took me 5 seconds to generate with Dreamweaver. It's a great tool to have.

peterhuang913 · 04-28-2007, 12:02 AM

I start with Photoshop and use slices, also a great tool to have

NathanLedet · 04-28-2007, 12:04 AM

agreed.

Quintox · 04-28-2007, 10:46 PM

Quote:

Originally Posted by NathanLedet

agreed.

OK I put that stuff where you said, but now what? I browsed it and it's still the same.

NathanLedet · 04-29-2007, 12:10 AM

Did you replace what's in red with your images?

williwaw · 05-01-2007, 01:48 PM

I would use my css page but if you are not using css try using this as your link in your html page.

Code:

<a href="http://Your Link" onMouseover="Your Photo Bucket"  onmouseout="Your Photo Bucket">Your Link</a>

Good luck, I have not tested this

OK---I tested the above and no workie, but try this

Code:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Name','','http:\\Photobucket A',1)"><img src="http:\\Photobucket B" name="Name" width="100" height="100" border="0">Your Link</a>

This should work for you...it worked on my site

Cheers,
Williwaw

Quintox · 05-02-2007, 06:41 PM

Thx for all the help, I finally figured it out a few days ago (forgot I had a thread in here).

What I messed up on is when I copied/pasted it from a Javascript writer program, I deleted the wrong quote marks and left things I didn't need (symbols).

Member Login