PDA

View Full Version : Fading Images



micalee
12-07-2006, 08:22 PM
Hi there. I am new here and probably in the wrong area, but i am wondering if anyone can use these images:

http://i4.photobucket.com/albums/y105/japscoobys/rlc2-1.jpg


http://i4.photobucket.com/albums/y105/japscoobys/CresttoKings2.jpg

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, 08:57 PM
You could use javascript to acomplish this. Try using the framework that Twey has already created here (http://www.twey.co.uk/includes/FadableObject.js). It is really useful.!

Kenny
12-07-2006, 11:39 PM
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, 09:32 PM
Hi there micalee,

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


<!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, 11:54 AM
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, 01: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, 01: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, 04:58 PM
You're going to lose a lot of details that way.
http://photos1.blogger.com/x/blogger/2085/1015/1600/922407/Noname.jpg

Kenny
12-09-2006, 06:25 PM
Ok, here's one its only 130kb
http://photos1.blogger.com/x/blogger/2085/1015/1600/846408/two.gif

chechu
12-14-2006, 03:28 PM
Got what you are looking for, with links included:

place this in the head:

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


<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>

micalee
12-15-2006, 11:39 AM
Many Thanks, I Will Try This Out As Soon As Possible