Fading Images

**micalee** · 12-07-2006, 09:22 PM

Hi there. I am new here and probably in the wrong area, but i am wondering if anyone can use these images:

and get them to fade in and out to each other? Trying to describe it better, starting with one image, fading out then the other fading back in and going around in this cycle. Looking at them, they would need to be the same size also. I appreciate this is really cheaky, but i would not know where to start and you guys are the experts.

It is for a signature block at work.

many thanks

Lee

**GhettoT** · 12-07-2006, 09:57 PM

You could use javascript to acomplish this. Try using the framework that Twey has already created here. It is really useful.!

**Kenny** · 12-08-2006, 12:39 AM

The best one turned out to be 775kb (animated .gif)

You better figure out how to do it with javascript xBrowser

**coothead** · 12-08-2006, 10:32 PM

Hi there micalee,

have a look at this example, which uses the attached images...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fading images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#060557;
    color:#fff;
 }
#container {
    position:relative;
    width:174px;
    height:182px;
    border:5px double #f3d64e;

    margin:100px auto;
 }
#top {
    position:absolute;
    width:174px;
    height:182px;
    z-index:1;
 }
#bot {
    position:absolute;
    width:174px;
    height:182px;
    z-index:0;
 }
</style>

<script type="text/javascript">
  var objt;
  var objb;
  var topop=100;
  var botop=0;
  var speed=125;
  var topnum=0;
  var botnum=1;
  var test=0;

window.onload=function() {
  objt=document.getElementById('top');
  objb=document.getElementById('bot');
  fadeout();
}

function fadeout() {
if(test==0) {
   topop--;
   botop++;
 }
if(objt.filters) {
   objt.style.filter='alpha(opacity='+topop+')';
   objb.style.filter='alpha(opacity='+botop+')';
 }
else {
   objt.style.opacity=topop/100;
   objb.style.opacity=botop/100;
 }
if(topop==0){
   topnum+=2;
if(topnum>1){
   topnum=0; 
 }
   objt.src='cresttoKings2.jpg';
   test=1;
 }
if(test==1){
   topop++;
   botop--;
 }
if(topop==100){
   botnum+=2;
if(botnum>1){
   botnum=1; 
 }
   objb.src='rlc2-1.jpg';
   test=0;
 }
fader=setTimeout('fadeout()',speed);
 }
</script>

</head>
<body>

<div id="container">
<img id="top" src="cresttoKings2.jpg" alt=""/>
<img id="bot" src="rlc2-1.jpg" alt=""/>
</div>

</body>
</html>

coothead

**micalee** · 12-09-2006, 12:54 PM

Really appreciate your time you have spent on this, but am confused on how to utilise this. Are you able to put it into an animated gif file? what i am after is inserting the file at the bottom of my emails - dont know if this is possible, you clearly know more about this than i do.

Thanks loads
Micalee

**Kenny** · 12-09-2006, 02:37 PM

If you want an animated .gif you need to consider the size.
100 width x 100 height is 10000 already for a single frame
multiply that by 15 frames and it's too big for dial-up connections.
If you want to insert into email, come up with some smaller images
to start with.

**micalee** · 12-09-2006, 02:56 PM

Are you therefore able to reduce the size of the images and produce the animated gif? I can easily make them smaller

**Kenny** · 12-09-2006, 05:58 PM

You're going to lose a lot of details that way.
http://photos1.blogger.com/x/blogger...407/Noname.jpg

**Kenny** · 12-09-2006, 07:25 PM

Ok, here's one its only 130kb
http://photos1.blogger.com/x/blogger...846408/two.gif

**chechu** · 12-14-2006, 04:28 PM

Got what you are looking for, with links included:

place this in the head:

Code:

<script language="JavaScript1.1">
<!--
var slidespeed=3000
var slideimages=new Array("IMG.gif","IMG.jpg","IMG.png")
var slidelinks=new Array("http://www.site.com","http://www.site.com","http://www.site.com")
var newwindow=1 

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

And this in the body:

Code:

<a href="javascript:gotoshow()"><img src="firstshownimage.gif" name="slide" border=0 style="filter:blendTrans(duration=3)"></a>

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

Thread: Fading Images

Thread Tools

Search Thread

Fading Images

Bookmarks

Bookmarks

Posting Permissions