Question

i’m having a bit of a problem here. I found this script on the web, and changed it around a bit for my needs.
This script shows a preview of the image following the mouse onmouseover.

Originally, there was only one way of doing this. But i have 2 different sections on my website in which i want to display images with different attributes (height, width).
I was able to do that, the problem is that on the second section, the src (file name) is a thumbnail of the actual picture i want to display, so when it dows, it just blows up a very small picture, which looks very bad. But hopefully, this will make things easier: all the thumbnails are named whaterver_small.jpg and the originals, whatever.jpg Now, if i could remove _small or _small.jpg and replace with .jpg from the end of that file, that would display the original picture for me, which would be great. This is how the funcion is called on html:

Original size, no need changing:

<a href=http://www.whatever.net/1.html');">
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage1(this.src,this,'Whatever')" /></a>

Show image2, the one i’m having problems with.

<a href=http://www.whatever.net/1.html');">
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage2(this.src,this,'Whatever')" /></a>

This is the script

    var floatWidth = 150;  // set the width of the floating image
    var floatHeight = 100;  // set its height
    var floatWidth2 = 320;  // set the width of the floating image
    var floatHeight2 = 240;  // set its height

    var midWindow = 0;
    var nContainer = "";
    var IE = false;

    if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

    function stayHome(m){        

            if (IE)
                    {
                    var currX = event.clientX;
                    var currY = event.clientY;
                    }
            else        {
                    var currX = m.pageX;
                    var currY = m.pageY;
                    }
            if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
                    {
                    var iL = document.documentElement.scrollLeft;        
                    var iV = document.documentElement.scrollTop;
                    }
            else        {
                    var iL = document.body.scrollLeft;        
                    var iV = document.body.scrollTop;        
                    }
            if (currX > midWindow+80)
                    {
                    var msgWidth = nContainer.clientWidth;
                    if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'}
                    else {nContainer.style.left = (currX-msgWidth-10)+'px'}
                    }
            else        {
                    if (IE){nContainer.style.left = (currX+15+iL)+'px'}
                    else {nContainer.style.left = (currX+15)+'px'}
                    }
            if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)+70)+'px'}
            else {nContainer.style.top = (currY-(floatHeight/2)+70)+'px'}
    }        

    function hideImage(){

            while (nContainer.lastChild)
                    {nContainer.removeChild(nContainer.lastChild)}
            document.getElementById('isFloat').style.display = 'none';
    }

    function showImage(isImg,currItem,currCaption){

            document.getElementById('isFloat').style.display = 'inline';
            nIMG  = document.createElement('img');
            nContainer.appendChild(nIMG);
            nIMG.setAttribute('src',isImg);
            nIMG.setAttribute('width',floatWidth);
            nIMG.setAttribute('height',floatHeight);
            nCaption = document.createElement('div');
            nCaption.style.textAlign = "center";
            nCaption.style.backgroundColor = '#EAE3C6';
            nCaption.style.padding = '5px';
            nCaption.style.color = '#000000';
            nCaption.style.fontFamily = 'Sans-serif';
            nCaption.style.fontSize = '10pt';
            nCaption.style.borderTop = "1px solid black";
            nContainer.appendChild(nCaption);
            nCaption.innerHTML = currCaption;
            currItem.onmouseout=hideImage;
    }

    function showImage2(isImg,currItem,currCaption){

            document.getElementById('isFloat').style.display = 'inline';
            nIMG  = document.createElement('img');
            nContainer.appendChild(nIMG);
            nIMG.setAttribute('src',isImg);
            nIMG.setAttribute('width',floatWidth2);
            nIMG.setAttribute('height',floatHeight2);
            nCaption = document.createElement('div');
            nCaption.style.textAlign = "center";
            nCaption.style.backgroundColor = '#EAE3C6';
            nCaption.style.padding = '5px';
            nCaption.style.color = '#000000';
            nCaption.style.fontFamily = 'Sans-serif';
            nCaption.style.fontSize = '10pt';
            nCaption.style.borderTop = "1px solid black";
            nContainer.appendChild(nCaption);
            nCaption.innerHTML = currCaption;
            currItem.onmouseout=hideImage;
    }


    function getMidWindow(){

            if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
                    {
                    midWindow = document.documentElement.clientWidth/2;
                    }
            else        {
                    midWindow = document.body.clientWidth/2;
                    }
    }

    function initFloatImg(){

            var nBody = document.getElementsByTagName('body')[0];
            var nDiv = document.createElement('div');
            nDiv.id = "isFloat";
            nDiv.style.position = "absolute";
            nDiv.style.top = "0px";
            nDiv.style.left = "0px";
            nDiv.style.border = "1px solid black";
            nDiv.style.padding = "5px";
            nDiv.style.backgroundColor = "#ffffff"
            nBody.appendChild(nDiv);
            nContainer = document.getElementById('isFloat');
            document.onmousemove = stayHome;
            hideImage();
            if (!IE){document.captureEvents(Event.mousemove)}
            getMidWindow();
    }

    onload=initFloatImg;
    onresize=getMidWindow;

Update:

Ok, so i updated the script in this page, and it works perfectly now.
I ran into another problem, when the picture that has the mouse over, is near the end of the page, the preview is cutoff. I’d like to be able to move the preview up, so there’s no scroll bar.
Here’s a live example of a functional one: http://www.soccer.com/Navigation.process?Ne=178&N=4294960224+346
Where the picture is never cutoff.

Answer 1

Replace following line in the showImage2 function

nIMG.setAttribute('src',isImg);

with

nIMG.setAttribute('src',isImg.replace(/_small\./, '.'));