Web Analytics Made Easy - StatCounter onMouseOver/Out visibility effects - CodingForum

Announcement

Collapse
No announcement yet.

onMouseOver/Out visibility effects

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    onMouseOver/Out visibility effects

    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:

    Code:
    <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:
    Code:
    <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!
    Tags: None
  • #2
    there is probably a more elegant way to do this, but this:

    Code:
    <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.

    Comment

    • #3
      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!

      Comment

      • #4
        Here's one that fades away but,
        it might really be simpler with jqueery

        Code:
        <!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>
        Last edited by DaveyErwin; Sep 10, 2011, 03:43 PM.

        Comment

        Previous template Next
        Working...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