OK.. i am working on a new site with a javascript menu... i am using features such as onMouseOver and onMouseOut and onMouseDown to make changes on the menu... i have written the code and set up the images, but i have stumbled...
the problem: when i hover over any part of the menu, the links work, but not the hover/click feature... wherever i point on the menu, the Home and Portfolio activate, and none of the rest do... i meant to do it to activate on each button as you move or click on it... is the coding somehow wrong? thanks to anyone who can help...
Full Version: Need Help With Coding Of Java...
After messing with it I figured out a way to do it, but I don't know if there is an easier way or if I can even explain this right.
Each mouseover event for each link needs to be differentiated somehow. The MouseOver() event you have right now changes all the images. Instead create seperate mouseover events for each link. Like this:
Then in each image code call the corresponding mouseOver event.
Like so:
Each mouseover event for each link needs to be differentiated somehow. The MouseOver() event you have right now changes all the images. Instead create seperate mouseover events for each link. Like this:
CODE
function mouseOver1()
{
document.home.src ="http://lucasites.vndv.com/nav1hover.png"
}
function mouseOver2()
{
document.temp.src ="http://lucasites.vndv.com/nav2hover.png"
}
function mouseOver3()
{
document.port.src ="http://lucasites.vndv.com/nav3hover.png"
}
function mouseOver4()
{
document.serv.src ="http://lucasites.vndv.com/nav4hover.png"
}
{
document.home.src ="http://lucasites.vndv.com/nav1hover.png"
}
function mouseOver2()
{
document.temp.src ="http://lucasites.vndv.com/nav2hover.png"
}
function mouseOver3()
{
document.port.src ="http://lucasites.vndv.com/nav3hover.png"
}
function mouseOver4()
{
document.serv.src ="http://lucasites.vndv.com/nav4hover.png"
}
Then in each image code call the corresponding mouseOver event.
Like so:
CODE
<div class="navigation">
<img src="http://lucasites.vndv.com/nav0.png" border="0"><a href="home.html"><img
border="0" alt="Home" src="http://lucasites.vndv.com/nav1.png" name="home" width="128"
height="35" onmouseover="mouseOver1()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="templates.html"><img
border="0" alt="Templates" src="http://lucasites.vndv.com/nav2.png" name="temp" width="128"
height="35" onmouseover="mouseOver2()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="portfolio.html"><img
border="0" alt="Portfolio" src="http://lucasites.vndv.com/nav3.png" name="port" width="128"
height="35" onmouseover="mouseOver3()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="services.html"><img
border="0" alt="Services" src="http://lucasites.vndv.com/nav4.png" name="serv" width="129"
height="35" onmouseover="mouseOver4()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><img
src="http://lucasites.vndv.com/nav5.png" border="0">
</div>
<img src="http://lucasites.vndv.com/nav0.png" border="0"><a href="home.html"><img
border="0" alt="Home" src="http://lucasites.vndv.com/nav1.png" name="home" width="128"
height="35" onmouseover="mouseOver1()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="templates.html"><img
border="0" alt="Templates" src="http://lucasites.vndv.com/nav2.png" name="temp" width="128"
height="35" onmouseover="mouseOver2()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="portfolio.html"><img
border="0" alt="Portfolio" src="http://lucasites.vndv.com/nav3.png" name="port" width="128"
height="35" onmouseover="mouseOver3()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><a
href="services.html"><img
border="0" alt="Services" src="http://lucasites.vndv.com/nav4.png" name="serv" width="129"
height="35" onmouseover="mouseOver4()" onmouseout="mouseOut()" onmousedown="mouseDown()" /></a><img
src="http://lucasites.vndv.com/nav5.png" border="0">
</div>
kk.. thanks.. will try...
Oh you could even leave your mouseout function like it is since mousing out always goes back to the original image, and probably wouldn't change. One less thing for you to change, but the mouseDown function would need to be changed similar to the mouseOver one.
And it works on my home computer, I downloaded your source style and images to test it out.
And it works on my home computer, I downloaded your source style and images to test it out.
Thanks! it worked lol... you help me a lot.. i ranked you 5 stars.. 
Haha thanks! Oh and I just wanted to mention the reason only two of your images were changing was because you had the image tag name different than what you were calling in your javascript function. If that makes sense then you are smarter than me.
And I'm surprised I figured this out because I know squat about javascript.
And I'm surprised I figured this out because I know squat about javascript.
i just realized i havent uploaded the html page yet.. i will do so when i add the body content.. so the link is still broken.. but it works on my computer now.. i think i get what youre saying.. thanks... any comments on the layout?!
Actually now that I looked at your original code again I realize what I said was slightly wrong, it was because you had two of the images named "temp". Therefore the javascript just doesn't process it since it's got two possible choices. (At least thats what I think 
)
)
use css.
MrTouz are you able to have the mouseDown() command in css? So that the image changes on mouse down?
yeah, like andrew, i dont know much on javascript.. i googled the onmouseover and all i got was java.. i was initially looking to do it in css, but found nothing in that area...
You do it with the a:hover command in CSS.
I just don't know if there is something like a:mousedown lol
I just don't know if there is something like a:mousedown lol
yeah thats what i want to know too.. lol.. i guess we wait for MrTouz..
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.