My client wants the user to be able to click on a word or picture and then relevant text to appear beneath which then changes when they click on a different word or picture

I'm guessing its some kind of visible / invisible div but not quite sure how to go about implementing this.

Can anyone point me in the right direction or let me know of any issues with doing this?

 

Thanks

javascript...

 

peek a boo code, is what i like to call it...

 

I would give you a copy of my code, but my internet isnt working. only certain sites are loading hmmm lol...

There's a few different techniques you can use for this. if I was using raw javascript I would add something like this attribute to the link tag:

 

onclick="document.getElementById('id-of-hidden-element').className='visible';"

 

The code above would change the class name of the element to visible, so you would need to predetermine the classes in your stylesheet. However, to really achieve what you want to do there is slightly more to it - have you looked at the jQuery Javascript library? - it makes this kind of stuff infinitely easier.

if you don't want to use Javascript, you could try with the (fragile) :active psuedo-class.

 

HTML:

<a class="peek-a-boo" href='#'> A Link
<div>some hidden text</div></a>

 

CSS:

a.peek-a-boo * { display: none; }
a.peek-a-boo:active * { display: auto; }

<a class="peek-a-boo" href='#'> A Link
  <div>some hidden text</div></a>

You shouldn't nest a block element inside an inline element though.

Perhaps you could use a <span> instead of the div.

But then you'd probably need to set the css to display:block; anyways so you're back to square one.

Possibly more semantic though.

My client wants the user to be able to click on a word or picture and then relevant text to appear beneath which then changes when they click on a different word or picture

I'm guessing its some kind of visible / invisible div but not quite sure how to go about implementing this.

Can anyone point me in the right direction or let me know of any issues with doing this?

 

Thanks

Off the top of my head what about layers / hidden layers, the code may be a bit messy but it should work, or if you are using just images what about using fireworks to produce a swap image behavior

Russell is right, depending on the size of the text/html that will appear you could also use AJAX to load dynamic content/pages (as suggested, JQuery makes it trivial and can handle AJAX too).

Thanks everybody for your suggestions and sorry for the delay in responding.

Am looking at using an expanding menu list to achieve this as its all text content and i want it to degrade gracefully when javascript is switched off.

 

if you don't want to use Javascript, you could try with the (fragile) :active psuedo-class.

peguin what do you mean by the (fragile) above? Do you think it will misbehave in some browsers??

The active pseudo-class will only show the content while the mouse button is held down.

As soon as the mouse button is released, the content will disappear.

This may or may not be what you want.

It is fragile because not all browsers support it.

The active pseudo-class will only show the content while the mouse button is held down.

As soon as the mouse button is released, the content will disappear.

This may or may not be what you want.

It is fragile because not all browsers support it.

 

OK, so not so great from an accessibility point of view?

After a little bit of digging, it seems that all 'modern' browsers support the active pseudo-class, even IE6.

 

In my opinion, it is certainly ok from an accessibility point of view. In fact, it probably works better for keyboard users.

But for mouse users, unless they keep the mouse button pressed, the revealed info will disappear.

As I said, it depends whether you want the content to remain visible after the mouse button has been released/until another image has been clicked.

I hope that makes sense