homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Targeting <div> "layers"
how to target layers

5+ Year Member

Msg#: 11546 posted 4:33 pm on Dec 29, 2005 (gmt 0)

I am new to Webmasterworld (registered 5 minutes ago), and so please forgive me if i am doing something wrong.

I was wondering how to target a layer just like you would a frame/iframe?

I would search the site, but haven't been able to find a search box.

any help is appreciated.



10+ Year Member

Msg#: 11546 posted 4:59 pm on Dec 29, 2005 (gmt 0)

What exactly do you mean? Do you mean with a link such as <a href="somepage.html#topic1"> or are you talking about when you lick on a link it calls up another page within an frame or iframe? The former is fairly simple; just use the div's ID as the name token. However, you can't use divs for the latter. Only frames and iframes can be used in such a way.


5+ Year Member

Msg#: 11546 posted 12:54 am on Dec 30, 2005 (gmt 0)

what i mean is that you have a layer with an image in it. Now what you want to do is when a link to another picture is clicked, you want the new (hyperlinked) picture to show up in place of the original one.

thus, it is effectively a frame, except that it is using layers.

i hope i made myself a bit more clear?


5+ Year Member

Msg#: 11546 posted 2:52 am on Dec 30, 2005 (gmt 0)

It doesn't work that way.

If you want to use divs to construct your page, then you have to make a whole new page for the next image.

To simplify things, you can use scripting (either javascript, php, asp, etc) to use a template and dynamically change the content (image).


WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 11546 posted 4:55 am on Dec 30, 2005 (gmt 0)

One thing you could do is place each image in its own div. Just one of those divs should display when the page loads, and the others should be visibility:hidden. Each div should be position:absolute and perhaps use a different z-index so they don't displace the rest of the page layout. Then the links on the page can call a javascript function that switches the visibility of the divs.

So you're not targeting the same div with each link, instead you are switching the visibility of several divs on and off -- but they are all displayed in the same position on the page.

I've used this approach with text content, but it should work with images just as well. However, I only did this to be comaptible with a previously existing CMS. It's much more complex than an inline frame, and it fails without javascript.

In most cases, I would recommend an iframe to achieve this effect, rather than ising javascript to switch the display rules for multple divs.


5+ Year Member

Msg#: 11546 posted 10:36 am on Dec 30, 2005 (gmt 0)

thanks for the replies. i want to try and steer away from frames or iframes. personal preference.

the javascript suggestion is probably the better option. or i oculd just make a new page for each picture. but i'll see how each one goes. thanks.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved