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>
Try this:
<script type="text/javascript">
// Pre load images for rollover
function imgSwap(imgSrc)
{
document.getElementById('logo').src = "images/"+imgSrc+".jpeg";
}
</script>
<a href="#" onmouseover="imgSwap('Logo1');" onmouseout="imgSwap('Logo2')">
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
Previously, you we're passing in an id
which was not used. Also, the src needs to point to the images/
directory.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.