I currently have a collection of button images with different hover effects specified like this:
<img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" />
My goal is to make them scroll down to a different section upon clicking, but I am struggling with implementing this. I came across a code snippet that achieves what I want here http://jsfiddle.net/ryXFt/3/, however, I don't know how to apply it to my own set of images.
This is my unsuccessful attempt at making it work:
<script type="text/javascript">
<script>
$("home.PNG").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
Unfortunately, this script does not function as expected, and I'm uncertain about how to target the image for JavaScript to recognize it as clickable.