Handling onmouseover in a Style Sheet

Discussion in 'Javascript' started by Bk Chockalingam, Jul 9, 2003.

  1. Hello,

    I was hoping someone can explain this to me. I'm using CSS and I'm trying to handle the onmouseover event but I'm getting an unexpected result. Here's what my code looks like

    ..........<head><title></title>
    <style>
    #style1{...}
    #style2{...} ... upto #style9{...}
    </style> </head>
    <body>
    <script>
    function updatepage(){
    document.write("<div id="style2........</div>")
    document.write("<div id="style5.........</div?")
    }

    <!-- If I use the following statement, the call to updatepage() makes it write to a new document. But I
    want it to udpate parts of the current document (i.e.) style sheets 2 and 5 -->
    document.write("<div id="style1" onmouseover="updatepage()" ..........</div>")

    <!-- If I use the following statement, then it works as intended. But I don't have the mouseover funcionality-->
    updatepage()
    ......</body>.....

    Any idea what's going on here?



    --
    Thank you.

    Regards,

    Bk.
    -----
     
    Bk Chockalingam, Jul 9, 2003
    #1
    1. Advertisements

  2. Bk Chockalingam

    Disco Guest

    I think I understand what you mean...Try this...

    (only tested in IE.)

    ..........

    function changeMenuGroup(pObj){
    if (pObj.className != "menuGroupClicked"){
    if (pObj.className == "menuGroupActive"){
    pObj.className = "menuGroup";
    pObj.children[0].className = "menuHead";
    pObj.children[1].className = "menuInfo";
    }
    else{
    pObj.className = "menuGroupActive";
    pObj.children[0].className = "menuHeadActive";
    pObj.children[1].className = "menuInfoActive";
    }
    }

    return(true);
    }
    ........................
    <div class="menuGroup" onMouseOver="changeMenuGroup(this)"
    onMouseOut="changeMenuGroup(this)">
    ..........

    and your styles should be set up as menuGroup, menuGroupActive, etc...
     
    Disco, Jul 9, 2003
    #2
    1. Advertisements

  3. Thank you for your response. I am not working with menus in this
    application however. What I have is more like a 3x3 table (although I have
    not defined it as a table). The styles that I have defined (style1 thru
    style9) are square blocks that are positioned as if on a 3x3 table (if you
    can picture it). The middle block is a picture and the outer blocks are
    text. Depending on which block of text the mouse is on, I want to display
    related images in the middle block.

    If you can think of anything else that I can try, please let me know. I'll
    keep working on it in the meantime.

    Thank you.

    Regards,

    Bk.

     
    Bk Chockalingam, Jul 9, 2003
    #3
  4. Bk Chockalingam

    Evertjan. Guest

    Bk Chockalingam wrote on 09 jul 2003 in comp.lang.javascript:
    if the id of the middle block's <img is "m", make the textblocks:

    <div
    onmouseover="document.getElementById('m').src='img1.jpg'">...</div>
    <div
    onmouseover="document.getElementById('m').src='img2.jpg'">...</div>
    <div
    onmouseover="document.getElementById('m').src='img3.jpg'">...</div>
    etc...
     
    Evertjan., Jul 9, 2003
    #4
  5. Bk Chockalingam

    Disco Guest

    You can still use this method to achieve what you are wanting. I only used
    the 'Menu" names because I chopped it out of some code that I had lying
    around.
    Simplyy apply the classes to divs within your cells if you are using tables.
     
    Disco, Jul 9, 2003
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.