Rollovers in Imageready

  • Jerxs
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 17, 2005
  • Posts: 15
  • Status: Offline

Post April 17th, 2005, 8:18 pm

I was wondering if it is possible to use multiple slices in a rollover for example, this would be the over image;
http://koimports.com/photos/xs_designs_V_2_1.jpg
And this would be the down & selected effect for each link;
http://koimports.com/photos/xs_designs_V_2_2.jpg
I am certain that and action like this would be possible if using flash though I am in the process of teaching myself flash/action scrip now and really cannot do much with it.
Thanks, Jerxs
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 17th, 2005, 8:18 pm

  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 04, 2004
  • Posts: 2136
  • Loc: Louisville, Ky
  • Status: Offline

Post April 18th, 2005, 10:50 am

Im not sure 100% what it is you mean, but you can change the background image on a mouse rollover in css

Code: [ Select ]
.rollover a { background-image: url(something.jpg);}
.rollover a:hover { background-image: url(somethingelse.jpg);}
  1. .rollover a { background-image: url(something.jpg);}
  2. .rollover a:hover { background-image: url(somethingelse.jpg);}


So you could slice up that image and assign the ones you want to change to display a new image on mouseover
  • Jerxs
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 17, 2005
  • Posts: 15
  • Status: Offline

Post April 18th, 2005, 3:29 pm

Great, I will have to try that. Thank you.
  • Jerxs
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 17, 2005
  • Posts: 15
  • Status: Offline

Post April 18th, 2005, 6:56 pm

.rollover a { background-image: url(something.jpg);}
.rollover a:hover { background-image: url(somethingelse.jpg);}

????.rollover a =mouse over?????
????.rolover a:hover = down or selected??????
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 04, 2004
  • Posts: 2136
  • Loc: Louisville, Ky
  • Status: Offline

Post April 18th, 2005, 7:03 pm

rollover a would be while the mouse is not over it

hover would be while the mouse is over

Code: [ Select ]
.rollover a:active {url(somethingelse.jpg);}

this would be while pressed/clicked

I know the first two examples I gave you work, not sure if this will...I know for a fact a:active works for text, should work for an image as well

Im also assuming you have some familiarity with CSS
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post April 18th, 2005, 7:24 pm

Jerxs, I moved your post here to the digital imaging board. Chances are the Photoshop experienced folks here can get you some help. I think your idea with the Image Ready slices is possible. Might take some multiple layering in PS first, and figuring what layers to hide and not hide in IR, but you'll probably get your best help here for what you've already worked with. Sorry Vlad -- no mean to this your CSS thoughts. I think those could work too, but unless you've ever worked with Image Ready, editing that crap code can be a pain.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • Jerxs
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 17, 2005
  • Posts: 15
  • Status: Offline

Post April 18th, 2005, 9:38 pm

Im not to fimiliar with CSS, I am still pretty new to web development. I do consider myself a semi-advanced PS user. In fact it is because of PS and IR that I became interested in developing web sites.

I am going to be taking some classes through the art institute of pittsburgh and will hopefully be ready to venture out on my own within the next couple of years.

Guess this should be in the intro area of the forum, but oh well.

Thank you for your help.

I am going to fiddle around with it some more.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 04, 2004
  • Posts: 2136
  • Loc: Louisville, Ky
  • Status: Offline

Post April 19th, 2005, 5:04 am

Ahh..I see, yeah I wasn't too sure what you where asking. I don't think I have ever used Image Ready. I did find some tutorials that may help you out though.

http://www.greycobra.com/tutorials.php? ... view&id=51

this one will help you animate the effect I think you are going for, you will probably have to incorporate some type of rollover to get to what you are trying to do.

here is something else on rollovers in imageready http://www.creativemac.com/HTM/58Second ... llover.htm

I think that this should help you get the effects you are looking for.

Sorry I couldn't help you any further than that
  • Belk Media Group
  • Graphic Monk
  • Professor
  • User avatar
  • Joined: Jan 12, 2005
  • Posts: 778
  • Loc: In the heart of California, Fresno.
  • Status: Offline

Post April 29th, 2005, 12:39 am

If you are using ImageReady just create all the different roll over buttons (up, over, down, hit). Then go to your Roll-Over Window and add new roll-over frame for each or as needed. ImageReady will right the code for you when you save as .html. If you have any trouble just let me know and I will explain step by step in more detail.
http://www.JamesBelk.com Stay Tuned for the new era in Belk Media Design
  • Jerxs
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 17, 2005
  • Posts: 15
  • Status: Offline

Post April 29th, 2005, 9:46 am

Thank you origino, I am able to make a basic rollover using imageready, but was wondering if it were possible to use multiple slices in one action in a rollover.
(eg. down effects 3 diffrent slices at one time)

If you would, check out the links I posted. The first image would be over, the second would be down, the down would actually be using multiple slices to create the effect.

Thanks again, If you know how to achieve the above please shout back.

Jer

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 30 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.