Setting Focus to a position in a graphic

knightowl · Mar 9, 2005

I have a image that has a number of mouseovers defined as areas within
the graphic. The graphic is a large map which scrolls even on a full
screen.

Here is what I am trying to do.

In a field when someone types a location, I would like to have the
javascipt set focus to that location in the graphic. Like jump to a
link, except that it is a jump to a x/y coord in a graphic.

Thanks in advance for any assistance.

TK

Erwin Moller · Mar 9, 2005

knightowl said:
I have a image that has a number of mouseovers defined as areas within
the graphic. The graphic is a large map which scrolls even on a full
screen.

Here is what I am trying to do.

In a field when someone types a location, I would like to have the
javascipt set focus to that location in the graphic. Like jump to a
link, except that it is a jump to a x/y coord in a graphic.

Thanks in advance for any assistance.

TK

Hi,

I don't think that is normal use for focus().
But maybe it works. Maybe not.
Try it, but I wouldn't advise it.
Be sure to test it on a few popular browsers before shipping.

2 other things you could try to get the wanted behaviour:
1) Try to manipulate the scrollbars, at least that is what they are made
for, and JS can scroll them.

2) Try to use anchortags, and jump to them.
That is: name your <a name="pos12"></a>
or when you use an imagemap: name them in there.

Still a lot of coding (mapping) to do for you to make it work.

just my 2 cents.

Regards,
Erwin Moller

knightowl · Mar 9, 2005

2 other things you could try to get the wanted behaviour:

1) Try to manipulate the scrollbars, at least that is what they are made
for, and JS can scroll them.

I am not sure if I will know the context of the scolling that will be
needed, perhaps hit or miss given the differences in browsers, and how
they render.

2) Try to use anchortags, and jump to them.
That is: name your <a name="pos12"></a>
or when you use an imagemap: name them in there.

This seems very reasonable. I will have a java script generate all the
needed code from a database, so the number of entries doesn't matter to
me. Here is a code snippit I developed, but doesn't seem to do the
job.

<BODY ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2" src="overlib.js"></script>
<body>
<a href=#test>Jump to test</a>
<a href=#bad>Bad</a>
<IMG height=535 alt="" hspace=0 src="LocationsMap.jpg" width=500
useMap=#Map border=0>
<MAP name=Map>

<A name="bad">
<AREA onmouseover="overlib('Test Location',
CAPTION,'<center>another test line</center>')" onmouseout="nd();
return true;" shape=CIRCLE coords=94,258,13
href="/index.asp?ageID=9&LocationID=2">
</A>

</MAP>
<br>
<a name="test"> this si a test </a>

-----------------------------
In the above code I can hit the test anchor, however when I hit the
image anchor, it doesn't move to the right place. It moves all the way
to the right. Was this what you had in mind? and am I doing it
correctly.

Thanks

Erwin Moller · Mar 9, 2005

Hi,

Unfortunately I do not have the time to do it with an imagemap, but here
follows an example in plain HTML. (under)

I am not sure if I will know the context of the scolling that will be
needed, perhaps hit or miss given the differences in browsers, and how
they render.

This seems very reasonable. I will have a java script generate all the
needed code from a database, so the number of entries doesn't matter to
me. Here is a code snippit I developed, but doesn't seem to do the
job.

<BODY ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2" src="overlib.js"></script>
<body>
<a href=#test>Jump to test</a>
<a href=#bad>Bad</a>
<IMG height=535 alt="" hspace=0 src="LocationsMap.jpg" width=500
useMap=#Map border=0>
<MAP name=Map>

<A name="bad">
<AREA onmouseover="overlib('Test Location',
CAPTION,'<center>another test line</center>')" onmouseout="nd();
return true;" shape=CIRCLE coords=94,258,13
href="/index.asp?ageID=9&LocationID=2">
</A>

</MAP>

I think your map is defined wrong.

Check this site for examples:
http://www.december.com/html/demo/imagemap.html

<br>
<a name="test"> this si a test </a>

-----------------------------
In the above code I can hit the test anchor, however when I hit the
image anchor, it doesn't move to the right place. It moves all the way
to the right. Was this what you had in mind? and am I doing it
correctly.

Thanks

Works on Mozilla.
I think you can do the same with anchortags on an imagemap.

<html>
<body>
<table bgcolor="#CCFFCC" width=2000>
<tr>
<td align=left>
<a name="left">Left</a>
</td>
<td align=center>
<a name="center">center</a>
</td>
<td align=right>
<a name="right">right</a>
</td>
</tr>
</table>

<ul>
<li> Jump to <a href="#left">left</a>
<li> Jump to <a href="#center">center</a>
<li> Jump to <a href="#right">right</a>
</ul>

</body>
</html>

Good luck,

Regards,
Erwin Moller

Iam having trouble adding a level editor to my platformer	0	Nov 4, 2025
Mapping My Path in Java Web Development: Crafting a Detailed Roadmap	0	Mar 9, 2024
Getting a button's position	14	Apr 16, 2009
How to properly insert a landing page within same container beneath an image element?	1	Oct 6, 2024
Assistance with adding a second player to my Pygame :(	0	Oct 8, 2020
Implementing a Q-Learning Algorithm with Logistic Regression Normalization in C++	0	Jun 4, 2025
Where is my focus?	3	Aug 3, 2009
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021

Setting Focus to a position in a graphic

knightowl

Erwin Moller

knightowl

Erwin Moller

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads