8 Replies - 6389 Views - Last Post: 28 May 2007 - 07:39 PM

#1 heimedall  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-May 07

Image Fade In

Posted 17 May 2007 - 06:35 AM

On the website I'm working on we have a thumbnailed image. When you hover over this image it shows you a larger preview (not the full size). I've been asked if I can make this preview fade in, but I have never done an image fade in before.

The preview is generated Javascript, but I'm not fussed how the fade works just so long as it fades quickly in on hover.

If someone could help, that would be brilliant.
Thanks
Larkin

Is This A Good Question/Topic? 0
  • +

Replies To: Image Fade In

#2 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Image Fade In

Posted 17 May 2007 - 12:42 PM

Hi.
I read your submit and i've got the idea but i don't realy understand how you want to view the image preview.
So i worked on fade out image as starting point then the image will fade in when mouseover occurred.
If this is not what you need exactly please let me know ,i'll be so glad to help as much as i can.

In the code below the style tag is required to apply to all images you want to fade it in

<html>
<head>
<style>
.alpha
{
filter:alpha(opacity=10)
}
</style>
<script language="javascript">
var itm
function fade(itm){
dummy=itm
if (itm.filters.alpha.opacity<100){itm.filters.alpha.opacity+=5;q=setTimeout("fade(dummy)",10)}
else {
clearTimeout(q);return false}
}
</script>
</head>
<body>
<img calss="alpha" border="0" src="1.jpg" onmouseover="fade(this)"  width="380" height="350" />
</body>
</html>



don't forget to replace image source with your source
Was This Post Helpful? 0
  • +
  • -

#3 heimedall  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-May 07

Re: Image Fade In

Posted 19 May 2007 - 09:58 AM

I couldnt acturally get that to work, but maybe I should have given you a link to the page so you can see what I have and want.

http://www.oic-creat...2/customers.htm

If you hover over a company logo it brings up an image of their quote for rocfihs. I need to fade that image that appears in (not to fussed about the out but that would be a bonus).

Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Image Fade In

Posted 22 May 2007 - 07:58 PM

Hi.
Sorry for late; But i was so busy the last 3 days.
I checked out your site and I checked out javascript files and i think it's so complex for nothing;
So i decide to create a new javascript for you.
By the way you some kind of scripts that called "images preloader" so i write it too.

It works enough if you do the following:

1- Back up the old Javascript you have “hover.js” and your index.htm
2- Copy the file called “fader.js” in the same folder of “index.htm”
3- On body event load call the function preloadimages() as following:
Preloadimages(‘image folder path’,’images1.gif,image2.png,image3.jpg,…….’)
4- On every company image you want to show informations about add this event :
onload="show(this,'./images/sub.gif')"
5- Upload the new “index.htm” to your website.
6- now when you open it on the web you’ll see a loading message show you what image has been loaded and it’ll be disappeared when finished loading
7- You’re free to remove or improve this loading message, it’s just for checking out loading progress.

Note:
In the header area it's so imprtant to add this style

<style>
.alpha
{
filter:alpha(opacity=0)
}



The above style should applyed to the <DIV> element you use to show company informatios by adding "class='alpha'" to its attributes

<div class='alpha' style="position: absolute; width: 167px; height: 27px; z-index: 1; left: 507px; top: 53px; visibility:visible" id="viewbox">



In the attached file there is an simple example you can try it first on your local computer then do what ever you want.

I hope this is what you are searching for…

