Newbie Question: funcion containing this.id not reading

J

Jeremy

Perhaps someone can help me... This is actually the source of an asp
page but contains all the info for this particular function. I am
trying to allow someone to click a photo and allow a pseudo-window (to
avoid pop-up blocking) using css and table. When I try to call the id
in the function, it comes up undefined. Anyone know why??

Thanks in advance!

Jeremy

PS: The code -

<head>
<script language="JavaScript">
<!--

function Pic_Do() {
win.className='winShow'
}
function Pic_Get() {
var ident=0;
var src = new Array();
var ident = this.id;
src[0] ='../images/photos/7.jpg'
src[1] ='../images/photos/8.jpg'
src[2] ='../images/photos/9.jpg'
src[3] ='../images/photos/10.jpg'
src[4] ='../images/photos/11.jpg'
src[5] ='../images/photos/12.jpg'
src[6] ='../images/photos/13.jpg'
src[7] ='../images/photos/14.jpg'
src[8] ='../images/photos/15.jpg'
src[9] ='../images/photos/16.jpg'

document.images.SelPic.src = src[ident];
}
//-->
</script>
<style type="text/css">
<!--
..pics {
position: absolute;
left: 130px;
top: 115px;
font-size: small;
}
..WinHide {
visibility: hidden;
}
..WinShow {
background-color: #000033;
position: absolute;
visibility: visible;
height: 300px;
width: 500px;
left: 100px;
top: 120px;
}
-->
</style>
</head>
<BODY>



<FORM id="pic" name="picform" class="pics">
<table>
<tr>
<td id=0 onClick="Pic_Do(), Pic_Get()"><img src
='../images/photos/7.jpg' width='100' height='100'> &nbsp;<br>
</td>
<td id=1 onClick="Pic_Do(), Pic_Get()"><img src
='../images/photos/8.jpg' width='100' height='100'> &nbsp;<br>
</td>
<td id=2 onClick="Pic_Do(), Pic_Get()"><img src
='../images/photos/9.jpg' width='100' height='100'> &nbsp;<br>
</td>
<td id=3 onClick="Pic_Do(), Pic_Get()"><img src
='../images/photos/10.jpg' width='100' height='100'> &nbsp;<br>
</td>
</tr>
</table>
</FORM>

<form id="win" name="winForm" class="WinHide">

<img name="SelPic">
<input type="Button" OnClick="win.className='winHide'"
value="Close Window">
</form>
</BODY>
</HTML>
 
G

Grant Wagner

Jeremy said:
Perhaps someone can help me... This is actually the source of an asp
page but contains all the info for this particular function. I am
trying to allow someone to click a photo and allow a pseudo-window (to
avoid pop-up blocking) using css and table. When I try to call the id
in the function, it comes up undefined. Anyone know why??

Thanks in advance!

Jeremy

PS: The code -

<head>
<script language="JavaScript">


Not required. Omit.
function Pic_Do() {
win.className='winShow'

IE is one of the few browsers that will recognize "win" as a global
reference to your form. Use document.forms['winForm'].className ...
}
function Pic_Get() {
var ident=0;
var src = new Array();
var ident = this.id;

In the context of this function, "this" is the function itself, not the
table cell which triggered the event.

Try:

function Pic_Get(cell) {
var ident = cell.id;

src[0] ='../images/photos/7.jpg'
src[1] ='../images/photos/8.jpg'
src[2] ='../images/photos/9.jpg'
src[3] ='../images/photos/10.jpg'
src[4] ='../images/photos/11.jpg'
src[5] ='../images/photos/12.jpg'
src[6] ='../images/photos/13.jpg'
src[7] ='../images/photos/14.jpg'
src[8] ='../images/photos/15.jpg'
src[9] ='../images/photos/16.jpg'

Why not define this once outside of your function, rather then everytime
it is called?
document.images.SelPic.src = src[ident];

document.images['SelPic'].src is easier to read, and it's obvious you
aren't attempting to use a variable named SelPic.

Not required. Omit.
</script>
<style type="text/css">
<!--
.pics {
position: absolute;
left: 130px;
top: 115px;
font-size: small;
}
.WinHide {
visibility: hidden;
}
.WinShow {
background-color: #000033;
position: absolute;
visibility: visible;
height: 300px;
width: 500px;
left: 100px;
top: 120px;
}
-->
</style>
</head>
<BODY>

<FORM id="pic" name="picform" class="pics">
<table>
<tr>
<td id=0 onClick="Pic_Do(), Pic_Get()"><img src

onclick="Pic_Do();Pic_Get(this);"

Note, a semi-colon separates Javascript statements, not a comma.
Note, Pic_Get() now receives a reference to the table cell that triggered
the event, which means the ID can not be retrieved (as shown in the code
earlier).

Repeat for other table cells.
</tr>
</table>
</FORM>

<form id="win" name="winForm" class="WinHide">

<img name="SelPic">
<input type="Button" OnClick="win.className='winHide'"
onclick="this.form.className='winHide';"

value="Close Window">
</form>
</BODY>
</HTML>

Untested.

--
Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref
* Tips for upgrading Javascript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

comp.lang.javascript FAQ - http://jibbering.com/faq
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top