Dissolving Image Rollver

  • (2 Pages)
  • +
  • 1
  • 2

28 Replies - 11035 Views - Last Post: 19 February 2003 - 01:44 PM

#1 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Dissolving Image Rollver

Posted 13 February 2003 - 03:10 PM

i'm trying to get the dissolving effect seen here to apply to these 2 images seen here

a little help?
Is This A Good Question/Topic? 0
  • +

Replies To: Dissolving Image Rollver

#2 objekt404   User is offline

  • Whiskey Tango Foxtrot!?

Reputation: 0
  • View blog
  • Posts: 1,568
  • Joined: 15-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 03:16 PM

My best guess (& I'm not JS expert) would be that the onRollover would be pointed to a an animated Gif, rather than a static one...
Was This Post Helpful? 0
  • +
  • -

#3 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 03:37 PM

so it has to be animated gif to dissolve?
Was This Post Helpful? 0
  • +
  • -

#4 aswettla   User is offline

  • D.I.C Addict

Reputation: 1
  • View blog
  • Posts: 603
  • Joined: 27-September 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 04:01 PM

you can rollover in HTML but to make it animated then you will need it to be animated in Flash or somthing.
Was This Post Helpful? 0
  • +
  • -

#5 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 04:13 PM

there's instructions on the DHTML site, but i'm just not sure where to insert the URL's and everything.

no flash included.
Was This Post Helpful? 0
  • +
  • -

#6 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 07:37 PM

no no no, its defniitely not a gif. gimme a sec to dl and look @ it .
Was This Post Helpful? -1
  • +
  • -

#7 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 07:41 PM

this is the script that i just cut and pasted from that site into dw :

the transitions can be changed to be 1 of 23 different ones that are juts part of the js. i dont see a link to a page to show you what each one does so just experiment. right now, this one does transition 22. if you just read the comments in the script it tells you what to do but i can explain it.

where you see the 22 thats big and red. thats where you can change the number to anything between 0 and 23.

ill explain the rest in the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/*****************************************
* Dissolving Image Rollover- By Roy Whittle (http://www.javascript-fx.com/)
* Featured on/available at [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url]
* This notice must stay intact for use
*****************************************/

//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=[b]22[/b]) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
	onImages[imgName] = new Image();
	onImages[imgName].src = imgSrc;
}

function turnOn(imgName){ 
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].apply();
	document.images[imgName].offSrc = document.images[imgName].src;
	document.images[imgName].src    = onImages[imgName].src;
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].play();
}

function turnOff(imgName){ 
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].stop();
	document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onmouseover replacements:
Rollover("home",  "home_on.gif");
Rollover("about", "about_on.gif");
Rollover("scripts", "scripts_on.gif");

</script></head>

<body><a href = "http://www.dynamicdrive.com"
onmouseover="turnOn('home');"
onmouseout="turnOff('home');"><img name="home" class="imgTrans"
src="home_off.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com/contact.htm"
onmouseover="turnOn('about');"
onmouseout="turnOff('about');"><img name="about" class="imgTrans"
src="about_off.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com/new.htm" 
onmouseover="turnOn('scripts');"
onmouseout="turnOff('scripts');"><img name="scripts" class="imgTrans"
src="scripts_off.gif" border="0"></a><br>


//above are the three images. with the links (in red) and the image sources (in red)
//so just change that in each of those 3 parts above and youve got it. 

</body>
</html>
[b][b]
Was This Post Helpful? 0
  • +
  • -

#8 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 07:45 PM

i probably didnt expain what u wanted. so just ask.
Was This Post Helpful? 0
  • +
  • -

#9 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 07:59 PM

your code made sense so i just changed the parts in red and it still didn't work. HERE

i want the head to be first, and then when you put your cursor over it, it dissolves into the keyboard.
Was This Post Helpful? 0
  • +
  • -

#10 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 08:04 PM

you have to have two images...

lets name one logo_on, and one logo_off

you need to adjust the code in two spots. i forgot about this above. sry.

one spot is where it says :
//Specify name of participating images, plus paths to their onmouseover replacements:
Rollover("home", "home_on.gif");
Rollover("about", "about_on.gif");
Rollover("scripts", "scripts_on.gif");


so you get :

//Specify name of participating images, plus paths to their onmouseover replacements:
Rollover("logo", "logo_on.gif");


then....

down at the bottom like before..

but with a few extra changes i again forgot about. this is just to make it easier for more than one image.

<a href = "http://www.dynamicdrive.com/new.htm" 
onmouseover="turnOn('scripts');"
onmouseout="turnOff('scripts');"><img name="scripts" class="imgTrans"
src="scripts_off.gif" border="0"></a>


becomes :

<a href = "http://www.rocksinmyshoes.com/whateveryouwantthelinktobe" 
onmouseover="turnOn('[b]logo[/b]);"
onmouseout="turnOff('[b]logo[/b]');"><img name="[b]logo[/b]" class="imgTrans"
[b]src="logo_off.gif"[/b] border="0"></a>


look closely for the bold parts in that 2nd one, those are the parts i changed.
Was This Post Helpful? 0
  • +
  • -

#11 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 10:19 PM

it changed slightly, but still not working :dead:

we're so close.....
Was This Post Helpful? 0
  • +
  • -

#12 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 10:30 PM

i dont see a logo_on.gif on your server|?

just change the logo.gif to logo_on.gif, that way no more code changes. haha
Was This Post Helpful? 0
  • +
  • -

#13 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: Dissolving Image Rollver

Posted 13 February 2003 - 10:32 PM

okay, you had what i put in right, but its in the wrong place. haha. gimme a sec. i dont know what u did to this code. ;)
Was This Post Helpful? 0
  • +
  • -

#14 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 10:36 PM

here it is: http://members.truep...han/logo_on.gif

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Was This Post Helpful? 0
  • +
  • -

#15 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Dissolving Image Rollver

Posted 13 February 2003 - 10:36 PM

oh ok.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2