Solved

Hidden/visible coding?

Posted on 2001-09-13
15
326 Views
Last Modified: 2010-04-09
Is is possible to have simple code where on mouseover it changes visible properties similar to this?  I want a small star to show up when the user moves the mouse over an area and for the star to be hidden when the user moves the mouse off of it.  Maybe something like this...

<DIV id=Higlight1
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 100px; Z-INDEX: 2; visibility: hidden">
  <DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>

<DIV id=Higlight2
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 200px; Z-INDEX: 2; visibility: hidden">
  <DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>

<DIV id=Higlight3...

<P><MAP name=Navigaional Bar>

<AREA alt="Highlight Area 1"
  coords=309,7,32,7,322,29,291,12
  href="http:someplace.html"
  onmouseout="'Highlight1.visibility:'hidden')"
  onmouseover="Highlight1.visibility:'visible'">

<AREA alt="Highlight Area 2"
  coords=356,7,32,7,412,29,291,12
  href="http:someotherplace.html"
  onmouseout="'Highlight2.visibility:'hidden')"
  onmouseover="Highlight2.visibility:'visible'">

<AREA alt="Highlight Area 3"...
</MAP></P>

I would appreciate the help.
0
Comment
Question by:assistant
  • 7
  • 4
  • 3
  • +1
15 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6479122
<script>
function shElement(lName, visStr)
{
  obj = (document.layers)?document.layers[lName]:document.all[lName];
  if(obj && document.all) obj = obj.style;
  if(obj) obj.visibility=visStr;
}
</script>

Now call the function like:
onMouseover="shElement('Highlight2', 'visible')"
onMouseout="shElement('Highlist2', 'hidden')"


Regards,
CJ
0
 
LVL 3

Expert Comment

by:bigbed
ID: 6479361
you could always load up a small clear image.
then on mouseover/mouseout of your area, simply swap in/out the star image and the clear image.
A 1 pixel clear gif won't take up much space, will stretch to fit your width and height definitions and the swapping is probably easier to do cross-browser than trying to hide/show a div.
just a thought...
0
 

Author Comment

by:assistant
ID: 6483967
Thanks CJ and Bigred for your comments.  CJ I have tried the script that you sent and it works with exactly what I asked, however, is there a way to tell it that onMouseover and onMouseout that I want to change several items at once?  For instance,
<MAP NAME="new">
<AREA alt="Our Mission"
      SHAPE=RECT COORDS="0,0,124,19"
      HREF="aboutchurch.html"
      onMouseover="shElement('Mission', 'visible')
                            ('star', 'visible')"
      onMouseout="shElement('Mission', 'hidden')
                            (star', 'hidden')
                            (defaultbmp',visible)"

Some areas I would want to have more hidden/visible objects than others. I increased the points because of my posting was actually answered but I know this is more work.  Thanks.

0
 
LVL 10

Expert Comment

by:dij8
ID: 6489927
Calling multiple functions is as easy as using a semicolon:
onMouseover="shElement('Highlight1', 'hidden');shElement('Highlight2', 'visible');shElement('Highlight3', 'hidden');status='Highlight 2';return true;"
onMouseout="shElement('Highlight1', 'visible');shElement('Highlight2', 'hidden');shElement('Highlight3', 'hidden');status='';return true;"

You can add as many as you like.  Sometimes it may be better to call a function that does all this though depending on how much you want to achieve.
0
 

Author Comment

by:assistant
ID: 6491185
Thanks, dij8.  I understand the semicolons you added, but can you tell me what status='Highlight 2';return true;" in the first line and status='';return true;" in the second line mean?

Next, why would you have to identify shElement('Highlight3','hidden'); if it is not being changed?

Last, where is a good place to start learning how to write these functions, what the parts mean, like status=, etc?
0
 
LVL 10

Expert Comment

by:dij8
ID: 6491309
I added the extra to show you that there is essentially no limit to how many you can have.  Nor are you limited to the same function name.  With your code this would generate an error because there is no "Highlight3", it was just a demonstration.  The status thing is a demo of a different function call.  In this instance it changes the status bar (the bar at the bottom that shows link locations as you hover over them). It changes to whatever is between the quotes.  The "return true;" is necessary for the status thing to work.

Some of the sites I use a lot to work out scripting are:
http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
http://www.dynamicdrive.com
and occasionally (but not often):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp

I have a huge collection of links but these are my usual scripting ones.
0
 

Author Comment

by:assistant
ID: 6491426
Thanks again dij8.  Can I get a copy of the status function?  

Also, I want to award you the 200 points for this question because this has been so beneficial to me.

I also owe a 100 points to CJ_S.  How do I give him/her their points too?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 22

Accepted Solution

by:
CJ_S earned 200 total points
ID: 6491476
<script>
function shElement()
{
 for(i=0;i<shElement.arguments.length;i+=2)
 {
 lName=shElement.arguments[i];
 visStr=shElement.arguments[i+1];
 obj = (document.layers)?document.layers[lName]:document.all[lName];
 if(obj && document.all) obj = obj.style;
 if(obj) obj.visibility=visStr;
 }
}
</script>

Now call the function like:
onMouseover="shElement('Highlight2', 'visible', 'Highlight3', 'hidden')"

keep adding them ;-)

Just click the button saying "Accept comment as answer" or any other button above the post.

Regards,
CJ
0
 

Author Comment

by:assistant
ID: 6491511
Boy I must have really screwed that last comment up.  Here is what I meant to say;

You said 'The status thing is a demo of a different function call. In this instance it changes the status bar (the bar at the bottom that shows link locations as you
hover over them). It changes to whatever is between the quotes.  The "return true;" is necessary for
the status thing to work.

