Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18472 > unrolled thread

Menu in shape of a ring

Back to article view | Back to comp.lang.javascript

Contents

  Menu in shape of a ring h200 <hubler@net.com> - 2013-02-12 20:12 +0100
    Re: Menu in shape of a ring Osmo Saarikumpu <osmo@weppipakki.com> - 2013-02-13 11:10 +0200

#18472 — Menu in shape of a ring

Hi guys.

I draw one 3d ring, something like sos life belt.
I devided the ring into 4 parts ( 4 different pictures ).
The idea was that, when the user scrolls over, each part pup up.

OK this is not the main problem.
The main problem is that i can not "connect those 4 part into one
circular shape and that's because i dont know how to set position of 
each part.  I have inserted a 4x4 table and in each row i put one part 
of circle but of course i can not bind all those 4 part into one ring.

The end efect should be similar to this:
http://www.dynamicdrive.com/style/csslibrary/item/image_bubbles_using_css3_transform_and_transitions/

Each from those 4 ring part's should pup up like this.

I have no clue how to set positions to to bind all this into one shape...

[toc] | [next] | [standalone]

#18477

On 12.2.2013 21:12, h200 wrote:

> The main problem is that i can not "connect those 4 part into one
> circular shape and that's because i dont know how to set position of
> each part.

You have the wrong group, as this is not a JavaScript issue.

> I have inserted a 4x4 table and in each row i put one part
> of circle but of course i can not bind all those 4 part into one ring.

You'd need a 2 x 2 table, something like:

<table
 cellspacing="0"
 cellpadding="0">
<tr>
<td><img src="topleft.jpg"></td>
<td><img src="topright.jpg"></td>
</tr>
<tr>
<td><img src="bottomleft.jpg"></td>
<td><img src="bottomright.jpg"></td>
</tr>
</table>

But the binding together can be achieved without tables via CSS in many
ways. Thus, follow up to:

comp.infosystems.www.authoring.stylesheets

-- 
Best wishes, Osmo

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web