SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onmouse over effect help

    code:
    var titleHREF = document.createElement("a");
    titleHREF.className = "websearch-title";
    titleHREF.href = link;
    titleHREF.target = "_blank";

    How to add the onmouse over offect to the anchor tag?
    is that the same as this
    titleHREF.onmouseover = "mouseovereffect()";
    titleHREF.onmouseout = "mouseouteffect()";

    But the above one is not working.Can any one help me out?

    Thanks

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are assigning a text string to the event. You need to do the following:

    Code:
    titleHREF.onmouseover = mouseovereffect;
    
    function mouseovereffect(/* Event object */ e) {
        // Internet Explorer has its own way to retrieve the event...
        if (!e) e = window.event; 
    
        // do magic
    }
    or use an anonymous function:
    Code:
    titleHREF.onmouseover = function(/* Event object */e) {
        if (!e) e = window.event;
    
        // do magic
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try abstracting you event binding to something like

    Code:
    addevent = function(){
    	if (window.addEventListener){
    	    return function(el, evtype, fn) {
    			el.addEventListener(evtype, fn, false); 
    		};
    	}else if (window.attachEvent){
    		return function(el, evtype, fn) {
    			el.attachEvent("on"+evtype, fn);
    		};
    	}
    }();
    then add the event with addevent(theelement, eventtypeminustheon, callback)

    Code:
    addevent(titleHREF,"mouseover", mouseovereffect);
    I've not tested it but it should be close enough to get things moving

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    But my function is in different file. So can i call that function here.
    Like as you mentioned just

    titleHREF.onmouseover = mouseovereffect;

    titleHREF.onmouseout = mouseouteffect;

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Atleast like this

    titleHREF.onmouseover = function() {mouseovereffect()";};

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following examples do the same:
    Code:
    titleHREF.onmouseover = function() { mouseovereffect(); };
    titleHREF.onmouseover = mouseovereffect;
    First one uses an anonymous function. There is no need to use this approach if you will not call other functions on this event.


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
  •