omar353531
SERP Dominator
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
100 XP
Introduction:
This tutorial is on how to create an interactive CSS & JavaScript (jQuery) page where the user is able to hover over certain elements of the page in order to uncover more information (such as the Bing.com search page, where you can hover over the boxes on the image to see interesting facts).
HTML:
This is the first part of this tutorial series, in which we will be creating the HTML and starting CSS for the page.
We want to have a title and paragraph for each piece of information on the website, so lets create the basic HTML template first...
Next we want to create, within the 'Body' tags, a 'div' tag which will be the wrapping container of our boxes...
As you can see, I also created a second 'div' container to hold the information which will be shown.
Boxes:
Now we are going to create the boxes that will be shown where the user can hover their mouse over them in order for the information to change. This will just be a simple div, with a single class, rewritten a couple of times...
We will be styling this 'box' CSS class later on for it to get the hovering characteristics.
Information:
The final thing we are going to do in this part is write the containers for our information.
As stated earlier, this will consist of a title, and a paragraph.
-The above code goes in the 'information' div class we created earlier-
Finished!
That's all for this tutorial. In the next one we will be styling the 'box', 'boxes', and 'information' CSS classes.
Download
This tutorial is on how to create an interactive CSS & JavaScript (jQuery) page where the user is able to hover over certain elements of the page in order to uncover more information (such as the Bing.com search page, where you can hover over the boxes on the image to see interesting facts).
HTML:
This is the first part of this tutorial series, in which we will be creating the HTML and starting CSS for the page.
We want to have a title and paragraph for each piece of information on the website, so lets create the basic HTML template first...
Next we want to create, within the 'Body' tags, a 'div' tag which will be the wrapping container of our boxes...
As you can see, I also created a second 'div' container to hold the information which will be shown.
Boxes:
Now we are going to create the boxes that will be shown where the user can hover their mouse over them in order for the information to change. This will just be a simple div, with a single class, rewritten a couple of times...
We will be styling this 'box' CSS class later on for it to get the hovering characteristics.
Information:
The final thing we are going to do in this part is write the containers for our information.
As stated earlier, this will consist of a title, and a paragraph.
-The above code goes in the 'information' div class we created earlier-
Finished!
That's all for this tutorial. In the next one we will be styling the 'box', 'boxes', and 'information' CSS classes.
Download
You must upgrade your account or reply in the thread to view the hidden content.