470,636 Members | 1,582 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,636 developers. It's quick & easy.

Show and hide image the smooth way ?

Hi,

I wonder if its possible to show and hide a image with javascipt.

I want the image to disapear from bottom and up very smooth, maybe
under 3-4sec.

Is it possible ? any tips ?

Thanks
Jes

Nov 30 '06 #1
6 8094

je************@yahoo.se wrote:
Hi,

I wonder if its possible to show and hide a image with javascipt.

I want the image to disapear from bottom and up very smooth, maybe
under 3-4sec.

Is it possible ? any tips ?

Thanks
Jes
Solution for IE.

<html>
<head>
<script type="text/javascript">
function hideImage()
{
document.getElementById("container").filters[0].Apply();
document.getElementById("im1").style.visibility="h idden";
document.getElementById("container").filters[0].Play();
}
</script>
</head>
<body>
<DIV ID="container"
STYLE="height:200px;width:200px;filter:progid:DXIm ageTransform.Microsoft.Barn(orientation=horizontal ,
motion=in)">
<img id='im1' src="1.jpg" STYLE="height:200px;width:200px">
</DIV>
<BUTTON onclick="hideImage()">Hide image</BUTTON>
</body>
</html>

More information about visual filters:
http://msdn.microsoft.com/library/de.../reference.asp

Nov 30 '06 #2
ASM
je************@yahoo.se a écrit :
I want the image to disapear from bottom and up very smooth, maybe
under 3-4sec.

Is it possible ? any tips ?

Example :

<html>
<script type="text/javascript">
function $(id) { return (typeof(id)=='string')?
document.getElementById(id) : id; }
function fadder(what, opacity, sens, duration)
{
what = $(what);
opacity = (opacity == 100)? 99.999 : opacity;
// IE/Win
what.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
what.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
what.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
what.style.opacity = opacity/100
if(sens>0 && opacity<99 || sens<0 && opacity>0)
{
opacity += 1*sens;
setTimeout(
function(){fadder(what, opacity, sens, duration);}
,duration);
}
else
{
$('show').style.display=$('show').style.display==' '?'none':'';
$('hid').style.display=$('hid').style.display==''? 'none':'';
}
}
</script>
In onclick of button play with duration : here = 150<br>

<img src="asm1.gif" alt="" id="pict" />
<button id="show"
onclick="fadder('pict', 1, 1, 150);"
style="display:none">show</button>
<button id="hid"
onclick="fadder('pict', 98, -1, 150);">hide</button>
</html>

--
Stephane Moriaux et son moins vieux Mac déjà dépassé
Stephane Moriaux and his less old Mac already out of date
Nov 30 '06 #3
je************@yahoo.se wrote:
Hi,

I wonder if its possible to show and hide a image with javascipt.

I want the image to disapear from bottom and up very smooth, maybe
under 3-4sec.

Is it possible ? any tips ?

Thanks
Jes
Check the tools at http://www.jackslocum.com/blog/index.php

And the toolkit these are based on: http://developer.yahoo.com/yui/

These provide means of doing things like that.
Dec 8 '06 #4
ASM wrote:
>
// Safari<1.2, Konqueror
what.style.KHTMLOpacity = opacity/100;
I talked with some guys on irc #kde and apparently Konq has never
supported opacity yet. The development version of Konq for KDE4
supports just plain "opacity". So the fact that it is "KHTMLOpacity" is
just confusing since I think only Safari (khtml based) has used this
property.

Peter

Dec 8 '06 #5
ASM
Peter Michaux a écrit :
ASM wrote:
> // Safari<1.2, Konqueror
what.style.KHTMLOpacity = opacity/100;

I talked with some guys on irc #kde and apparently Konq has never
supported opacity yet. The development version of Konq for KDE4
supports just plain "opacity". So the fact that it is "KHTMLOpacity" is
just confusing since I think only Safari (khtml based) has used this
property.
I'm not really sure Safari uses it ... (in all cases Safari 1.3 doesn't)
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 8 '06 #6

ASM wrote:
Peter Michaux a écrit :
ASM wrote:
// Safari<1.2, Konqueror
what.style.KHTMLOpacity = opacity/100;
I talked with some guys on irc #kde and apparently Konq has never
supported opacity yet. The development version of Konq for KDE4
supports just plain "opacity". So the fact that it is "KHTMLOpacity" is
just confusing since I think only Safari (khtml based) has used this
property.

I'm not really sure Safari uses it ... (in all cases Safari 1.3 doesn't)
A little googling makes it look like early Safari does.

Also I think it is "KhtmlOpacity" but I don't know because different
people list it different ways. I would really like to know and test it
on Safari 1.1.

Peter

Dec 9 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by oLE | last post: by
4 posts views Thread by jerryyang_la1 | last post: by
4 posts views Thread by bridgemanusa | last post: by
1 post views Thread by DBC User | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.