Link mouseover
Ik heb een vraagje...:P
Als ik bij een bepaalde link me muis erop doet wil ik graag een divje over de hele pagina heen met daarin natuurlijk wat info, als je begrijp wat ik bedoel, dus dat het divje naar voren komt en de pagina op de achtergrond blijft.
Hoe doe ik dat??
Alvast Bedankt.
Romano
Gewijzigd op 01/01/1970 01:00:00 door Romano
document.getElementById('idvandiv').style.visibility = 'visible';
Javascript N00B
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
<script language="Javascript">
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
// stukkie css
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
?>
<script language="Javascript">
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
// stukkie css
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
?>
Ik krijg nu niks te zien .:S:S
php tags staan er om te highlighten
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="Javascript">
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
<script type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
</script>
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
<script type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
</script>
En je moet dat stukje css ook nog even in de head zetten ;)
Gewijzigd op 01/01/1970 01:00:00 door Paul K
Paul v/d Knaap schreef op 04.02.2007 14:30:
Het moet zo zijn:
En je moet dat stukje css ook nog even in de head zetten ;)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="Javascript">
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
<script type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
</script>
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
document.write("<div id='mydiv'>Hoi</div>");
}
</script>
<script type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
}
</script>
En je moet dat stukje css ook nog even in de head zetten ;)
Sorry maar ik zie nog steeds niets :S.
document.getElementById("mydiv").style.visibility = 'visible';
}
Je maakt hem eerst visible, en dan pas maak je hem. CSS hoort tussen style-tags, en niet tussen scripttags. Doe zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script language="Javascript">
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
}
</script>
<style type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
visibility: hidden;
}
</style>
<div id='mydiv'>Hoi</div>
<a href="javascript:void(0)" onmouseover="hello()">Boe</a>
function hello() {
document.getElementById("mydiv").style.visibility = 'visible';
}
</script>
<style type='text/css'>
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
visibility: hidden;
}
</style>
<div id='mydiv'>Hoi</div>
<a href="javascript:void(0)" onmouseover="hello()">Boe</a>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="Javascript">
function hello()
{
document.getElementById("mydiv").style.visibility = 'visible';
}
function bye()
{
document.getElementById("mydiv").style.visibility = 'hidden';
}
</script>
<style type='text/css'>
html, body {
height:100%;
width:100%;
}
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
visibility: hidden;
}
</style>
</head>
<body>
<div id='mydiv'>Hoi</div>
<a href="#" onmouseout="bye();" onmouseover="Javascript: hello();">Boe</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="Javascript">
function hello()
{
document.getElementById("mydiv").style.visibility = 'visible';
}
function bye()
{
document.getElementById("mydiv").style.visibility = 'hidden';
}
</script>
<style type='text/css'>
html, body {
height:100%;
width:100%;
}
#mydiv {
position:absolute;
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
background:#CCCCCC;
font-size:12px;
font-family:Verdana;
color:#000000;
border:1px solid #000000;
visibility: hidden;
}
</style>
</head>
<body>
<div id='mydiv'>Hoi</div>
<a href="#" onmouseout="bye();" onmouseover="Javascript: hello();">Boe</a>
</body>
</html>
Ik krijg hem midden in beeld maar ik wil hem direct onder mijn link.:P
Gewijzigd op 01/01/1970 01:00:00 door Romano
top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;
en de positie realative maken
Romano schreef op 04.02.2007 17:01:
Edit:
Ik krijg hem midden in beeld maar ik wil hem direct onder mijn link.:P
Ik krijg hem midden in beeld maar ik wil hem direct onder mijn link.:P
Oke onder link is ook gelukt maar ik heb een bepaalde breedte en hoogte meegeven waardoor een heel groot wit vak ontstaat:
http://tuning.byethost17.com/test2.htm
Nou wil ik dat het divje over de tekst heen komt en het witte vak wegvalt.
Dan ben ik helemaal blij:P
edit:
nog een 2e probleem ondekt als ik nu met 2 links en met muis op de 2e link gaat staan doet verschijnt hij weer onder de 1e link en niet onder de 2e link.
Gewijzigd op 01/01/1970 01:00:00 door Romano
mod-edit::
Bumpen
Bumpen is twee keer achter elkaar posten in je eigen topic om hem weer bovenaan in de lijst te krijgen. Omdat het zéér opdringerig overkomt is bumpen is pas na 24 uur toegestaan. Bumpen kan een reden zijn voor de admins en mods om een topic te sluiten. Gebruik het
knopje om je tekst aan te passen indien nodig.
Bumpen is twee keer achter elkaar posten in je eigen topic om hem weer bovenaan in de lijst te krijgen. Omdat het zéér opdringerig overkomt is bumpen is pas na 24 uur toegestaan. Bumpen kan een reden zijn voor de admins en mods om een topic te sluiten. Gebruik het
knopje om je tekst aan te passen indien nodig.Gewijzigd op 01/01/1970 01:00:00 door Romano
als iemand het probleem ziet:P.
edit: 100 posts:P
Gewijzigd op 01/01/1970 01:00:00 door Romano
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
/* Div uit */
#div {
display: none;
}
/* Div aan */
#div {
display: block;
}
#div {
display: none;
}
/* Div aan */
#div {
display: block;
}
Met ruimte innemen bedoel ik dat als de div tussen twee andere elementen staat de achtergrond van het bovenliggende element te zien is, tenzij je de div een breedte en hoogte van 0px mee geeft.
Elwin
Heb zelf een voorbeeldje gemaakt:
http://89.98.247.116/openbaar/PHPHulp/hover.php
als ik nu met 2 links en met muis op de 2e link gaat staan verschijnt hij weer onder de 1e link en niet onder de 2e link.
snappie hem??
en je gaat over e 2e link heen staat hij dan wel bij de 2e link of weer bij de eerste ???