Link mouseover

Door Romano op 04-02-2007 13:32

3.574 views

Heya php'ers

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

Onbekende gebruiker

04-02-2007 13:36

Beetje met JavaScrip goochelen; Probeer eens iets met
document.getElementById('idvandiv').style.visibility = 'visible';

Romano

04-02-2007 13:46

Sorry maar ik ben helemaal niet bekend met javascript

Javascript N00B

Romano

04-02-2007 14:27

ik heb nu dit:
<?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;
}
?>

Ik krijg nu niks te zien .:S:S
php tags staan er om te highlighten

Paul K

04-02-2007 14:30

Het moet zo zijn:


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

En je moet dat stukje css ook nog even in de head zetten ;)

Romano

04-02-2007 14:36

Paul v/d Knaap schreef op 04.02.2007 14:30

Het moet zo zijn:


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

En je moet dat stukje css ook nog even in de head zetten ;)

Sorry maar ik zie nog steeds niets :S.

- -

04-02-2007 14:49

function hello() {
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:


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

Citroen Anoniem Graag

04-02-2007 15:23

Ik ben er nog even mee bezig geweest, met onder staande code verdwijnt het 'pop upje' ook weer


<!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>

Romano

04-02-2007 17:01

Edit:
Ik krijg hem midden in beeld maar ik wil hem direct onder mijn link.:P

Citroen Anoniem Graag

04-02-2007 17:26

Dit stukje uit de css weg

top:50px;
left:50px;
width:300px;
height:300px;
margin:200px;

en de positie realative maken

Romano

04-02-2007 17:43

Romano schreef op 04.02.2007 17:01
Edit:
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.

Reageren

Inloggen om te reageren