Higlighted on mouseOver with 1 highlighted by default

[mudshark]

I have the following script which grabs all images in a div with id "right" and attaches "_mo" (+ suffix) to them on mouseover. These images are navigation thumbs that each link to a page which has the full version of the image (see for instance this page). The following works fine:

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();

window.onload = init;

function init()
{
        if (!W3CDOM) return;
        var nav = document.getElementById('right');
        var imgs = nav.getElementsByTagName('img');
        for (var i=0;i<imgs.length;i++)
        {
                imgs[i].onmouseover = mouseGoesOver;
                imgs[i].onmouseout = mouseGoesOut;
                var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
                mouseOuts[i] = new Image();
                mouseOuts[i].src = imgs[i].src;
                mouseOvers[i] = new Image();
                mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix;
                imgs[i].number = i;
        }
}

function mouseGoesOver()
{
        this.src = mouseOvers[this.number].src;
}

function mouseGoesOut()
{
        this.src = mouseOuts[this.number].src;
}

However, I would like to extend it so that if a user is on a page that corresponds to the "active" thumb, that thumbnail-image has the "_mo" attached by default. I understand I'd have to give the "active" thumbnail an id of, say, "current" and then use the DOM to access it -- but that's where the trouble starts...

Thanks for any help!

[gRoberts]

could you not simply do an indexOf on the id to check to see whether it has current or _mo already in there, and if it does then to ignore it.

[mudshark]

could you not simply do an indexOf on the id to check to see whether it has current or _mo already in there, and if it does then to ignore it.

That sounds good -- erh, how do I go about doing it with the above script though? Thanks for your response...

[gRoberts]

 for (var i=0;i<imgs.length;i++)
        {
        if(imgs[i].id.indexOf('_mo') == 0) {// _mo is not found in the id
            imgs[i].onmouseover = mouseGoesOver;
            imgs[i].onmouseout = mouseGoesOut;
            var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
            mouseOuts[i] = new Image();
            mouseOuts[i].src = imgs[i].src;
            mouseOvers[i] = new Image();
            mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix;
            imgs[i].number = i;
        }
        }

I'm guessing thats where it's needed. basically its

if(imgs[i].id.indexOf('_mo') == 0) // checks if _mo doesn't exist in the id
if(imgs[i].id.indexOf('_mo') > -1) // checks if _mo exists

[mudshark]

That didn't quite work... What I've come up with so far is this:

function init()
{
        if (!W3CDOM) return;
        var nav = document.getElementById('right');
        var imgs = nav.getElementsByTagName('img');
        var active = document.getElementById('current');
        for (var i=0;i<imgs.length;i++)
        {
        	if(imgs[i] != active)
        	{
                imgs[i].onmouseover = mouseGoesOver;
                imgs[i].onmouseout = mouseGoesOut;
                var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
                mouseOuts[i] = new Image();
                mouseOuts[i].src = imgs[i].src;
                mouseOvers[i] = new Image();
                mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_mo" + suffix;
                imgs[i].number = i;
        	}
        }
}

... which basically switches each image to its ("_mo") onmouseover state (when hovered over with the mouse) except for the image with an id of "current", which is now stuck in "non rollover" state. However, that's exactly the image I want to have a default rollover state for. It should simply load as "image_mo.jpg", and not change onmouseover. Hope that makes some sense...

[mudshark]

Ah, nevermind: solved. Using the above script with the help of a dash of php did the trick. If you're wondering: the php-loop checks whether each current thumbnail image is associated with the page's large image; if so it adds the "_mo" suffix (no js needed) as well as "id="current". Bliss.