FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


onmouseOver onmouseOut





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!
Related topics
make button and see effekt
Image transparency script
Bold OnMouse Over
Advanced Rollovers
Site Nav Suggestions...
A Useful Javascript
Tutorial: Image Rollovers w/ Javascript
Marquee ~ it's really fun!
JavaScript (Menu)
changing background in CSS
HTML question...
JavaScript Help
How to create an advanced editor for PHPNUKE V. 7.9 - 8.0...
Fouten in website met andere browser [OPGELOST]
Reply to topic    Frihost Forum Index -> Scripting -> Others

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