What I was asking for was a copy of the function call that changed the status bar.  It didn't change my status bar when I typed it as in your comment, so I assumed that 'status' was another function.

Next, I know how to award you these points dij8, and that is what I am going to do.  What I am asking is how to give CJ_S 100 points also, not any of your 200 points.

Do I ask a new question with 'Points for CJ_S' or what?
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6491537
Now I'm pretty much confused here...
0
 

Author Comment

by:assistant
ID: 6491580
I am sorry CJ_S, I must be still asleep here!  It has been a LOONNNNNNNGGGG night!  This cold has taken me down bad.  But that is no real excuse for reading the correct expert's name who has been helping me so much!

I thought I have been corresponding with dij8 for the last few messages.  OK, here is what I want to do now.  I want to award you these points because you answered what I asked, and more.  Now, I also would like to award dij8 200 points, because I think that is the only 'fair' thing to do.

I know that I just click on the comment to accept it as an answer, and you will be awarded your points, how do I give dij8 his/her points?

I sure hope I made this plain.  I appreciate everyone's help in this matter.  It may seem like something small to you guys, but it has been a blessing to me.
0
 

Author Comment

by:assistant
ID: 6491750
Excellent answer! Thanks for all of your help.  It is really appreciated.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6492611
Glad to be of service

Just ask a question titled "for dij8 (Q20182337)"

Regards,
CJ
0
 
LVL 10

Expert Comment

by:dij8
ID: 6492784
status is a part of the DOM (Document Object Model) so in changing it all you are doing is referencing the status object.  You could try window.status or top.status (especially if you are using frames).  The best demonstration I can give is to have two identical links and see what happens when you do the mouseover thing.
<a href="http://dij8.com">outrageous poor taste plug for dij8's site</a>
<a href="http://dij8.com" onmouseover="status='visit dij8.com';return true;" onmouseout="status='';return true;">outrageous poor taste plug for dij8's site</a>

Hover over the top one (when coded in a page and not in this text of EE) and you will see the status bar change to "http://dij8.com".  Hover over the bottom one and the status will change to "visit dij8.com".  I add the onmouseout otherwise the status would stay on "visit dij8.com".

Once coded into a page if this doesn't work then try changing "status=" to "window.status=".  You shouldn't need to though.

If you still need help with this then just ask.  I am more than willing to help.
0
 

Author Comment

by:assistant
ID: 6494396
I posted a question for dij8 (Q20182337), as you stated CJ.  Thanks again guys, I will have more questions soon, I am sure.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now