Banner

Sponsor

Login

Welcome Back!
Guest
Guest

Register

Lost your password?

89 users online

Image Fader from one img to another

Image Fader from one img to another

Forums » Web Development » Client Side - HTML/Javascript/etc. » Image Fader from one img to another

Currently viewing this thread: 1 (0 members and 1 guests)

1 2 »
Page 1 out of 2
#1
Old Post June 9th, 2002 06:07 PM
OpenMind

OpenMind

Status: Offline!

Image Fader from one img to another

Hi,

I have a little problem when scripting the second version of my site (OpenMindGrafix). I didn't think of the problem untill I came across of it and did all the design work.

The problem is the following: When you come across an image on my site and you scroll over it, that image has to fade to another image.

I have a script that fades from oppacity -30 to the original image, but now I need an image to fade to another image instead of the oppacity change.

I hope you can help me find a HTML or Javascript that can do that.

Thanks!

___________________

visit .__________ __// ____..OpenMindGFX

#2
Old Post June 9th, 2002 06:28 PM
Barney

Barney

Status: Offline!

show me the code that you have.......

___________________

Inside Red Faction - Getting You Inside !

#3
Old Post June 9th, 2002 06:44 PM
OpenMind

OpenMind

Status: Offline!

BETWEEN THE HEAD TAGS:

Code:


<script language="JavaScript1.2">

//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
//This credit MUST stay intact for use

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

IN THE IMG TAG:

Code:


style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"

I know there can be done something with it if somebody can adjust it. I can't :/

___________________

visit .__________ __// ____..OpenMindGFX

Last edited by OpenMind, June 9th, 2002 06:46 PM (Edited 1 times)

#4
Old Post June 9th, 2002 07:09 PM
bryan

bryan

Neversidian
Status: Offline!

I don't know how, but have one image fade out from full opacity to 0 opacity while the other fades in from 0 opacity to 100 opacity.

___________________

Mugging Scotty Good.
www.muggingscotty.com

#5
Old Post June 9th, 2002 10:37 PM
Lokannon

Lokannon

Status: Offline!

Did you take the script from www.dynamicdrive.com? If so, what have you changed in it?

___________________

Site in the making || Ascenvia || Ignorance Is Bliss

#6
Old Post June 10th, 2002 09:29 AM
OpenMind

OpenMind

Status: Offline!

I didn't change nothing in it so far.

___________________

visit .__________ __// ____..OpenMindGFX

#7
Old Post June 10th, 2002 09:48 AM
Barney

Barney

Status: Offline!

you can use 30% instead of 0.3

___________________

Inside Red Faction - Getting You Inside !

#8
Old Post June 10th, 2002 10:15 AM
Kedmyster

Kedmyster

Neverside Newbie
Status: Offline!

Try this.

Code:


<HTML>
<HEAD>
<TITLE>>.______________ __//____..OpenMindGrafix</TITLE>

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

<script type="text/javascript">
function clean()
{
interval=setInterval("makeclean(myImage)",10)
}

function foggy()
{
clearInterval(interval)
myImage.filters.alpha.opacity=0
}

function makeclean()
{
if (myImage.filters.alpha.opacity<100)

{

myImage.filters.alpha.opacity+=15
}
else if (window.interval)

{

clearInterval(interval)

}
}
</script>

</HEAD>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD BACKGROUND="logo2.gif">
<IMG id="myImage" SRC="logo.gif" class="imgf" onmouseover="clean()" onmouseout="foggy()" ALT="">
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

#9
Old Post June 10th, 2002 10:18 AM
OpenMind

OpenMind

Status: Offline!

i've done that as i had send you, but here it doesn't work Sad

___________________

visit .__________ __// ____..OpenMindGFX

#10
Old Post June 10th, 2002 05:49 PM
OpenMind

OpenMind

Status: Offline!

So, I found a way to do it. I had the idea of taking a background image as my first image and then fading the second image from 0 to 100 with a mouseover. (The one that Keddy shows didn't work completely so I took another one, the one I had first)

It worked, but now i have another problem. When I come across the image it fades but when i go away with the mouse it doesn't fades back to 0 but stays at about 30.

this is my code:

Code:


<script language="JavaScript1.2">

//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
//This credit MUST stay intact for use

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

[b]this one is for the body tag[/b]

style="filter:alpha(opacity=0)" onMouseover="high(this)" onMouseout="low(this)"

I hope you can help me!

___________________

visit .__________ __// ____..OpenMindGFX

1 2 »
Page 1 out of 2
Quick Jump:

Main Navigation

Site & Graphic Design by Aeon Tan
Developed by Jeremie Pelletier & Scott Roach

NeverAPI generated this page in 0.0091 seconds.