Handling onmouseover in a Style Sheet

  • Thread starter Bk Chockalingam
  • Start date
B

Bk Chockalingam

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.
-----
 
D

Disco

Bk Chockalingam said:
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()"
.......... said:
<!-- 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.
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...
 
B

Bk Chockalingam

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.

Disco said:
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()"
......... said:
<!-- 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.
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...
 
E

Evertjan.

Bk Chockalingam wrote on 09 jul 2003 in comp.lang.javascript:
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 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...
 
D

Disco

Bk said:
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.

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.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top