javascript code here:"fader.js"
// preloading images for fast browsing
function preloadimages(folder,imagesarray){
viewbox.filters.alpha.opacity=100
viewbox.innerText="Loading Pictures...Please wait"
ob=imagesarray.split(",")
imagescount=ob.length
for (t=0;t<=ob.length-1;t++){
newimage=new Image()
newimage.onload=function(){viewbox.innerText="image: '"+ob[t]+"' was loaded";imagescount--;if (imagescount==0)viewbox.innerText=""}
newimage.src=folder+"/"+ob[t]
}
}
// fader + Mover
function show(object,pic){
object.onmouseover=function(){
	viewbox.innerHTML="<img src='"+pic+"'>"
	viewbox.filters.alpha.opacity=0
	fade()
	}
object.onmouseout=function(){clearTimeout(q);viewbox.filters.alpha.opacity=0;return false;}
object.onmousemove=function(){
viewbox.style.left=event.clientX+10;viewbox.style.top=event.clientY+10
}
}
function fade(){
acc=5
if (viewbox.filters.alpha.opacity<=100){viewbox.filters.alpha.opacity+=acc;q=setTimeout("fade()",50)}else{clearTimeout(q);return false;}
}




HTML code here:"index.htm"
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
.alpha
{
filter:alpha(opacity=0)
}
</style>
<script language="javascript" src="fader.js"></script>
</head>

<body onload="preloadimages('images','stop.gif,key.gif,sub.gif,home.gif,mailus.gif,info.gif')">
<p> </p>
<p> </p>
<table border="1" width="50%" id="table1">
	<tr>
		<td>
		<img onload="show(this,'./images/sub.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
		<td>
		<img onload="show(this,'./images/stop.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
	</tr>
	<tr>
		<td>
		<img onload="show(this,'./images/key.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
		<td>
		<img onload="show(this,'./images/home.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
	</tr>
	<tr>
		<td>
		<img onload="show(this,'./images/mailus.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
		<td>
		 </td>
	</tr>
	</table>

<div class='alpha' style="position: absolute; width: 167px; height: 27px; z-index: 1; left: 507px; top: 53px; visibility:visible" id="viewbox">
 </div>

</body>

</html>

Attached File(s)


This post has been edited by ahmad_511: 23 May 2007 - 03:37 PM

Was This Post Helpful? 0
  • +
  • -

#5 heimedall  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-May 07

Re: Image Fade In

Posted 23 May 2007 - 06:37 AM

Thanks, I'll give this a try :)
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Image Fade In

Posted 23 May 2007 - 03:47 PM

Hey you don't have to thank me , maybe some time i'll need your advice
By the way i found an error in my code and i edit it so please check it out again.
in javascript file youl find this code:
for (t=0;t<=ob.length;t++){


so please edit it to be like this
for (t=0;t<=ob.length-1;t++){



I'll check your site agin to to see the progress you'll make

This post has been edited by ahmad_511: 23 May 2007 - 07:22 PM

Was This Post Helpful? 0
  • +
  • -

#7 heimedall  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-May 07

Re: Image Fade In

Posted 24 May 2007 - 01:32 AM

I could be being really stupid with this, Javascript isnt something I'm used to using... but offline, I cant get it to even load the hover image let alone load now, and the preloader zip that you supplied doesnt let it fade either.
Was This Post Helpful? 0
  • +
  • -

#8 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Image Fade In

Posted 24 May 2007 - 03:49 PM

So ....?!!!.
Let’s start over.
You just copy and paste the javascript file to your site; didn’t you?
If you did; it will not works and that’s for sure.
And because you don’t used to use javascript that’s doesn’t make sense to you.
I’ll try to edit you site files and send it back to you when I’m done.
So please if you have any question or you want to change any thing in your site just let me know about it before I start to rebuild it for you.
And you can send me any details about your site on this e-mail: ahmad_511@hotcoolmail.com if ;you want it to be a secret or something like that.

It will be a nice idea if we can chat together and exchanging informations on dreamincode but I don’t know if that is possible.

Finally if you want to change any thing in your site let me know before Sunday may 27 2007
Was This Post Helpful? 0
  • +
  • -

#9 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Image Fade In

Posted 28 May 2007 - 07:39 PM

Hey this is good working;you made some progress; i can see it fade in and out.
But not in the first time ;So you still have to preload the images before using it for the first time.
I have a snippet called "images preloader" you can find it in snippets area and you can use it..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1