BTW, this will change the behaviour of all your portals in that DNN instance, so if you have more portals running off that same instance then you may want to work it so that this change only gets applied when you have a specific skin installed.

As a matter of fact, it would be good to do it this way anyway, so that you aren't changing a core file that will be written over if/when you upgrade.

Here is an easy way to override that function in the JS for just the skin that you want to apply this to.

Copy the entire function into a new .js file (let's call it MenuImg.js) and put that file in your skin's folder.

Then in your skin, put a reference to the MenuImg.js file.  Now this MenuImg.js file will get loaded after the spmenu.js file, but only when using this skin, and since it has a function in it with the same name, this one will be used instead of the orginal (this is because of how JS is loaded into the DOM).

Oh, and I found that there is an extra space in the test of the TD cell that holds the tabname, so change the line I posted earlier to:

     document.getElementById("MENU_IMG").className= 'MENU_IMG_' + oCell.innerText.replace(/^\s*|\s*$/g,""); //the innerText of the Cell is the name of the tab

I have worked this up as an example with the core DNN-Blue skin.

If anyone wants me to make it available for download just let me know.

If I'm following this thread correctly, I have implemented the same effect by adding the following code to the dnncore.js

/*************************************************************************
  This code is from Dynamic Web Coding at http://www.dyn-web.com/
  Copyright 2003 by Sharon Paine
  See Terms of Use at http://www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

/* 
    dw_layer.js
    a few commonly-used functions for handling positioned divs
    used by Writing to Layers examples at www.dyn-web.com 
*/

layerHandler = {
  getRefs: function (id) {
    var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
    if (el) el.css = el.style? el.style: el;
    return el;
  },
 
  writeLayer: function (el, cntnt) {
    if (typeof el.innerHTML!="undefined") {
        el.innerHTML = cntnt;
    } else if (document.layers) {
     el.document.write(cntnt);
     el.document.close();
    }
  },
 
  shiftTo: function (el,x,y) {
    var px = (document.layers || window.opera)? 0: "px";
    if (x != null) el.css.left = x + px;
    if (y != null) el.css.top = y + px;
  },

  show: function (el) { el.css.visibility = "visible"; },
  hide: function (el) { el.css.visibility = "hidden"; }
}

var imageHandler = {
  imgs: [], path: "",
  preload: function() {
    for (var i=0; arguments[i]; i++) {
      var img = new Image(); img.src = this.path + arguments[i];
      this.imgs[this.imgs.length] = img;
    }
  }
}

// returns amount of vertical scroll
function getScrollY() {
 var sy = 0;
 if (document.documentElement && document.documentElement.scrollTop)
  sy = document.documentElement.scrollTop;
 else if (document.body && document.body.scrollTop)
  sy = document.body.scrollTop;
 else if (window.pageYOffset)
  sy = window.pageYOffset;
 else if (window.scrollY)
  sy = window.scrollY;
 return sy;
}

// returns amount of horizontal scroll
function getScrollX() {
 var sx = 0;
 if (document.documentElement && document.documentElement.scrollLeft)
  sx = document.documentElement.scrollLeft;
 else if (document.body && document.body.scrollLeft)
  sx = document.body.scrollLeft;
 else if (window.pageXOffset)
  sx = window.pageXOffset;
 else if (window.scrollX)
  sx = window.scrollX;
 return sx;
}

// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
 origWidth = window.innerWidth; origHeight = window.innerHeight;
 window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// preload images to be written to layer

// Customized links to the desired on/off images here...

imageHandler.preload("http://localhost/images/Video.gif","http://localhost/images/Business.gif","http://localhost/images/Classifieds.gif","http://localhost/images/Events.gif","http://localhost/images/AdCalls.gif","http://localhost/images/Blog.gif");
// content to be written to infoDiv onmouseover of links
var LinkText1 = '<img src="http://localhost/images/Video.gif" width="121" height="23" alt="" border="0">';
var LinkText2 = '<img src="http://localhost/images/Business.gif" width="191" height="23" alt="" border="0">';
var LinkText3 = '<img src="http://localhost/images/Classifieds.gif" width="221" height="23" alt="" border="0">';
var LinkText4 = '<img src="http://localhost/images/Events.gif" width="147" height="23" alt="" border="0">';
var LinkText5 = '<img src="http://localhost/images/AdCalls.gif" width="152" height="24" alt="" border="0">';
var LinkText6 = '<img src="http://localhost/images/Blog.gif" width="90" height="28" alt="" border="0">';
var page_loaded; // set true onload
function doFlexTip(id,e,sHTML,offBtnTop,offBtnLft) {

  var el = layerHandler.getRefs(id);

  if (!el) return;
  layerHandler.hide(el); // just in case ...
  var cntnt = '<div class="info">' + sHTML + '</div>';

  // get position of onmouseover event and use it to position layer 
 e = (window.event)? window.event: e;
 if (e) {
 var n = LinkElement(e);
 var btnLeft = GetElementLeft(n);
 var btnTop = GetElementTop(n);
 var x =  btnLeft-offBtnLft;
 var y =  btnTop+offBtnTop;
 layerHandler.shiftTo(el, x, y);
 }
   layerHandler.writeLayer(el, cntnt);
   layerHandler.show(el);
 }
 
function hideFlexTip(id) {
 
  var el = layerHandler.getRefs(id);
  if (!el) return;
  layerHandler.hide(el);
}
Then in the skin ascx file, add the js function call on the rollover point. Note DHTML positioning:

Sample:

<TD>
   <a href="http://localhost/cabovideonet/CaboChat/tabid/60/Default.aspx" onmouseover="image6.src='<%= SkinPath %>images/newCaboSkin_20b.jpg';doFlexTip('infoDiv',event,LinkText6,63,16)"
onmouseout="image6.src='<%= SkinPath %>images/newCaboSkin_20.jpg';;hideFlexTip('infoDiv')">
<img name="image6" src="<%= SkinPath %>images/newCaboSkin_20.jpg" border=0></a></TD>

Finally, just add the div at the bottom of your ascx file.

 </TR>
<DIV id="infoDiv" class="infoDiv"></Div>
</TABLE>
</Body>

Took awhile to get it right, but it works pretty slick...

http://67.165.200.57/cabovideonet

Hope that helps!

Eric