FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

onmouseOver onmouseOut

   Frihost Forum Index -> Scripting -> Others
 


burningjacks
ok i learned some JavaScript recently using onmouseOver....i want to make a navigation bar that pops up when you hover over a button... i have it so the image will pop up in the code below....but how do i Map it so i can click the links on it?

Code:


<html>
<head>

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="navigation.jpg"
}
function mouseOut()
{
document.b1.src ="eric.jpg"
}
</script>

</head>
<body>

<a href="http://www.burningjacks.com/"  target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="eric"
src="eric.jpg" name="b1" />
</a>

</body>
</html>
Aelita
Okay I'm not sure too much about jave. But I'm going to take a guess and say use the src area for the pic and make it a link as well as an image? Like I said I don't know but that would seem like a really easy way to me.. I have to look in books for Java script still... Razz
burningjacks
hmmm try looking at this... http://burningjacks.com/index4.htm this is what i want... but how do i link the box that pops up? or cant i? i want to map it with the links to bio, pictures, videos....
Aelita
yes you can link them

but you have to use three different images and make a link for each image not just one image and link the one image.[/code]
burningjacks
i see....do you know a desent code for a dropdown menu along that line?
rohan2kool
Well.... i'm going to quicken this up...

Create a table that is your menu and position it as you want to see it when it pops-up. Put the image and all... for the table, add an atrrib:

<table id="menu" style="visibility: hidden; position: fixed">
...
Your menu content
...
</table>

Obviously you can use <div>, just remeember the style param. In the onmouseover event for the image:

Code:

function popupmenu() {
      menu.style.visibility = "visible";
}


and whenever you want to hide it again, just execute the following code:

Code:

function closemenu() {
     menu.style.visibility = "hidden";
}


NOTE: don't add this to the 'onmouseout' event of the image as the menu will close the minute a user switches from the image to the menu.. That's all. feel free to ask questions.. if any Wink
burningjacks
thanks! Ill probably have more questions...but let me work with it awhile, i dont want to take up anymore of your time if i dont have to!
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.