# Rollover Question



## Browni (Aug 23, 2003)

ARRG! I made this image a couple of weeks back, and I want to make it in to a web page interface, BUT for instance i want it so that when you rollover a tentacle the name of the section appears in the green orb. But i cant figure out how to do it? any ideas? ( I do have Image Ready)

Going Out of my mind!


----------



## Arden (Aug 23, 2003)

You have to slice the image so that the tentacles and the orb each have their own slice.  Then you can assign rollover states to the slices on the tentacles, and you simply make the section names visible on whichever part you like.  When you make a layer visible with a certain rollover state selected (down, for example), it will become visible every time you initiate a mousedown event on that slice.

I've been experimenting with this recently, and I think I've got the concept down.  The only problem is that you can't make non-rectangular slices, though you can with image maps.  This shouldn't be a big problem, though.  (Be sure to set your export settings to CSS instead of tables, and all lowercase HTML formatting.)

Nice image!  Although there are too many JPEG artifacts.


----------



## Browni (Aug 23, 2003)

thanks,

the image previewed was a low grade jpg image, ( to save on file space) is there any way to use Image Maps and Slices ? 

Thanks 

Adam


----------



## Browni (Aug 23, 2003)

Right, after a few tries, i got the rollover effect working, however how do i get the text to appear in the orb?


For people that just want to see how far i have got, it is here (WARNING: Low grade images to save on file time:

http://www.adamswbrown.btinternet.co.uk/sites/Green_orb/

thanks 

adam


----------



## magnus (Aug 23, 2003)

> _Originally posted by Browni _
> *however how do i get the text to appear in the orb?
> *


Select the over state in the rollovers palette and type something inside the orb.


----------



## Browni (Aug 23, 2003)

does this work for each individual tentacle?


----------



## magnus (Aug 23, 2003)

Yes, but you have to make a new text layer for each tentacle.


----------



## Arden (Aug 24, 2003)

Wrong.  You have to make a new layer for each label, like "Home" vs. "Info," but you don't have to make a new text layer for each tentacle... I'm not even sure what you're referring to here.

Open the file in Photoshop, and add your text layers.  Turn each invisible and switch to Imageready.  For the rollover states that you want the images to be visible, simply turn on the layers with that state selected.  You can even move images for different states, so the entire, um, entity could shift 10 pixels down and 10 pixels right when you rollover one of the tentacles.

Does this make sense?  I'm not sure how else to explain it, except with a screenshot.  If you need a screenshot, I'll be happy to take one for you.


----------



## Browni (Aug 24, 2003)

Thank you very much. 
this is  very helpful.

http://www.adamswbrown.btinternet.co.uk/sites/Green_orb

IT WORKS


----------



## Browni (Aug 24, 2003)

Ok so the rollovers work,  but is it possible to place a iframe on the image so that i can display text?  I don't think so.


----------



## Arden (Aug 24, 2003)

You can place a div over it using absolute positioning, and you can probably place an iframe the same way, but I'd steer clear of iframes because they don't always work.  You can also use the image that appears in the div you want text in as a background image for that div, and simply place text therein (granted that you exported your image with div's instead of table cells, each slice of image appears in its own div.  The same can be said about td's if you used tables).


----------



## Browni (Aug 25, 2003)

Thanks I will give that a try

Im on vacation for the week monday to sunday. In cornwall! 

See you all when i get back!!

Bye!!
Ada,


----------



## Arden (Aug 25, 2003)

Hasta.  Let us know what happens when you get back.


----------



## Browni (Aug 29, 2003)

Well with nearly a week to think about how to get it to work, along with the occasional party, i got it to work.

http://www.adamswbrown.btinternet.co.uk/sites/Green_orb/

I even wrote some gumph text to show what it looks like.

So what do you think? How can it be improved?

Im thinking of having a 'my life' section that would be a webblog of sorts, detailing what's going on in my life etc. Any idea on the best webblog system out there, I've tried Blogger and didn't like it I would like something simple.

I really appreciate you guys, helping me out.

Thanks

Adam


----------



## Arden (Aug 29, 2003)

If anything, I would add an image map to the tentacles, polygon of course, and move the mouseover commands to the maps so you don't get the rollover when you're not even over the tentacles.

And make the base of the Gallery tentacle turn red, too.


----------



## Browni (Aug 29, 2003)

ok i undesrand what you are talking about however im not sure how i will try myself before asking how to do it


----------



## Browni (Sep 2, 2003)

Its all up now, except the 'my life' section. Got to figure out a  good weblog system for that.

Name change also. Im going to have a different site for the 'design' variant.
http://www.adamswbrown.btinternet.co.uk/sites/Green_orb/

enjoy

adam


----------



## Arden (Sep 3, 2003)

Here's the thing:  When you move the mouse close to one of the tentacles, the rollover activates, even though the cursor isn't actually on it.  I had the same issue as well over at www.hostultra.com/~nexuscc but you'll notice the rollover only activates when you move the mouse onto a button, not near a button.  The secret is to slice up the tentacles with the Image Map tool (located next to the Slice tool) using the polygon option, and then, in your resulting code, you move the onmouseover code from the <a> surrounding the image tags to the <a> that uses the image map.

Study my Nexus code to see how I did it.

On a more cosmetic note, I think you should get rid of that border surrounding your content.  It breaks up the visual of the page, and it offsets the background a bit.

Edit:  Also, you should center the rollover captions.  Create two perpendicular guides for the texts to "sit in," so to speak, and simply line them up.  Again, look at the Nexus site for an example.


----------

