two hrefs and function call

[Gagan Diesh]

all I want to do is add the ability for an image to take the user
further down a page (href="#bottom").

Anyone tell me how to do this?

==the code below works perfectly===

My code on an image:

<a
onclick="SwapImage('no1','','/images/1.gif','no2','','../../../images/common/2-up.gif',1);return
showPic(this);" href="/images/sample2.gif" title="Logo"><img
src="../../../images/common/2.gif" name="no2" width="27" height="33"
id="no2" /></a>

and the accompanying javscript:
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

 

[RobG]

all I want to do is add the ability for an image to take the user
further down a page (href="#bottom").

Read up on the <a> element:

Anyone tell me how to do this?

Replace your current href with one that points to the anchor
further down the page.

==the code below works perfectly===

My code on an image:

<a
onclick="SwapImage('no1','','/images/1.gif','no2','','../../../images/common/2-up.gif',1);return
showPic(this);" href="/images/sample2.gif" title="Logo"><img

... href="#bottom" ...

And then at the 'bottom' (somewhere further down your page):

<a name="bottom">Here is the bottom of the page</a>

[...]

 

[RobG]

all I want to do is add the ability for an image to take the user
further down a page (href="#bottom").

Would you like it that when a user clicks on the image, a new
picture is displayed in the current page inside the
'placeholder' element?. And because the new image may be bigger
than the window size, you'd like to scroll to the bottom of the
image?

And if JS is not available, or the user's browser doesn't
support your script, navigate to the image anyway?

Anyone tell me how to do this?

Put an anchor below your image, then as the last line of your
onclick, change document.location to the anchor which can be
added thusly:

...
<img id="placeholder" src="" alt="">
<a name="bottom">Bottom of the image</a>
...

My code on an image:

<a
onclick="SwapImage('no1','','/images/1.gif','no2','','../../../images/common/2-up.gif',1);return
showPic(this);" href="/images/sample2.gif" title="Logo">

<a href="/images/sample2.gif"
title="Logo"
onclick="
SwapImage('no1','','/images/1.gif','no2','',
'../../../images/common/2-up.gif',1);
var x = showPic(this);
document.location = '#bottom';
return x;
"><img ...

Note that the 'return' is moved to after the document location
change.

<img
src="../../../images/common/2.gif" name="no2" width="27" height="33"
id="no2" /></a>

and the accompanying javscript:
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;

why not forget getElementById at this step (move it down a bit)
and use the images collection:

document.images['placeholder'].src = whichpic.href;

if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}

and do your getElementById thing here:

if (document.getElementById) {
var d = document.getElementById('desc').childNodes[0];
if (whichpic.title) {
d.nodeValue = whichpic.title;
} else {
d.nodeValue = whichpic.childNodes[0].nodeValue;
}

or more concisely:

if (document.getElementById) {
var d = document.getElementById('desc').childNodes[0];
d.nodeValue = whichpic.title ||
whichpic.childNodes[0].nodeValue;
}

It's easier on the eye, also the images collection is likely
more widely supported (just?) than getElementById, so if it
fails, at least there's still chance the image will display (but
without a title).

Choose whatever suits best.

return false;
} else {
return true;
}
}

There is no need for the 'else', if the script gets this far,
just return true unconditionally.

return false;
}
return true;

}

Full code (tested in IE and Firefox):

<a href="1.gif"
title="Logo"
onclick="
SwapImage('no1','','/images/1.gif','no2','',
'../../../images/common/2-up.gif',1);
var x = showPic(this);
document.location='#bottom';
return x;
"><img src="1.gif"
name="no2" width="27" height="33"
id="no2"></a>
<input type="button" onclick="alert(document.images['no2']);"
value="click">
<script type="text/javascript">
function SwapImage(){
// just a dummy
}

function showPic (whichpic) {
document.images['placeholder'].src = whichpic.href;
if (document.getElementById) {
var d = document.getElementById('desc').childNodes[0];
d.nodeValue = whichpic.title ||
whichpic.childNodes[0].nodeValue;
return false;
}
return true;
}
</script>
<div style="height: 2000px">&nbsp;</div>
<img id="placeholder" name="placeholder" src="" alt="">

<!-- Must put something in 'desc' or script may fail in some
browsers 'cos childNodes[0] may not be created otherwise -->

<p id='desc'>&nbsp;</p>
<a name="bottom"></a>

 

[RobG]

RobG wrote:
[...]

<a href="/images/sample2.gif"
title="Logo"
onclick="
SwapImage('no1','','/images/1.gif','no2','',
'../../../images/common/2-up.gif',1);
var x = showPic(this);
document.location = '#bottom';
return x;
"><img ...

Note that the 'return' is moved to after the document location
change.

I had a think about this. The script should not return
anything, if JavaScript is not enabled, then the user will see
the image. If it is enabled, then the modified script below
will pretty much guarantee that they will see the new image

If the images collection is not supported, they will not see it
but how many browsers with JavaScript do not support the images
collection?

You are only dependent on getElementById for the caption, so
missing out on that is trivial. So just return false always and
be done with it:

...
showPic(this);
document.location = '#bottom';
return false;
"><img ...

And don't bother returning anything from the script:

[...]

function showPic (whichpic) {
document.images['placeholder'].src = whichpic.href;
if (document.getElementById) {
var d = document.getElementById('desc').childNodes[0];
d.nodeValue = whichpic.title ||
whichpic.childNodes[0].nodeValue;
return false;

delete the return here.

}
return true;

and here.

}
</script>

[...]

You may wish to add some of the dynWrite functionality to assist
with support for non-getElementById browsers, but how many
don't support getElementById but do support the childNodes
collection?

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>

 

[Gagan Diesh]

hi Rob:

thanks very much for your response--

Works really well on firefox, IE on Mac and PC.

The problem I am having is on Safari on a Mac.

am trying this with two image buttons, doing swaps and functions as
noted above.

1) Works fine for the first click.
2) When next button is pressed, the entirepage refreshes, and then
jupms down to the anchor tag (clumsy but I could deal with that)
3) When the first button is clicked AGAIN, things really break down!
Image swaps correctly for a moment sometimes, but then page refreshes
and a broken link shows up for the image that was supposed to be swaped
(Showpic image)

I am trying this online but is for a protected site. I am happy to mail
you the link if you want to take a look. you can email me at
gdiesh[a]gmail.com