Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

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
0
yunkaa
Asked:
yunkaa
  • 4
  • 2
2 Solutions
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now