Div and Web Design : Next Part

OnMouseMove:

             Here we have crated a div tag as footer of a page and when the cursor moves over this div (section) an alert message will appear saying "This is a mousemove click event".

Code:

This is bottom of a page.

OnClick:

          This event occurs when you click on the part of webpage where you have defined this event to be occur.
Here we have defined a div tag as header and when you click on this header a alert box will appear "It's a mouseclick event".

 Code:

This is a header

 This is not necessary to use alert message box on every event you can do many other task by using the javascript(we'll talk about it later).

Transparency for an image (mouseover and mouseout event):

                                This is a nice example of mouseover and mouseout event.

Here when your mousepoint come over the image the image  will look as with 100 % clearity and when your mouse pointer come out over the image then image opacity will discrease so that image will look a bit faded.

Code:

Web Design with DIV:

 Now we will see some example of div tag which is very attractive and usefull to create a fanciful webpage.

Center Fixed Div:

                  In this example, a div section in the center of a web page will appear with the fixed css style, means when you resize yourwebpage this div will not disappear it will reamin in the center point and always visible to you on scrolling.

Code:

Now inside the form tag use these line.     

 

            
This is a center div tag
  

Now for a attractive output try this.

2 CSS Menu:

                In this example we are going to create a css menu bar. Output like this.        

For creating this menu bar you have to use css, you can create a css or you can define style tag inside your webpage.
I'm using style tag inside my page because here is no need to give reference the css.

Now this is the time to use this style by using div tag, 

CODE:

Google Home Page

Yahoo Home Page

Search Engine

mywebsearch

facebook

 

3 ColorFull DropDownList:

                        Here in this example we're going to create a colorfull dropdownlist, as you have seen in many places a dropdownlist is provided for choosing the font color with name and that color as background. 

Output:

For creating this you need to use the style :

    Now inside the div tag use this code.

    

    Choose Blue
    Choose Green
    Choose Red
   
    

4-  Embed audio and video file in a webpage:

                                        How to embed a audio file or video file in a webpage. Its simple  using a embed tag

 Code:

 This tag includes a audio file named "fires.mp3" with the properties loop, volume and autostart. You can modify as per your requirements.

Output:

 For a video file just change the src only.

 Code:

Conclusion:

We learn how to use div tag, its events, its attributes with examples so now we can utilise this in our webpage.
We learn some attractive example by using events, CSS, Style tag etc.

If you need any help feel free to ask.

Cheers !

 -Nikhil Kumar

dotnetask.blog.co.in