Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
Javascript rollover question?
I am trying to make a website, in which the image changes to reflect the menu item you are pointing at. I have got it half working. It changes to reflect the menu item but won’t change back once you are no longer pointing at that icon. In more technical terms the mouseOver event works but I can’t get the mouseOut event to work the same way.
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<link href="home2012 css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function mouseOver(img_name, img_src)
{
document[img_name].src = img_src;
}
function mouseOut()
{
document[img_name].src = "questionicon.png";
}
</script>
</head>
<body>
<div class="maincontainer">
<div class="navbar" id="navbox">
<ul class="navbar">
<li class="liheading">Welcome</li>
<li class="li1"><a href="#" onmouseover="mouseOver('imgtoflip', 'imgs/facebookicon.png')" onmouseout="mouseOut()">About Me!</a></li>
<li class="li2"><a href="#" onmouseover="mouseOver('imgtoflip', 'imgs/webdesign.png')">Web Design!</a></li>
<li class="li3"><a href="#" onmouseover="mouseOver('imgtoflip', 'imgs/mycreations.png')">My Creations!</a></li>
<li class="li4"><a href="#" onmouseover="mouseOver('imgtoflip', 'imgs/Picasaicon.png')">Photos!</a></li>
<li class="li5"><a href="#" onmouseover="mouseOver('imgtoflip', 'imgs/contactme.png')">Contact Me!</a></li>
</ul>
<div class imgflip><span class="imgflip"><img src="imgs/noimage.png" width="128" height="128" name="imgtoflip" id="imgtoflip"/></span></div>
</div> <!--End of navbar -->
</div>
</body>
</html>
I found a solution using Javascript. I had simply missed a bit of code as the function mouseOut() didn't have anything to do.
function mouseOver(img_name, img_src)
{
document[img_name].src = img_src;
}
function mouseOut(img_name, img_src)
{
document[img_name].src = img_src;
}
3 Answers
- Dave PLv 59 years agoFavorite Answer
This might be more straight forward using css. Your list items have ids so, in your css file, add hovers to your list item styles. I would try this :
#li1:hover
{
background-image:url('imgs/facebookicon.png');
}
etc.
You might have to give the list items widths and heights to get the images to display properly. If there is a problem, put each item in it's own division with a named id and use a hover style for it.
- ?Lv 45 years ago
you do no longer opt to do this. you will lose website travellers. And in case you place up 404s? you will finally be knocked out of the seek engines. you may set up yet yet another blog on a sub section or in a separate folder and paintings on a topic count number that way. I in no way attempt this in spite of the undeniable fact that. i'm consistently changing subject concerns on my blogs, or my concern concerns. If i'm no longer happy, I placed the previous subject count number decrease lower back up till ultimately i'm waiting to play decrease lower back.
- 9 years ago
1. Only 'About Me!' is using the mouseOut function.
2. In the function "mouseOut", what is "img_name"?
