Location on Image is Bookmark

Hello,

We have an image that has specific area that we would like pulled up to the top of the page when a user click a link.  Imagine a picture has 10 rows.  Clicking on link "A" brings row 6 to the top of the screen.  Clicking on link "B" brings row 3 to the top of the screen.  In essence, it's the same as a bookmark, but we are bookmarking regions of the image.  How would we write such a link on the image and in the link?

Many thanks,

Yunkaa
yunkaaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
>>  Imagine a picture has 10 rows.
How is the image divided into these rows? Tables, <br> tags, etc.
0
yunkaaAuthor Commented:
Hi,

George, thanks for replying!  It was just to give an idea.  It's a whole image, but link one might be the tabletop, link two the seat cushion.  Clicking on the link would pull the ientire mage to the top of the screen in line with the specific region.  If the table top is in the middle of the screen, then the whole image goes up, but it is the mid-image table top that would be reference and focus for the user.

Thanks,

Yun
0
BustaroomsCommented:
umm this maybe?

<html>
<a href="#one">go to one</a><br>
<a href="#two">go to two</a><br>
<a href="#three">go to three</a>
<br><br>
<img src="http://www.google.com/images/logo.gif" alt="no pic" width="500" height="2000">

<div style="position:absolute;left:0;top:30;width:500;height:1;background-color:red;""><a

name="one"></a></div>

<div style="position:absolute;left:0;top:500;width:500;height:1;background-color:red;"><a

name="two"></a></div>

<div

style="position:absolute;left:0;top:1500;width:500;height:1;background-color:red;""><a

name="three"></a></div>

</html>


the red lines are for illustration  you can remove the background-color:red part
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

seanpowellCommented:
That's not a bad solution - there's a coule errors in the code:

<html>
<head>
</head>
<body>
<a href="#one">go to one</a><br>
<a href="#two">go to two</a><br>
<a href="#three">go to three</a>
<br><br>
<img src="http://www.google.com/images/logo.gif" alt="no pic" width="500" height="2000">
<div style="position:absolute;left:0;top:30;width:500;height:1;background-color:red;"><a name="one"></a></div>
<div style="position:absolute;left:0;top:500;width:500;height:1;background-color:red;"><a name="two"></a></div>
<div style="position:absolute;left:0;top:1500;width:500;height:1;background-color:red;"><a name="three"></a></div>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
yunkaaAuthor Commented:
WOW... you guys ROCK!!!  Please can you tell us how we would write it if the link is in one frame and the picture in another?

Many thanks,

Yun
0
seanpowellCommented:
Sure. The following is an example:

The frameset is something like:
<html>
<head>
<title>Frame</title>
</head>
<frameset rows="*,*">
  <frame name="top" src="top.html">
  <frame name="bottom" src="bottom.html">
  <noframes>
  <body>
  <p>This page uses frames, but your browser doesn't support them.</p>
  </body>
  </noframes>
</frameset>
</html>


top.html
******

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<p><a href="bottom.html#one" target="bottom">go to one</a><br>
<a href="bottom.html#two" target="bottom">go to two</a><br>
<a href="bottom.html#three" target="bottom">go to three</a></p>
</body>
</html>

bottom.html
*********
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<img src="http://www.google.com/images/logo.gif" alt="no pic" width="500" height="2000">
<div style="position:absolute;left:0;top:30;width:500;height:1;background-color:red;"><a name="one"></a></div>
<div style="position:absolute;left:0;top:500;width:500;height:1;background-color:red;"><a name="two"></a></div>
<div style="position:absolute;left:0;top:1500;width:500;height:1;background-color:red;"><a name="three"></a></div>
</body>
</html>

The relevant info is:

1. "name" your bottom frame: <frame name="bottom" src="bottom.html">
2. The links must now be coded like: <a href="bottom.html#one" target="bottom">

Thanks,
GM
0
seanpowellCommented:
Thanks Yunkaa,
Glad we could help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.