473,383 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

how can I switch CSS div hidden and visible with JS

27
I am trying to design a help section where i have an image which if you place the mouse over it displays another image next to itself. I heard it is possible to make a div section invisible and when the mouse is over to make the div section visible but I have no clue how to do that since i am very new and still learning. I would appreciate of any of you can give me an example of the javascript and js and how to combine then with a short explanation. Thanks in advance
Aug 24 '07 #1
4 8524
gits
5,390 Expert Mod 4TB
hi ...

have a look at the following example:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function hide(val) {
  5.                 var ele = document.getElementById('section');
  6.                 ele.style.display = val ? 'none' : 'block';
  7.             }
  8.         </script>
  9.     </head>
  10.     <body>
  11.         <div onmouseover="hide(true);">hide section</div>
  12.         <div onmouseover="hide(false);">show section</div>
  13.         <div id="section" style="background-color: red;">
  14.             this is to hide or show
  15.         </div>
  16.     </body>
  17. </html>
  18.  
kind regards
Aug 24 '07 #2
Just to let everyone know, though, javascript is not actually needed if you're using CSS.

http://www.pmob.co.uk/pob/disjointed1.htm

Disjointed rollovers are events affected by the mouse. CSS handles mouse events like active (mouse clicking), visited (had been clicked once in a browser session), hover (mouseover) and normal (no mouse). Using visibility:visible and visibility: hidden on these CSS mouse events (actually considered anchor events) will work for those without Javascript working on their browsers.

However if you're not using CSS and you're more comfortable with JS, go fer it.
Aug 25 '07 #3
drhowarddrfine
7,435 Expert 4TB
Hello Stomme poes. .
Jan 18 '09 #4
Dormilich
8,658 Expert Mod 8TB
@Stomme poes
the technical term for that is "pseudo-class" and "pseudo-element". W3C – CSS 2.1
  • active
  • first-child
  • focus
  • hover
  • lang
  • link
  • visited
  • after
  • before
  • first-letter
  • first-line
Jan 18 '09 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Andrew | last post by:
I have a <div> section of text in my page that I want to make visible via an input check box associated with an OnClick javascript. I can do this OK but the problem is that the space for the hidden...
7
by: reneecccwest | last post by:
Hello, Aren't they same conditional statment to show the resut? but somehow "switch" condtional stmt always gets the default value when I excute? what did I wrong? <script language="JavaScript">...
0
by: N M | last post by:
Hi all, I've been scratching my head (to the bone) try to find a way of switching from one .Net application to another. ie. I click a button on a controller application and the other one is...
1
by: tabert | last post by:
I want to use JavaScript when a button is clicked to show and hide a SPAN or DIV. This works in both IE and Netscape, but what I'd like to happen is for there to be no white space where the hidden...
1
by: Andrew Wrigley | last post by:
Hi Should a hidden form become visible when all other forms are closed? This is what happens, and to ensure that it is always hidden, I have to set the on got focus event handler of the form...
5
by: NTE | last post by:
Access 2000, My application has a main form that the users interact with. There are 2 hidden fields. When they select "filter by form" from the menu, the hidden fields become visble. Is...
9
by: PhreakRox | last post by:
The ToClose switch in this program is not working as expected, it allways returns a null value, if anyone knows a way to fix up the code, or can suggest a better method of doing so, your help would...
8
by: =?Utf-8?B?cGVsZWdrMQ==?= | last post by:
i have a GridView and a hidden field : <asp:TemplateField Visible=false > <ItemTemplate > <asp:HiddenField Value="<%#Eval("isActive")%>" id="hidIsActive" runat=server /> </ItemTemplate>...
2
by: Spizzat2 | last post by:
I've got a web page with some hidden elements that can be shown through various methods. What I'd like is, when the user tries to copy the visible stuff on the page, it doesn't copy the hidden...
4
by: vershner | last post by:
HI there, is it possible to make an element hidden, then make it visible again in the same function? I have a number of elements, only one of which should be visible at any time. The users can...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.