SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    attaching onmouseover/out properties to a class ?

    is this possible ? or is there no over way than writing these everytime ?

    Thanks
    Quentin

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: attaching onmouseover/out properties to a class ?

    Originally posted by quenting
    is this possible ? or is there no over way than writing these everytime ?

    Thanks
    Quentin
    I don't think it's possible until CSS2 becomes more widely implemented in browsers.

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure what you mean, but you can do the following with javascript: (although i had some troubles with it. http://www.sitepointforums.com/showt...threadid=90724 )

    In a script in the head of the document:
    (The first 2 lines are standard and are used because of the differences between IE and NS6/Moz)
    PHP Code:
    function al(evt){
            
    evt = (evt) ? evt : (window.event) ? window.event "";
            var 
    elem = (evt.target) ? evt.target evt.srcElement;
            if (
    elem.className=='myClass'){
    //Here you put whatever you want. Here is an example:
                    
    alert("The mouse is over a "+elem.tagName+" with id "+elem.id+" and with class name "+elem.className);
            }
    }
    function 
    init(){
            
    document.onmouseover=al;

    Call the "init()" function onload.


    This will make sure that the alert in the al() function will execute only if the mouseover occured over something with the class name of "myClass". (check a problem I found with this in the post i gave above)

  4. #4
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can for css/html attributes l

    For instance.


    Code:
    #navi {
    	position: absolute;
    	left: 40px;
    	top: 30;
    	}
    
    #navi a , #navi strong {
    	color: #000;
    	font: 12px arial, fixedsys, sans-serif;
    	text-decoration: none;
    	text-align: center;
    	border: 1px solid #000;
    	display: block;
    	width: 130px;
    	padding: 3px 5px;
    	margin: 7px;
    }
    
    #navi strong {
    	font-weight: bold;
    	background: #DDD;
    }
    
    #navi a {
    	background: #DDD;
    
    }
    
    #navi a:hover {
    	background: #999;
    }
    The a:hover etc, are built in portions of javascript for the onmousehover function etc.

  5. #5
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure, but can you associate the :hover with anything else then a <a> ?
    And my problem is that i actually want a javascript function to be called for every mouseover over a certain class elements.
    i found that using .myclass { behavior: url("somefile.htc") + attachevent method it was possible but this is IE only.

    Didn't find a way to do it in NS/opera

    Quentin

  6. #6
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand what you are trying to do, you could use two classes & some script:
    Code:
    <html>
    
    <head>
    
    <style>
    
    td
    	{
    	padding: 0px;
    	height: 50px;
    	width: 200px;
    	border: 4px inset grey;
    	}
    .on
    	{
    	background: blue;
    	color: white;
    	}
    .off
    	{
    	background: black;
    	color: red;
    	}
    
    </style>
    
    </head>
    
    <body>
    
    <table><tr><td class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Python Ipsum</td></tr></table>
    
    <p>Whoa there! Halt! Who goes there? It is I, Arthur, son of Uther Pendragon, from the castle of Camelot. King of the Britons, defeator of the Saxons, sovereign of all 
    
    England! <span class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Pull the other one!</span> I am.</p>
    
    </body>
    
    </html>
    <disclaimer />Yeah, its front page ugly, but you get the idea.

  7. #7
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well yeah this works if the only type of events for these onmouseover/out is stylistic.
    My problem is my event is javascript, and can't be done with css only.

    To get the idea, let's imagine i have a class and i want the function :
    Code:
    function hello {
        alert("hello");
    }
    to be called on every mouse over an element of this class.

    What i was saying is that doing the followin :

    .myclass { behavior: url(thefile.htc); }

    with in the htc :

    Code:
    <javascript type="text/javascript">
       attachEvent("onmouseover", hello);
    function hello {
        alert("hello");
    }
    </javascript>
    This will do what i want (call the hello method onmouseover / myclass divs) but only under IE, and i'm trying to find a crossbrowser solution better than having to call "onmouseover/out" directly on every div.
    Thanks anyway
    Quentin


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
  •