how to apply a rollover to an illustrator path and not to a case?

Hi!
I’m trying to apply a rollover to 7 differents illustrator path wich are superimposed. Is it possible to do it? I would like each of my my path to change colors when the mouse on.

I’d like to join a picture of my path so you can understand me better but how to join a picture? …

Hope somebody can help me!

Thanks

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think you would need to make all the states you need in Illustrator, first, then use them as rollovers in Freeway.

Not sure what you mean by “join a picture of my path”, though.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think Mélissa is using the word ‘join’ instead of ‘attach’. As in attach or upload the image/picture to the post. Is this correct Mélissa?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi! I already have all my states in illustrator. I tried to create a rollover with them, but no way, the rollover don’t use the path but a box around my path.
And yes, sorry I don’t speak very well english… I would like to attach the image to the post.
Thanks
:smiley:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Maybe your images in Freeway need to have transparency. Try making them PNGs in the Inspector palette.

Are the paths stroked? Do they have color?

Or, you can export them from Illustrator as PNG files.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, I’ll try. I’ll tell you later if it’s working.

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi!
I Tried with the PNG in the palette, but it was not working… So I exported every Illustartor file in PNG… But it’s still not working… :frowning:
Maybe I need an other action? Or I should group my paths?
…?

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And I forgot to tell you, my paths (trace) are only stroke, no color indor.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you send me the Illustrator files?

bob (at) theiguanaden (dot) com

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I send it to you right now. Thanks for your help!

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi! I found now how to make the rollover I wanted, It’s not working as well as I excepted but it’s okay.

Now I have an another problem.
You can check it on my website: melissameylan.ch
I would like that the name of the projects (which are represented in paths) become the same color than the path when you roll over it.

Is it possible? Can you explain me how to do it?

Thanks

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi! Can anyone help me??

I really cannot find how to do what I want!!
I would like that the name of the projects (which are represented in paths) become the same color than the path when you roll over it.
You can check it on my website: melissameylan.ch

Thaks

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I also cannot find a better way to show my pictures than the carousel action. (not visible yes on my website)
I really don’t like the way the pictures appears in carousel action (like a circular movment). I hope there is an other action I can use to show my picture in the same way (with the “next” and “last” button).

Can someone help me?

Thanks a lo!

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

hope there is an other action I can use to show my picture in the same way (with the “next” and “last” button).

Showcase in FW5.5

To go back to your rollovers - you can just create them as image rollovers with corresponding rollover coloured text when rolled over.

I also wondered about you saving the paths as transparent gifs and using target show hide on them.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I also wondered about you saving the paths as transparent gifs and using target show hide on them.

I appreciate you won’t get the same rollover effect on the main image when hovering though.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, thanks for your help! I follow your advices!

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi!
I dont’t want to have a showcase action, I also don’t like the style.
I would like to have my own “next” and “last” buttons. And to keep my page with the text. I just want that you can change (only) the image by clicking on “next”.
Is there an other action for that (else than the carousel one)?

Thanks!

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could do this with a stack of HTML boxes all the same size, each one containing the “previous” button and the central image and the “next” button. Using JavaScript, you would cause only one of them to be visible at any one time.

Name each box something you can remember, like frame1, frame2, frame3, etc.

Use the Extended dialog to give each of these boxes the same class attribute. (Click once on the box so its “handles” appear, then choose Item / Extended from the main menu. Make sure the DIV segment is selected, then click New, and enter the following name/value pair:

  • Name: class
  • Value: gallery

To build this stack in the most efficient manner, follow these steps:

  1. First, draw an HTML box that is large enough to hold your central image and your previous and next arrow graphics.

  2. While this HTML box is still selected (handles showing) add the class attribute as above, and name the box frame1 or whatever you choose using the Inspector’s Title field (actully mis-named – it creates the id attribute).

  3. With the HTML box still selected, option-click on the Graphic Box tool in the tools palette or the window header toolbar. (This locks the graphic box tool so it won’t revert after each use. You will click on another tool to unlock it later.)

  4. Draw a small HTML box for your previous button, starting and ending your drag over the HTML box you previously created. This makes the graphic box a nested child of the HTML box, so you will be able to duplicate the entire collection of boxes as if it was one element.

  5. Repeat this step to draw a central box for your image, and another for your next button. Now click on another tool to release the lock.

  6. Import the button images and the graphic, and align everything as you like it. You should end up with one finished frame of your effect.

Before you create your second frame, set the link which will navigate to it. (This is where naming these frames rationally will really pay off.) Click on the next graphic, and open the Hyperlink dialog (Apple-K) and choose the External tab. If you’re on frame1, and you want to navigate to frame2, enter #frame2 as the URL. If you also want your links to wrap around, then do the same for your previous arrow, only set it to #frame7 or whatever your highest number is.

Now click once on the outer HTML box, and use Item / Duplicate (0,0 offsets) to create a copy of that box above the first one. This time, all you will need to change are the URLs of the buttons and the graphic in the center. Repeat until you have built up the entire stack.

Now apply the Protaculous Action to the page, and choose the prototype-packed Library. In the top Function Body editor, add the following code (this presumes that you’ve followed my naming strategy above – each of the frames has the classname ‘gallery’ and all of the frames are named frame1, frame2, etc. with anchor links to match.

var frames = $$('div.gallery');
var links = $$('div.gallery a');
frames.invoke('hide').first().show();
links.invoke('observe','click',function(evt){
    evt.stop();
    var t = $(this.href.split(/#/)[1]);
    if(t){
        frames.invoke('hide');
        t.show();
    }
});

That should do the job for you. If you want the effect to be more gradual, then change the library to scriptaculous-packed, and change the function to this:

var frames = $$('div.gallery');
var links = $$('div.gallery a');
frames.invoke('hide').first().show();
links.invoke('observe','click',function(evt){
    evt.stop();
    var t = $(this.href.split(/#/)[1]);
    if(t){
        frames.select(function(elm){
            return elm.visible();
        }).fade();
        t.appear();
    }
});

It’s important to realize that no matter which effect you choose here, all of these images are loaded into the browser when the page is requested, and depending on how large they are, this may result in a very large file size for your page. For certain types of pages (galleries) this is expected by your visitors, and they’ll put up with it. I would not recommend putting this on your home page, though.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Correction. Typo above in the second function option:

var frames = $$('div.gallery');
var links = $$('div.gallery a');
frames.invoke('hide').first().show();
links.invoke('observe','click',function(evt){
    evt.stop();
    var t = $(this.href.split(/#/)[1]);
    if(t){
        frames.select(function(elm){
            return elm.visible();
        }).invoke('fade');
        t.appear();
    }
});

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, thank’s I’ll try this! :slight_smile:

Mélissa


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options