07999365071 / 0121-458-6518

CSS, HTML image hover example


Firstly you need to open up your editor. I'm using Adobe Dreamweaver.

  1. Menu-bar, Click Site
  2. New Site
  3. Name your site and if you have hosting put url of website
  4. Select no to using technologies
  5. Choose where to save your site on local machine
  6. For the purpose of this tutorial we want to select none. But if you have hosting please edit as appropriate
  7. Check the setup and click done

So now we are ready to add pages

In dreamweaver the bottom right you should have a green folder with the site-and whatever you named it

Right click on that folder

  1. New file I named it test.html
  2. Repeat and name this one styles.css
  3. New folder and name it images

In the image folder is where you will store your images. So locate the image folder on your computer and store the images there


Now the CSS Code

Now double click styles.css and add the following

#box a{
display:block;
background-image:url(IMAGE LOCATION YOU WANT TO DISPLAY);
border:none;
height: THE SIZE OF IMAGE (dont forget to put px example 5px);
width:THE SIZE OF IMAGE (dont forget to put px example 5px);
}
#box a:hover{
display:block;
background-image:url( IMAGE LOCATION YOU WANT TO DISPLAY);
border:none;
height: THE SIZE OF IMAGE (dont forget to put px example 5px);
width:THE SIZE OF IMAGE (dont forget to put px example 5px);
}

Now for the HTML
Double click test.html or whatever you have you named the html file
In the <head> section, which between the 2 tags <head>..............</head> Right-Click

  1. styles
  2. attach stylesheet
  3. browse and locate stylesheet

If this doesn't work just add the following code makesure the ahref is pointing to the right path

<link rel="stylesheet" href="styles.css" type="text/css">

Now in the body of the document, this is between the <body>......................</body>tags place the following code:

<div id="box">
<a href="#"></a>
</div>
Now open test.html and check if it's working.