...

View Full Version : onMouseOver/Out visibility effects



bubblejam
09-10-2011, 05:04 PM
hi all,

i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:



<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}

#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>


in my body is:


<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')">
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet">
(latest tweet generating code)
</div>


this creates a little bird, which displays latest tweet when rolled-over.

you can see a working example of this here:
http://nang-nang.net/tumblr/blog/try.html

my question are:
(1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

also
(2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

an answer to (1) at least would be very much appreciated!

xelawho
09-10-2011, 05:56 PM
there is probably a more elegant way to do this, but this:


<html>
<head>
<script type="text/javascript">
var t;
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
clearTimeout(t);
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}

#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>
</script>
</head>
<body>
<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="t=setTimeout('hidemenu(\'tweet\')',3000)">
<a href="http://twitter.com/bubblejam" rel="nofollow" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet" style="visibility:hidden">
(latest tweet generating code)
</div>
</body>
</html>

makes the tweet disappear after 3 seconds (or 3000 milliseconds, which you can change to suit).

I don't know much about fade ins and slide ups - it seems that the easiest way to do them is with jquery.

bubblejam
09-10-2011, 07:40 PM
thanks xelawho!

that was the exact little snippet of javascript i needed.

i think you're right about needing jquery or something extra to fade in and slide ups... but the website i'm making has so many javascripts in it now i'm afraid for conflicts so i'll probably just leave it out!

DaveyErwin
09-10-2011, 08:25 PM
Here's one that fades away but,
it might really be simpler with jqueery


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

function showmenu(elmnt){
var target = document.getElementById(elmnt);
fade(target,"unFade") ;
}
function hidemenu(elmnt){
var target = document.getElementById(elmnt);
fade(target,"fade");
}
var isFading = null;
function fade(target,a){
if(a == "unFade"){
target.style.visibility="visible";
if(isFading)clearTimeout(isFading);
target.style.opacity = 1;
target.style.filter = 'alpha(opacity=100)';
return;
}
var opacityLevel=100;
function fader(){
if(opacityLevel-=5 > 1){
isFading = setTimeout(fader,5);
}else{
target.style.visibility="hidden";
return;
}
target.style.opacity = opacityLevel / 100;
target.style.filter = 'alpha(opacity='+opacityLevel+')';
}
fader();
}
</script>

<style type="text/css">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}

#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>
</head>
<body>
<div id="twittericon">
<a href="http://twitter.com/bubblejam" rel="nofollow" >
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" alt="tweet" width="33" height="29"
onmouseover="showmenu('tweet')" onmouseout="hidemenu('tweet')" >
</a>
</div>

<div id="tweet">
(latest tweet generating code)
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum