Shapely Bodies

[simonjones]

I am currently trying to create a webpage with the main text contained within a shape. Here’s an example:
http://www.pictures-on-walls.com/Experiment/Experiment.html

I achieved the desired effect . . . well, almost . . . problem is, doing it this way, I obviously can’t create any text links – as I can’t click through an image, transparent or not.

I’ve obviously approached this whole idea the wrong way. Any ideas anyone??

[Moshambi]

I dont know if this would work or not but have you tried using CSS and setting the z-index: xx; ?

I have used an image before and had to place links where the image still lays and I used the z-index and it worked fine for me.

It might work for you but Im not sure, just an idea to try.

[simonjones]

No, Moshambi, I haven’t tried that. Not being any sort of expert in this, myself, is there any chance of giving me an example of what you mean?

Thanks.

[magicyte]

READ WHOLE POST!!!

I can. If you have worked with HTML, simply in the style="" tag of your link (if you have one (if not, create one)) and put z-index:10;. This should put your link over the image. I will explain:

If you have worked with x,y coordinates, you know about left, top, and position: absolute; Well, now you can place things in 3D format with z-index, that is placing it on top of other things on your page, kind of like stacks of paper. Pretty easy to understand, unless you aren't a good programmer at all. Just bear with me and do what I told you to do first with your link: put this in between <a and > (Anywhere in between there where a space is): style="z-index:10;"; or just add z-index:10; in a current style tag if you already have one, which I think you do.

Hope I helped.

-magicyte

[simonjones]

Thanks, magicyte. I'm still not managing to get what I want (maybe because my text content is within an iframe?) - however, I feel pretty sure from my experiments so far, that you have pointed me in the right direction. I shall commit the rest of my weekend to studying Z-indexing.

Thanks again.

[simonjones]

Well, I now understand the general principle of z-indexing, and have been happily stacking images in different orders. Still struggling with getting links to the front of the stack though.

Can you just confirm for me that this is what you mean, please?

<a href="http://www.google.co.uk/" style="z-index:10;">link</a>

Thanks

[Moshambi]

yes that is what he means...and I dont know if this could be a problem but it should be fixed anyway. I clicked on view source on your page and for your down arrow you close the <layer> but you never started one...for your up arrow it is syntactically correct but you forgot to open the layer for the down arrow...just thought I would let you know

[simonjones]

yes that is what he means...and I dont know if this could be a problem but it should be fixed anyway. I clicked on view source on your page and for your down arrow you close the <layer> but you never started one...for your up arrow it is syntactically correct but you forgot to open the layer for the down arrow...just thought I would let you know Thank you - not sure how I missed that. Doesn't sort out my other problem though.

[magicyte]

State your problem again, please. And any other problems that you have just found.

Alright. Basically, if you want your link at the VERY TIPPY TOP, just make the z-index go up a value until it is there. Try changing it to "10000000000" for a change. You never know.

-magicyte

P.S. pandreson, you aren't allowed to advertise. What you have posted was an advertisement. I am forced to PM a Moderator to take a look at you... Note that the most they can do at this moment is warn you.

[simonjones]

The problem is this . . . I want exactly as I already have in my example, with one difference; for the links in the text to work/be accessible. That's it.

[magicyte]

You were right! Alright, pretend you have a picture frame (the iframe in this case) and there are elements in it, some stacked on top of the other. Well, when you put a transparent sheet over it, you can't reach it's elements, right? No matter how large the z-index number is, you won't be able to reach the link because the picture is covering the iframe. So even if your link was at the TIPPY TOP, you couldn't touch it, because something was in the way. You were correct. There may be a way to fix this problem.

Try to make images to go around the iframe so that you can reach it's elements. Try to make images like the outer part of the triangle and surround the iframe with it. That should work. :)

Any help, questions, or comments, PM or post. And whatever you may choose to do, let there be a way to reach the iframe's contents.

-magicyte

[Medyman]

Simon,

As you stated in your first post (and everyone else caught on later), the general premise of the situation can't be changed with your current coding. Usining Magictye's analogy, a picture isn't accessible through its frame.

So, the trick is to remove the glass!

Bascially, instead of using a transparent window through which you can view the text, you can make the frame in the shape that you need.

I would recommend some (http://meyerweb.com/eric/css/edge/raggedfloat/demo.html) CSS (http://meyerweb.com/eric/css/edge/slantastic/demo.html) based (http://meyerweb.com/eric/css/edge/curvelicious/demo.html) techniques (http://meyerweb.com/eric/css/edge/slantastic/holiday.html) to achieve your goal. (There are 4 links there).

Hope that helps :D

[magicyte]

How is it possible to reshape an iframe with CSS?

-magicyte

[simonjones]

Thanks again – to all of you. Loads to think about, study and experiment with here. Glad I’ve got the week off work.

Excellent, helpful and friendly forum, by the way.

[Medyman]

How is it possible to reshape an iframe with CSS?

-magicyte

You can't...

My suggestion was to get rid of the iframe and use "CSS frames"
Sorry if that isn't clear.

[BLiZZaRD]

My question is this: If you have images with links on (under, in) them.. why not just use image mapping? You can make the image once, then make it again with the text or link items on it, then map them...
Wouldn't it be easier, or am I just missing the point?

[simonjones]

My question is this: If you have images with links on (under, in) them.. why not just use image mapping? You can make the image once, then make it again with the text or link items on it, then map them...
Wouldn't it be easier, or am I just missing the point?

I have considered image mapping. Having never used it before, I might be wrong, but wouldn’t that mean the image mapped link(s) would be static? If so, it wouldn’t work for what I want. I intend for the shape/image to remain static, while the text beneath (and links) would be scrollable. I feel sure the CSS frames will be my answer.

[BLiZZaRD]

Okay, sorry I must have missed that part. Yes mapping makes them static.

[simonjones]

Just another thank you for everyone’s ideas and help – I finally managed what I wanted using CSS frames. Learned a lot of other interesting things in the process too, so it was doubly worthwhile.

Thanks again, I’ll come back to bother you all when I think of another daft idea :)

[Medyman]

Just another thank you for everyone’s ideas and help – I finally managed what I wanted using CSS frames. Learned a lot of other interesting things in the process too, so it was doubly worthwhile.

Thanks again, I’ll come back to bother you all when I think of another daft idea :)

Glad you got it working Simon. Do you have the page up? I'd love to see how it turned out.

[magicyte]

Here it is: http://www.pictures-on-walls.com/Experiment/Experiment.html (http://www.pictures-on-walls.com/Experiment/Experiment.html#)

:)

-magicyte

[Medyman]

Here it is: http://www.pictures-on-walls.com/Experiment/Experiment.html (http://www.pictures-on-walls.com/Experiment/Experiment.html#)

:)

-magicyte

Don't think so.

[simonjones]

No, no, I haven't uploaded it yet. Will let you know when I do.