www.webdeveloper.com
Results 1 to 3 of 3

Thread: javascript beginner menu

  1. #1
    Join Date
    Jul 2010
    Posts
    3

    javascript beginner menu

    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!

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    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>

  3. #3
    Join Date
    Jul 2010
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles