This required me to have a rollover effect applied, so that when a mouse hit the 'up' image it swapped to the over image. I was having a lot of trouble with it - an unexpected, discouraging amount of trouble considering it was the very first thing I attempted. That was until I saw the following video, shared with me by a friend.
I followed this video to a tee, and it worked.
Following this video has given me a better understanding of how I can use JavaScript as before I'd never used it and never really understood what it was for. I've learnt how I can put code into the <head> of the document as a <script> which can then be referenced in the <body>. This is the code that I put into the <head> of my websites HTML.
<head>
<script type="text/javascript"><!-- Home Button -->
function imgOver(id) {
document.getElementById(id).src="./graphics/home_grey_over.png";
}
function imgOut(id) {
document.getElementById(id).src="./graphics/home_grey_up.png";
}
</script>
</head>
The only "issue" with this technique is that I have to think of a unique way of saying 'over' and 'out; each time I use it for a different button. You can see in the example above I have 'imgOver' and 'imgOut'. If I wanted to use this again for another button I'd have to copy and paste the code over, change the src images and use alternative words - like 'imgOn' and 'imgOff'.
The above code is what goes in the <head> section of my html. There is another part that must go in the <body> section:
<div class="one-third column">
<a href="index.html" onmouseover="imgOver('homeButton');" onmouseout="imgOut('homeButton');">
<img src="graphics/home_grey_up.png" width="85px" height="auto" alt="home" id="homeButton" />
</a>
</div>
There are certain parts of this code that I can explain to show how it links with the script in the <head> and creates a image swap link.
a href: the link that the button leads to. In this case it is a home button, so it's destination is 'index.html' - the name of the home page.
onmouseover="imgOver": the words 'onmouseover' are recognised as a command, with 'imgOver' being in the script in the <head>. When a mouse is over the image, the browser should refer to the 'imgOver' code in the <head> which tells it which image to display/swap to.
onmouseout="imgOut": when the mouse is not over/on the image, the browser should display the image that is referred to under the 'imgOut' command in the script.
All of this code has resulted in creating a home button that has a rollover/image swap effect that also works as a link. I'll be using this for every image button that I create.
