Javascript image highlight (explain)

Question

Hi I have been designing some websites, using a basic knowledge of javascript and thorough css and html. I have recently been assigned to add some simple drop down menus to another website, this in itself is simple but the website has some existing code which is both long and i dont understand. Simply i would love someone to help me convert this into jQuery and also how it works, ie how can i change it to get it to work with my drop down menus. Here it is:

<script type="text/javascript">
<!--
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_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;
  } }
}
//-->
</script>

Many Thanks

I think you can use this directly, all the scripts listed up were written by the basic syntax — paul
– paul, Commented Apr 26, 2011 at 5:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

That looks like code left over from an old WYSIWYG editor (MM may be the acronym of MacroMedia).

By the time you de-obfuscated it and figured out what it does, you may as well have rewritten it in a readable way with jQuery.

Update

I just looked at your site, and the effect looks like it could be achieved using CSS alone (more specifically, the :hover pseudo class).

Update

I'd rather use CSS and background images, but this will work if you want to keep img elements. Just name the hover state image something sane.

Also, why does every li have its own ul parent... weird.

$('#nav li a img').each(function() {
   var originalSrc = this.src,
       hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_hover.$1'); 

   $(this).hover(function() {
      this.src = hoverSrc;
   }, function() {
      this.src = originalSrc;
   });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 26, 2011 at 5:30

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

33 Comments

Jason Over a year ago

Would love to, but the thing is what this code does is if you check this page sundalah.com.au. It provides the highlight as you move your mouse of the menu which is constructed using images. Oh and thanks for restructuring my post.

Jason Over a year ago

I use the :hover pseudo class all the time, the problem is that the menu ins't text it is constructed of images and on each of the pages the images are different. I really don't want to make a second "hover" image for every single one of the menu images on all of the pages.

alex Over a year ago

@Jason :hover can change background-image.

Jason Over a year ago

@alex how is that useful? I need to change a property of the image without changing the image. I have thought of overlaying text on the image however that gets a little bit over complicated for a simple menu highlight. I just wanted to give a similar affect to what is currently done on the www.sundalah.com.au page

alex Over a year ago

@Jason Where the ... is the code sample I supplied in the answer.

|

Collectives™ on Stack Overflow

Javascript image highlight (explain)

1 Answer 1

Update

Update

33 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Update

33 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related