javascript beginner menu

**softpedian** · 07-04-2010 06:43 PM

Hello, I'm softpedian and I'm new here.
I started learning javascript few weeks ago and after several readings I started to make a menu. Well, I don't have experience on events, that's for sure. My problem is that I don't want to start with the wrong foot.

All i want it's that from an image, on mouse hover to create a div( or several divs ) and to remove the divs only if the mouse it's not on divs or image!

What I did is this:

Code:

<html>
<head>
<title>Javascript DOM</title>
<script type="text/css">
</script>
<script type="text/javascript" language="javascript">
function CreateDiv()
{
	var t = document.createElement("div");
	t.id = "div1";
	t.setAttribute('style','position:absolute; top:80; left:90');
	t.innerHTML = "<a href=\"www.google.ro\"><img src='3.png' id = 'h' border = '0' onmouseover=\"document.getElementById('h').src = '4.png'\" onmouseout=\"RemoveDiv()\">";
	document.body.appendChild(t);
}
function RemoveDiv()
{
		var p2 = document.getElementById('div1');
		p2.parentNode.removeChild(p2); 
}
</script>
</head>
<body>
<div style="position:absolute; top:20; left: 100;"><a href="www.google.ro"><img border ="0" id="hey" src="1.png" onmouseover= "CreateDiv()" onmouseout="RemoveDiv()"></a></div>
</body>
</html>

Attention! I don't want code, I just want an idea or some code where to start! I want to understand, that's for sure. Thanks!

**justinbarneskin** · 07-05-2010 04:55 PM

Here are some arguments for you to consider...

HTML Code:

<html>
<head>
<title>Javascript DOM</title>
<script type="text/css">
</script>
<script type="text/javascript" language="javascript">
function CreateDiv(x,y,z,im){
	var t = document.createElement("div");
	t.id = z;
	t.innerHTML = '<a href="www.google.ro"><img src="3.png" id = "h" border = "0" onmouseover="document.getElementById(\'h\').src = \'4.png\'" onmouseout="RemoveDiv()" alt="'+im+'">';
	document.body.appendChild(t); 
	t.style.position='absolute';
	t.style.top=x;
	t.style.left=y;

}
function RemoveDiv(d){
		var p2 = document.getElementById( d );
		p2.parentNode.removeChild(p2); 
}
</script>
</head>
<body>
<div style="position:absolute; top:20; left: 100;">
  <a href="www.google.ro"><img border ="0" id="hey" src="1.png" onmouseover= "CreateDiv('80px','90px','div1','4.png')" onmouseout="RemoveDiv('div1')"></a>
  <a href="www.google.ro"><img border ="0" id="hey1" src="1.png" onmouseover= "CreateDiv('180px','190px','div2','5.png')" onmouseout="RemoveDiv('div2')"></a>

</div>
</body>
</html>

**softpedian** · 07-05-2010 07:12 PM

Yes, thanks for reply. It's better now with arguments but my problem it's not fixed. It's hard for me, being a beginner to come with ideas but i tought to make just one div and to create dynamically with javascript just the images inside that div.

Well, I know it's better and lot easier with lists and css to do this but i wanted to do this way. I will get some cool advantages with this.

Thread: javascript beginner menu

Thread Tools

Display

javascript beginner menu

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions