Rollover images with GradientWipe

  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

First post on Ozzu from me? Interesting...

Anyway, I bring up yet another question on link transitions. I have seen the link transitions on Ozzu and how they fade to red when the mouse hovers over them. Relating to that, I want to do something different...

I want to create links with a hover transition consisting of images. And I would like them to use Microsoft's GradientWipe effect. Basically, what I want to happen is: I want to hover over an image, have it GradientWipe to another image, then GradientWipe back to the first image when I MouseOut. All while having it link to another page when you click it.

This has been plaguing me for quite some time and I haven't found an answer yet. If anyone has an answer, thanks in advance!

Oh yeah, if this topic needs to be moved, then by all means, move it.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Can't you just use IE's custom filters on the image? It will only work on IE of course, and well, I'm not completely sure they even have a gradient one for images :D But hey, maybe somebody here knows where to find what you want! :lol:
  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

Well, I just figured that if it could GradientWipe text colors, it could do it to images, too.

AND!!! They use GradientWipe on images here:

http://www.windowsmedia.com

Well, of course they do. They know how to use it because they made the filter!

Still asking for help...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I was gonna ask where they use it, but then I realized I'm using Firefox :D
http://www.draac.com/wildiefilters.html <-- First hit on Google
  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

This site only demonstrates CSS IE filters like Alpha, Glow, Blur, and DropShadow... I know how to use these already. :)

What I'm looking for are the DXImageTransform filters (like GradientWipe, Fade, and Checkerboard) used strictly by IE. I want an image link to use one of these filters to transition to another image on MouseOver.

Just restating my problem. :)

I have already looked everywhere I could on Google, and I still have found nothing that relates to my problem.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Is it anywhere in the source of the site you posted?
  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

Well, as far as I see, WindowsMedia.com uses external scripts. I looked in their external JS file (http://www.windowsmedia.com/MEDIAGUIDE/ ... nctions.js) and searched for GradientWipe, but found nothing. The source of the top of the page (where they use the GradientWipe in an image slideshow) is quite large... too large to be posted on here. If you look, it's the BIG block of text at the top.

So please try and take a look at their source. I don't know a lot of JavaScript. :lol: And even if that big block of text was organized, I still probably wouldn't understand it.
  • dirkplug
  • Novice
  • Novice
  • User avatar
  • Posts: 17
  • Loc: The Netherlands

Post 3+ Months Ago

Search the page source code, found:

filter:progid:DXImageTransform.Microsoft.Wipe(duration=3, gradientsize=0.25,motion=reverse );

searching in google for:
filter:progid:DXImageTransform.Microsoft.Wipe

gave me this page...

http://msdn.microsoft.com/workshop/samp ... r/Wipe.htm

Here you can build your own script.

Hope this can answer your question.

Good Luck
  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

I have encountered this page in my search, but my quest is for finding out how to do it with a rollover image. Perhaps I could manipulate this code to occur on mouseOver and Out. But the one thing I don't have experiences with is the <DIV> tag. But hey, it's worth a shot, right? :lol:
  • ylwsub68
  • Newbie
  • Newbie
  • ylwsub68
  • Posts: 13

Post 3+ Months Ago

This code was taken from Microsoft's Wipe Script Editor... thing.

Code: [ Select ]
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
  oTransContainer.filters[0].Apply();
  if (bTranState=='0') {
        bTranState = 1;
    oDIV2.style.visibility="visible";
        oDIV1.style.visibility="hidden";}
  else { 
        bTranState = 0;
    oDIV2.style.visibility="hidden";
        oDIV1.style.visibility="visible";}
      oTransContainer.filters[0].Play(duration=2);}
</SCRIPT>
  1. <BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
  2. <SCRIPT>
  3. var bTranState = 0;
  4. function fnToggle() {
  5.   oTransContainer.filters[0].Apply();
  6.   if (bTranState=='0') {
  7.         bTranState = 1;
  8.     oDIV2.style.visibility="visible";
  9.         oDIV1.style.visibility="hidden";}
  10.   else { 
  11.         bTranState = 0;
  12.     oDIV2.style.visibility="hidden";
  13.         oDIV1.style.visibility="visible";}
  14.       oTransContainer.filters[0].Play(duration=2);}
  15. </SCRIPT>


Since I'll be using the transition for multiple images, could I possibly give fnToggle() two arguments, and then replace oDIV1 and oDIV2 with those arguments? Kind of like this:

Code: [ Select ]
<img src="homebutton-on.png" onMouseOver="fnToggle(homeButtonOff, homeButtonOn)" onMouseOut="fnToggle(homeButtonOff, homeButtonOn)">

<SCRIPT>
var bTranState = 0;
function fnToggle(imageOff, imageOn) {
  oTransContainer.filters[0].Apply();
  if (bTranState=='0') {
        bTranState = 1;
    imageOn.style.visibility="visible";
        imageOff.style.visibility="hidden";}
  else { 
        bTranState = 0;
    imageOn.style.visibility="hidden";
        imageOff.style.visibility="visible";}
      oTransContainer.filters[0].Play(duration=2);}
</SCRIPT>
  1. <img src="homebutton-on.png" onMouseOver="fnToggle(homeButtonOff, homeButtonOn)" onMouseOut="fnToggle(homeButtonOff, homeButtonOn)">
  2. <SCRIPT>
  3. var bTranState = 0;
  4. function fnToggle(imageOff, imageOn) {
  5.   oTransContainer.filters[0].Apply();
  6.   if (bTranState=='0') {
  7.         bTranState = 1;
  8.     imageOn.style.visibility="visible";
  9.         imageOff.style.visibility="hidden";}
  10.   else { 
  11.         bTranState = 0;
  12.     imageOn.style.visibility="hidden";
  13.         imageOff.style.visibility="visible";}
  14.       oTransContainer.filters[0].Play(duration=2);}
  15. </SCRIPT>


I bet this code is wrong, because I'm not too fluent in JavaScript, but if there are any corrections to be made or any other suggestions, please submit!

P.S. And thanks, guys, for the help. :)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.