SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Higlighted on mouseOver with 1 highlighted by default

    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:
    Code:
    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!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  3. #3
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    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...

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     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

    Code:
    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


  5. #5
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't quite work... What I've come up with so far is this:
    Code:
    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...

  6. #6
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •