...

View Full Version : global variables - how to interact with user?



helavissa
05-15-2009, 06:49 AM
I'm new to javascript, but I need help and really hoping for a reply. I was trying to find an answer in Google but no result.

So I have two table containing images, at the beginning only first table is displayed. Then when one of the images in the first table is clicked, a second table should appear, and user should click one of the images on that table. And that image should replace the one that was clicked originally in the first table.

So the question is, when the user clicks an image in the second table, how do I know what was originally clicked in the first one? I tried to use global variable but that doesn't work.

Any help would be appreciated, thank you for reading

Old Pedant
05-15-2009, 06:55 AM
Yes, a global variable. If you tried that and it didn't work, then you goofed someplace.

Show us your code. We can't debug non-existent code.

adios
05-15-2009, 09:04 AM
I'm practicing my typing today. And learning about anons.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<base href="http://www.noao.edu/image_gallery/images/" />
<style type="text/css">
body {background: black;text-align:center;}
table {border-collapse: collapse;margin: 20px 50px;}
td {border:1px white ridge;}
#t1 {display:inline;}
#t2 {display:none;}
img {width:100px;height:100px;}
</style>
<script type = "text/javascript">

var curr;

function show_n_tell(e, id)
{
var el = document.getElementById(id);
if (el)
{
var state = (el.style.display == 'inline');
el.style.display = state ? 'none' : 'inline';
}
e = e || window.event; //event object
curr = e.target || e.srcElement; //img object
}

function pic_out(e)
{
e = e || window.event;
target = e.target || e.srcElement;
curr.src = target.src; //transfer
}

</script>
</head>
<body>
<table id="t1" onclick="show_n_tell(event, 't2')">
<thead>
</thead>
<tbody>
<tr>
<td><img src="hnla.gif" /></td>
<td><img src="d6/m27mmb.jpg" /></td>
<td><img src="gkperca2.gif" /></td>
</tr>
<tr>
<td><img src="d2/ngc2237_200.jpg" /></td>
<td><img src="gkpera2.gif" /></td>
<td><img src="d3/ic1396-200.jpg" /></td>
</tr><tr>
<td><img src="d3/abell39c.jpg" /></td>
<td><img src="d4/m43b.jpg" /></td>
<td><img src="d3/04535b.jpg" /></td>
</tr>
</tbody>
</table>

<table id="t2" onclick="pic_out(event)">
<thead>
</thead>
<tbody>
<tr>
<td><img src="crl2688a2.gif" /></td>
<td><img src="d6/m76b.jpg" /></td>
<td><img src="d3/03127b.jpg" /></td>
</tr>
<tr>
<td><img src="d6/m21a20b.jpg" /></td>
<td><img src="d4/crab1b.jpg" /></td>
<td><img src="hnla.gif" /></td>
</tr><tr>
<td><img src="d2/02172b.jpg" /></td>
<td><img src="d2/hh666_200.jpg" /></td>
<td><img src="d2/b163-200.jpg" /></td>
</tr>
</tbody>
</table>
</body>
</html>

Don't quite get the point of it, but I'm sure there is one ...

helavissa
05-15-2009, 10:11 AM
Actually while preparing code for Old Pedant I found out that it actually works, thank you a lot.

Can I ask a different question, I want to display second table over the first one - currently I'm using css z-index to to that, is there more convenient way to do that? (I don't want new window)

Thank you!

adios
05-15-2009, 11:49 AM
Z-index with absolute positioning is fine, except that I gather you don't ever want these two galleries onscreen at the same time. Is this some sort of picture game? Interesting. If the above is true, then just alternating between them with CSS display (http://www.quirksmode.org/css/display.html) makes more sense to me. Just a thought.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<base href="http://www.noao.edu/image_gallery/images/" />
<style type="text/css">
body {background: black;text-align:center;}
table {border-collapse: collapse;margin: 80px 50px;}
td {border:1px white ridge;}
#t1 {display:inline;}
#t2 {display:none;}
img {width:100px;height:100px;}
</style>
<script type = "text/javascript">

var clikpic;

function showhide(e, tbl1, tbl2)
{
tbl1.style.display = (tbl1.style.display == 'none') ? 'inline' : 'none';
if (tbl1.style.display == 'none')
{
tbl2.style.display = 'inline'; //flip 'em
clikpic = gettarget(e); //save click
}
else
{
tbl2.style.display = 'none'; //back to first
clikpic.src = gettarget(e).src; //transfer
}
}

