Rollover Question

Browni

Browni

Registered
:( 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!
 

Attachments

  • greenball.jpg
    greenball.jpg
    22.5 KB · Views: 21
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.
 
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
 
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.
 
Ok so the rollovers work, but is it possible to place a iframe on the image so that i can display text? :confused: I don't think so.
 
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).
 
Thanks I will give that a try

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

See you all when i get back!!

Bye!!
Ada,
 
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
 
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.
 
ok i undesrand what you are talking about however im not sure how i will try myself before asking how to do it :)
 
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.
 
You must log in or register to reply here.
Back
Top