473,324 Members | 2,179 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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 8278

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected...
10
by: oLE | last post by:
I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...
4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
0
by: Efkas | last post by:
I have a full custom application with some widged extending Controls like Label and PictureBox. I build a menu with these widgets. When I click on one of them, it calls a function to display...
4
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...
1
by: DBC User | last post by:
I am wondering is there any way when I do a show and hide of a form, we can do a smooth transition to the new screen like power point presentation in c#?? Thanks.
3
by: | last post by:
I'm using the DataList and GridView controls, and I am trying to wrap my head around the problem of conditionally showing or hiding cells/cell content based on the presence or absence of DB data. I...
1
oranoos3000
by: oranoos3000 | last post by:
hi would you please help me i have a online shopping center that i show pictures of the my product in home page. in the InterExplorer pictures is shown correctly but in Firefox browser is shown...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.