function gettarget(e) //clicked pic
{
e = e || window.event;
var target = e.target || e.srcElement;
return target;
}

</script>
</head>
<body>
<table id="t1" onclick="showhide(event, this, document.getElementById('t2'))">
<thead>
</thead>
<tbody>
<tr>
<td><img src="hnla.gif" /></td>
<td><img src="d6/m27mmb.jpg" /></td>
<td><img src="gkperca2.gif" /></td>
</tr>
<tr>
<td><img src="d2/ngc2237_200.jpg" /></td>
<td><img src="gkpera2.gif" /></td>
<td><img src="d3/ic1396-200.jpg" /></td>
</tr><tr>
<td><img src="d3/abell39c.jpg" /></td>
<td><img src="d4/m43b.jpg" /></td>
<td><img src="d3/04535b.jpg" /></td>
</tr>
</tbody>
</table>

<table id="t2" onclick="showhide(event, document.getElementById('t1'), this)">
<thead>
</thead>
<tbody>
<tr>
<td><img src="crl2688a2.gif" /></td>
<td><img src="d6/m76b.jpg" /></td>
<td><img src="d3/03127b.jpg" /></td>
</tr>
<tr>
<td><img src="d6/m21a20b.jpg" /></td>
<td><img src="d4/crab1b.jpg" /></td>
<td><img src="hnla.gif" /></td>
</tr><tr>
<td><img src="d2/02172b.jpg" /></td>
<td><img src="d2/hh666_200.jpg" /></td>
<td><img src="d2/b163-200.jpg" /></td>
</tr>
</tbody>
</table>
</body>
</html>

helavissa
05-17-2009, 02:06 AM
thank you adios

TinyScript
05-17-2009, 06:36 AM
I can't get the border swapping correct. Obviously, the red border should only display when the map is being changed. How can I fix it?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<base href="http://www.noao.edu/image_gallery/images/" />
<style type="text/css">
body {background: black;text-align:center;}
table {border-collapse: collapse;margin: 20px 50px;}
td {border:1px white ridge;}
#t1 {display:inline;}
#t2 {display:none;}
img {width:100px;height:100px;}
</style>
<script type = "text/javascript">

var curr;

function show_n_tell(e, id)
{
var el = document.getElementById(id);
if (el)
{
var state = (el.style.display == 'inline');
el.style.display = state ? 'none' : 'inline';
if (el.style.display=='none') { el.parentNode.style.borderColor=''}else{ el.parentNode.style.borderColor='red'};

}
e = e || window.event; //event object
curr = e.target || e.srcElement; //img object
if (curr.style.display=='none') { curr.parentNode.style.borderColor='';target.parentNode.style.borderColor=''}else{ curr.parentNode.style.borderColor='red';target.parentNode.style.borderColor='red'};

}

function pic_out(e)
{
e = e || window.event;
target = e.target || e.srcElement;
curr.src = target.src; //transfer
if (curr.style.display=='none') { curr.parentNode.style.borderColor='';target.parentNode.style.borderColor=''}else{ curr.parentNode.style.borderColor='red';target.parentNode.style.borderColor='red'};


}

</script>
</head>
<body>
<table id="t1" onclick="show_n_tell(event, 't2')">
<thead>
</thead>
<tbody>
<tr>
<td><img src="hnla.gif" /></td>
<td><img src="d6/m27mmb.jpg" /></td>
<td><img src="gkperca2.gif" /></td>
</tr>
<tr>
<td><img src="d2/ngc2237_200.jpg" /></td>
<td><img src="gkpera2.gif" /></td>
<td><img src="d3/ic1396-200.jpg" /></td>
</tr><tr>
<td><img src="d3/abell39c.jpg" /></td>
<td><img src="d4/m43b.jpg" /></td>
<td><img src="d3/04535b.jpg" /></td>
</tr>
</tbody>
</table>

<table id="t2" onclick="pic_out(event)">
<thead>
</thead>
<tbody>
<tr>
<td><img src="crl2688a2.gif" /></td>
<td><img src="d6/m76b.jpg" /></td>
<td><img src="d3/03127b.jpg" /></td>
</tr>
<tr>
<td><img src="d6/m21a20b.jpg" /></td>
<td><img src="d4/crab1b.jpg" /></td>
<td><img src="hnla.gif" /></td>
</tr><tr>
<td><img src="d2/02172b.jpg" /></td>
<td><img src="d2/hh666_200.jpg" /></td>
<td><img src="d2/b163-200.jpg" /></td>
</tr>
</tbody>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum