[Javascript] What was last rollover?

Nick Fitzsimons nick at nickfitz.co.uk
Thu Oct 4 13:32:30 CDT 2007


On 4 Oct 2007, at 19:07, tedd wrote:

> I have three images on a web page with a css rollover condition,  
> such as:
>
> img1:hover
> {
> border: 1px solid red;
> }
>
> img2:hover
> {
> border: 1px solid blue;
> }
>
> img3:hover
> {
> border: 1px solid green;
> }
>
> If the user moves his/her cursor over an image, then the border's
> corresponding color changes -- no problems there.
>
> But, how can I determine which image was subject to the *last*  
> rollover?

I haven't tested this but, assuming that the elements (not restricted  
to images) have id attributes, you can do something like:

var MouseoverTracker = {
    mostRecent: null,
    track: function(element) {
       this.mostRecent = element;
    },
    bind: function(elementIds) {
       var that = this;
       for (var i = 0; i < elementIds.length; i++) {
          document.getElementById(elementIds[i]).onmouseover =  
function() {
             that.track(this);
          }
       }
    }
}

window.onload = function() {
    MouseoverTracker.bind([
       "firstImage",
       "secondImage",
       "paragraphsWillWorkToo",
       "anythingWithAnIdToPutInHereReally",
       "kthxbai"
    ]);
}

and then, for example, get the ID of the most-recently-mouseovered  
element using

alert(MouseoverTracker.mostRecent.id);

BTW, your hover states won't work in IE6 as that only supports hover  
on links :-(

HTH,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/




More information about the Javascript mailing list