The website needs to include three of the following:
- A simple form (like a ‘mailto:’ form)
- An image map
- Rollover images
- A pop up or drop down menu
- Photographs
Today we looked briefly at rollover images. This is something that is easier using web development software but is still very possible when making the pages yourself using HTML.
First you can use a CSS button generator like ButtonMaker. Tweek the settings to make the button look like you want it then copy the CSS code.
Open up your HTML file (in Notepad or in Mozilla Thimble). Paste the copied code into the <head> section of your page. This will need to be in <style> tags (<style> before the code, </style> after the copied code)
Next we need to add in code to display your button. This needs to go into the <body> section of the page.
We have to find code to display the button. You can get this by viewing the page source on the ButtonMaker site and looking for the part that has “View the CSS” in it.
….if you get stuck, the code you need is:
<div id=”button-box”>
<a href=”#” class=”button”>View the CSS</a>
</div>
Add this code into your page and change the text from “View the CSS” to something more appropriate for your website.
Finally in the <a href..> tag you need to change the ‘#’ to be the web address you want to link to.
Have a look at my example to see a working button. It actually links to a lovely site called Don’t Click It which tries out different ways of using websites without clicking your mouse – worth having a look and a play!
Alternative:
A different way to do this is to use code in the main body of the page. This is particularly useful when you can’t change the CSS such as with a blog. The code you need is:
<a href=”TARGET URL GOES HERE”>
<img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE'” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE'” />
</a>
