add an onclick event

[WindAndWaves]

Hi Gurus

I have the following code:

function CI(ImgN, Alt){

if( document.getElementById && document.getElementById('il') ){

var d=document.getElementById('il');

if(document.createElement){

var i=document.createElement('img');

i.src="i/" + ImgN;

i.className='l';

i.alt=Alt;

while(d.firstChild!==null){

d.removeChild(d.firstChild);

}

d.appendChild(i);

return false;

}else if(d.innerHTML){

d.innerHTML='<img src="i/' + ImgN + '" class="l" alt="' + Alt + '"
ONCLICK="return XI()">';

return false;

}else {

return true;}

} else {

return true;}

}



I now want to add the onclick event to the img (so that the user can close
it), how do I do that, or can I simply add a bit of text at the bottom of
the image 'close image' (and how do I do that??)?



TIA



- Nicolaas

 

[Michael Winter]

I have the following code:

Could you please indent code when you post it. It's difficult to read,
otherwise. I have some comments for it, though.

The first such comment is that your return values are backwards. I assume
that you're returning false upon success because you want to cancel an
event. In my opinion, the function should concern only itself - if, at a
higher level, you need the opposite result, use the NOT logical operator
(!) once the function has returned.

function CI(ImgN, Alt){
if(document.getElementById && document.getElementById('il')) {
var d=document.getElementById('il');

This is rather inefficient. The first thing to do would be make a call to
gEBI reliable. At a simple level, that's:

if(!document.getElementById) {
document.getElementById = function() {return null;};
}

Emulation using document.all can be found in the FAQ notes[1], and in
posts from me in the past.

You could then change the first two lines to:

var d = document.getElementById('il');
if(d) {

if(document.createElement) {

if(document.createElement && d.appendChild && d.removeChild) {

var i=document.createElement('img');
i.src="i/" + ImgN;
i.className='l';
i.alt=Alt;

while(d.firstChild!==null){

A strict comparison isn't necessary, and could be harmful - if
d.firstChild is undefined, the contents of the loop will be executed. The
standard inequality operator (!=) will avoid that.

d.removeChild(d.firstChild);
}
d.appendChild(i);
return false;
} else if(d.innerHTML) {

This isn't a sufficient test. Even if d.innerHTML was a string

} else if('string' == typeof d.innerHTML) {

there's no guarantee that writing to it will have any effect. The FAQ
notes[1] show a proper test.

d.innerHTML='<img src="i/' + ImgN + '" class="l" alt="'
+ Alt + '" ONCLICK="return XI()">';
return false;
} else {
return true;
}
} else {
return true;
}
}

The final improvement would be to have the function alter itself to
execute only one path, once support has been proven. However, that's
probably excessive.

I now want to add the onclick event to the img (so that the user can
close it),

The innerHTML path seems to accomplish that. To accomplish the same for
the DOM path, add

i.onclick = function() {return XI();};

[snip]

Hope that helps,
Mike


[1] Notes: <URL:http://www.jibbering.com/faq/faq_notes/faq_notes.html>

 

[RobG]

Michael Winter wrote:
[...]

function CI(ImgN, Alt){

[...]

+ Alt + '" ONCLICK="return XI()">';

[...]

i.onclick = function() {return XI();};

If the intention is to add the CI() function to the replacement image,
should this line be:

i.onclick = function() {return CI();};

or is XI() defined somewhere else?

Cheers, Rob

 

[Michael Winter]

Michael Winter wrote:
[snip]

i.onclick = function() {return XI();};

If the intention is to add the CI() function to the replacement
image, should this line be:

i.onclick = function() {return CI();};

or is XI() defined somewhere else?

My interpretation was that CI was called by clicking something, and it
adds an image to the document. The OP also wants a way to remove that
image: XI. A way to call XI is provided through the innerHTML path, but
not the DOM path.

I could be wrong. We'll just have to wait and see.

Mike

 

[WindAndWaves]

Michael Winter wrote:
[snip]

i.onclick = function() {return XI();};

If the intention is to add the CI() function to the replacement
image, should this line be:

i.onclick = function() {return CI();};

or is XI() defined somewhere else?

My interpretation was that CI was called by clicking something, and it
adds an image to the document. The OP also wants a way to remove that
image: XI. A way to call XI is provided through the innerHTML path, but
not the DOM path.

I could be wrong. We'll just have to wait and see.

Mike

Thank you both your help. It is looking great so far.

 

[SimonFx]

Nic, would this have worked for you?

- SimonFx

===

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
if(!document.getElementById) {document.getElementById = document.all ?
function(i) {return document.all;} : function() {return null;};}

function clearDIV (myDiv){
var obj = document.getElementById(myDiv);
obj.innerHTML = '';
obj.style.display = 'none';
}

function blatIMG(myImage, myDiv){
var obj = document.getElementById(myDiv);
obj.innerHTML = '<IMG SRC="'+myImage+'">';
obj.style.display = '';
}

</SCRIPT>
</HEAD>
<BODY>

<a href="#" onClick="blatIMG('test01.jpg','myPic')">01</a>
<a href="#" onClick="blatIMG('test02.jpg','myPic')">02</a>
<a href="#" onClick="blatIMG('test03.jpg','myPic')">03</a>
<DIV ID="myPic" onClick="clearDIV('myPic')" STYLE="display:none"></DIV>
Blah
</BODY>
</HTML>

 

[SimonFx]

Ahem, maybe this would be better - works without Javascript.

===

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
if(!document.getElementById) {document.getElementById = document.all ?
function(i) {return document.all;} : function() {return null;};}

function clearDIV (myDiv){
var obj = document.getElementById(myDiv);
obj.innerHTML = '';
obj.style.display = 'none';
}

function blatIMG(myImage, myDiv){
var obj = document.getElementById(myDiv);
obj.innerHTML = '<IMG SRC="'+myImage+'">';
obj.style.display = '';
return false;
}

</SCRIPT>
</HEAD>
<BODY>

<a href="test01.jpg" onClick="return blatIMG('test01.jpg','myPic')">01</a>
<a href="test02.jpg" onClick="return blatIMG('test02.jpg','myPic')">02</a>
<a href="test03.jpg" onClick="return blatIMG('test03.jpg','myPic')">03</a>
<DIV ID="myPic" onClick="clearDIV('myPic')" STYLE="display:none"></DIV>
Blah
</BODY>
</HTML>

 

[Rob B]

Michael Winter wrote:

while(d.firstChild!==null){

A strict comparison isn't necessary, and could be harmful - if
d.firstChild is undefined, the contents of the loop will be executed.
The
standard inequality operator (!=) will avoid that.

d.removeChild(d.firstChild);
}

Wouldn't this:

while (d.hasChildNodes())
d.removeChild(d.lastChild);

....be more utilitarian?

 

[Michael Winter]

Are you misquoting me, or is it Developersdex?

Wouldn't this:

while (d.hasChildNodes())
d.removeChild(d.lastChild);

...be more utilitarian?

Yes, that would do, too.

I don't know why I didn't suggest that; I did it recently.

while(d.firstChild) {/* ... */}

would have been better than a comparison, too.

Mike

 

[Rob B]

Thanks. Don't think it was me, but you never know. New to these groups
(more au courant w/vBulletin) so struggling with the local customs.
Appreciate all your detailed responses.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Wed, 24 Nov 2004 01:45:16, seen in Rob B

Thanks. Don't think it was me, but you never know. New to these groups
(more au courant w/vBulletin) so struggling with the local customs.

Study the frequently-posted newsgroup FAQ - the appropriate part should
appear today - and relevant links therein, and your problems will reduce
to those of implementation via the peculiar "service" you use.

Install, if possible, properly-designed newsreader software, and
implementation will then present no difficulty.