DHTML Replace Content

[circuitjump]

Hi everyone,

Quick Question. I have two links like below.

Link 1 ¦¦ Link 2

When I click on "link 1" I want Text A to appear.

Example: *Click* "Link 1" ¦¦ Link 2
Text A

When I click on "link 2" I want Text B to appears instead of Text A.

Example: Link 1 ¦¦ *Click* "Link 2"
Text B

Am I making sense? Well, that's what I want to do but I can't figure out how to get it to work.

I finally got a book on DHTML today and it's by O'Reilly. It's GOOD! so far. :)

Thanks

[korkus2000]

You need to switch visibility in an element on and off. Use none and visible I think. Position the two divs in the same place and use the onclick from the link to show and hide each div.

This thread may help:
[webmasterworld.com...]

[MonkeeSage]

Visibility will still allow the element to take up space but will not display it (which is totally wierd if you ask me), so I usually use the display attribute; it can take 'none' or 'block' or 'inline' (among others) as values, and if set to 'none', it takes up no space at all in the document flow.

Jordan

[korkus2000]

You are right Jordan. I aslo find it strange to keep the space if it is set to none.

[circuitjump]

Thanks guys!

Here's something I thought of while I was doing this. If I create a JS that has two sets of arrays, but I only want to use one at a time, how can I go about using the links to have the JS change between using arrays?

Here's what I was thinking:

if (click link one) {

var picDir = new Array();
picDir[0] = "images/image1.gif";
picDir[1] = "images/image2.gif";
picDir[2] = "images/image3.gif";
picDir[3] = "images/image4.gif";

} else if (click link two) {

var picDir = new Array();
picDir[0] = "second/images/image1.gif";
picDir[1] = "second/images/image2.gif";
picDir[2] = "second/images/image3.gif";
picDir[3] = "second/images/image4.gif";

}

So when I click on link one the JS would use array set one and when I click link two it uses array set two.

My apologies to ask all these questions, but reading this book I'm exited to find out more and more.

[garann]

You could give each link an ID, and test using that. So..

function showImages(obj) {
if (obj.id == "Link1") { 
var picDir = new Array(); 
picDir[0] = "images/image1.gif"; 
... 
} else if (obj.id == "Link2") { 
var picDir = new Array(); 
picDir[0] = "second/images/image1.gif"; 
... 
}
}
...
<a href="javascript:showImages(this)" id="Link1">Link 1</a> ¦¦ <a href="javascript:showImages(this)" id="Link2">Link 2</a>

..Or there are more alternatives than you can imagine. You just have to find a unique value to test for. For instance, you can pass a 1 or a 2 into the function, depending on the link clicked. You could also call a seperate function for each link.

hth,
g.

[RonPK]

circuit, in stead of juggling with visibility and/or display, you could use the innerHTML property. Supported by IE 5 and up, Mozilla 0.9+ and Opera (5+?). Basically, try this:

<script type="text/javascript">
function showText(theText) {
if (!document.getElementById) return false;
document.getElementById("toggle").innerHTML = theText;
}
</script>
<a href="#" onClick="showText('Text A'); return false">link 1</a> ¦¦
<a href="#" onClick="showText('Text B'); return false">link 2</a>
<div id="toggle"></div>