Displaying Information with a Link

Forum Moderators: open

Message Too Old, No Replies

Displaying Information with a Link

Display information link using java script

rahmuss

1:09 am on Dec 30, 2003 (gmt 0)

I'm trying to make a simple page that lets you click on a button (or link preferably) that will display images on that page after clicking on the link. So they click the link or button and just below the button it shows some pictures. Nothing fancy. Here is the meat for what I have :

<head>
<script type="text/javascript">
function show() {
document.write("<table><tr>")
document.write("<td><div align='center'><a href='images/..../pic1.jpg'><img src='images/..../pic1_t.jpg'></a></div></td>")
document.write("</tr></table">)
document.write(<p></p>)
}
</head>
<body>
<form>
<input type="button" onclick="show()" value="Pictures">
</form>
</body>

RonPK

2:07 pm on Dec 30, 2003 (gmt 0)

You can't use document.write when a document has finished loading, as it tries to add lines to the document. Imho it is more elegant to change the contents of a page element: create an empty <div>, and change its contents onclick.

...

<a href="#" onclick="showPics(); return false">pictures please</a>

...

This should work in IE5 and up as well as in the more recent versions of Mozilla/Netscape and Opera. Hope this answers your question.

korkus2000

2:11 pm on Dec 30, 2003 (gmt 0)

You can also use a hidden div. You can position the div absolutely so it appears where ever you want. Then just use the display attrubute setting it from none to block to show it.

Here is an example:
http://www.cs.rpi.edu/~hollingd/eiw/notes/sjt/divs/divs_source.html

rahmuss

1:55 am on Jan 1, 2004 (gmt 0)

Thank you very much. I have finally implemented both of your suggestions and it looks great. Still tweaking some things; but I'm sure I'll get it figured out. Thanks again.

rahmuss

11:21 pm on Jan 1, 2004 (gmt 0)

Ok... I thought I was good; but I can't seem to get it to do quite what I want. And it may not be possible. In Windows explorer you click on the plus for the folder to expand the folder. It then shows the contents of the folder, and the folder now has a minus. I'm trying to do something like that with javascript. For example : A single link on the page says "Show Picture". You click the link and now the link says "Hide Picture" and it has a picture below it. See what I mean? I tried something; but it didn't work. This is what I tried:

var hide = '<a href="#" onclick="hidepic(); return false">Hide Picture</a><div id="hidethis"></div><img src="image.jpg">';

var show = '<a href="#" onclick="showpic(); return false">Show Picture</a><div id="hidethis"></div>';

function hidepic() {
document.getElementById('hidethis').innerHTML = show;
}
function showpic() {
document.getElementById('showthis').innerHTML = hide;

</script>
<body>

<a href="#" onclick="showpic(); return false">Show Picture</a>
<div id="showthis"></div>

</body>
</html>

rahmuss

4:45 pm on Jan 3, 2004 (gmt 0)

I figured it out. I know it's silly answering your own questions; but just in case someone else was wondering. I added a variable for each layer, and used modulous 2 for an on/off switch, and in each function for each layer I set the other layer variables back to zero, and increment the variable that correlates to the function :

<html>
<head>
<title>Test</title>
<script type="text/javascript">
var lay1=0
var lay2=0
function layer1() {
lay2=0
if (lay1%2==0) {
document.getElementById("L1").style.display="block" }
else {
document.getElementById("L1").style.display="none" }
document.getElementById("L2").style.display="none"
lay1++
}
function layer2() {
lay1=0
document.getElementById("L1").style.display="none"
if (lay2%2==0) {
document.getElementById("L2").style.display="block" }
else {
document.getElementById("L2").style.display="none" }
lay2++
}
</script>
<body>
<a href="#" onclick="layer1(); return false">Layer1</a>
<div id="L1" style="display:none">
<img src="image1.jpg">
</div>
<a href="#" onclick="layer2(); return false">Layer2</a>
<div id="L2" style="display:none">
<img src="image2.jpg">
</div>
</body>
</html>