Home/ Questions/Q 8772871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T18:08:35+00:00

This is what I have so far, I have been watching a ton of

  • 0

This is what I have so far, I have been watching a ton of Javascript videos and I feel I mimicked them solid but this is still not functioning as I want.

Than being, it changes from logo1 to logo2 on mousover. This is homework. However homework that is important to me so any help or guidance would be appreciated. 

</head>

<body>
<p>
<div>
<script type="text/javascript">
// Pre load images for rollover
function imgOver(id) 
{
    document.getElementById(id).src="logo1.jpg";
}

function imgOut(id) 
{
    document.getElementById(id).src="logo2.jpg";
}

</script>   
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</div>
</body>

</html>

New Code, its still….not working! =(

</head>

<body>
<div>
<p>
<script type="text/javascript">
// Pre load images for rollover
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('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</p>
</div>
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0