HTML question

brikis98

Diamond Member
Jul 5, 2005
7,253
8
0
I have a servlet that generates a webpage with the following structure:

Text
Text with hyperlink

Very big, dynamically generated image of varying size

Lots of Text
Text
Text
...

The bottom of the image contains some important info. My goal is to be able to click the hyperlink at the top of the page that will scroll to the bottom of my image. The problem is if the link for the anchor is on the image itself, it always goes to the top of the image. On the other hand, if I put the link right below the image, it scrolls the page below the image and there's enough text under it so you can't see it at all.

Is there any way to add an anchor tag that will scroll to bottom of the image, so that the bottom ~100 pixels of it are visible?
 

Aikouka

Lifer
Nov 27, 2001
30,383
912
126
I can't remember if you're allowed to place text beside an image with HTML, but you can always create a table and put the text where you want it (i.e. 100 pixels off from the bottom and set an <a> tag right there)
 

cubby1223

Lifer
May 24, 2004
13,518
42
86
Javascript. Immediately after the image give the next element some id attribute. Put the attached code in the head

Now make the href link be something like:
JavaScript:scrollTo(0,getAbsolutePosition(document.getElementById('IDNAME')).getY - 100);
 

brikis98

Diamond Member
Jul 5, 2005
7,253
8
0
wow, some good solutions here - i really appreciate it.

to minimize the javascript in the page, i actually ended up using a table with two columns. the right column has a single cell containing the image. the left column has two empty cells, both of width 0 (so they are invisible). the top of these cells has height img_height - 200, and the bottom one had height 200. i made the link go to the bottom of these cells, which scrolls the page to 200 pixels from the bottom of the image.

thanks again!