You need not pass the image element's ID
to your imgOver
and imgOut
functions since the ID
never changes, your functions should be changed to:
function imgOver() {
document.getElementById('logo').src="logo1.jpg"; // ensure correct image path
}
function imgOut() {
document.getElementById('logo').src="logo2.jpg"; // ensure correct image path
}
Secondly, ensure you specify the correct path to logo1.jpg
and logo2.jpg
. For example: form your original HTML it looks like you'll need to use images/logo1.jpg and images/logo2.jpg respectively.
Your image element needs to have an ID. <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
Full Source:
<script type="text/javascript">
function imgOver() {
document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path
}
function imgOut() {
document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path
}
</script>
<a href="#" onmouseover="imgOver()" onmouseout="imgOut()">
<!-- note the id="logo" part below -->
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>