Super imposing text on multiple predefined areas on a graphic

N

nanoman

Hi,

I am a newbie so please excuse my ignorance. I use Frontpage and would like
to accomplish the following:

Objective 1

I would like to superimpose text on a section (defined area) of a graphic
(jpeg).

I have a diagram and would like to superimpose text
when the use "mouses" over a component / feature.

I do not what to swap the graphic (because of size and connection speed).

So, the graphic has four to six different features and
I would like to have the appropriate two lines of text
appear when the user mouses over the feature.

ASIDE: Is it possible to offset the "text" box from
the mouse over position (indepentently link
absolute position of text box and absolute position
of mouse position (or defined "circle area").

Possible Altenative: Is it possible to have a "transparent"
background Hover
Box the display the text. If I select "white" is
mask the section
of the image.

Objective 2

To change the cursor at defined areas within a graphic
versus globally changing the cursor whenever inside
the graphic boundary

Phase 1: change the cursor to crosshairs
Phase 2: change the cursor to a defined graphic

I tried defining an area to modify the below code but
it didn't work.

<img src="images/itsme.jpg" style="cursor:crosshair">


Any ideas or help would be appreciated.

Thanks.
 
N

nanoman

Here is the solution I used.

<html>
<head>
<script type="text/javascript">
function writeText(txt) { document.getElementById("caption").innerHTML=txt }
}
</script>
</head>


<img border="0" src="quiz%2064.jpg" usemap="#FPMap0" width="623" height="325">

<map name="FPMap0">


<! text for area 1>
<area shape ="rect" coords ="517, 216, 553, 272"
onMouseOver="writeText(
'<b> Resistor R5 Information: </b> <br>' +
'&#160 &#160 Voltage Drop = -3 Vdc <br>' +
' &#160 &#160 Current = -1 mA')"
onmouseout="writeText('')"
/>
<!href =# />

<! text for area 2>
<area shape ="rect" coords ="516, 122, 559, 180"
onMouseOver="writeText(
'<b> Resistor R4 Information: </b> <br>' +
'&#160 &#160 Voltage Drop = -6 Vdc <br>' +
' &#160 &160 Current = -1 mA')"
onmouseout="writeText('')"
/>
<! href =# />

</map>


<p style="position:absolute; left:585px; top:120px;
< color=#0000FF;" id="caption" style="font-weight: bold;" </p>

</body>
</html>
 
R

Ronx

This actually works (typos corrected), and displays a hand curser when
over the hotspots:

<html>
<head>
<script type="text/javascript">
function writeText(txt) {
document.getElementById("caption").innerHTML=txt }
</script>
</head>

<body>
<img border="0" src="quiz%2064.jpg" usemap="#FPMap0" width="623"
height="325">

<map name="FPMap0">
<!-- text for area 1 -->
<area shape ="rect" coords ="517, 216, 553, 272" href="#"
onMouseOver="writeText(
'<b> Resistor R5 Information: </b> <br>' +
'    Voltage Drop = -3 Vdc <br>' +
'     Current = -1 mA')"
onmouseout="writeText('')"
<!-- text for area 2 -->
<area shape ="rect" coords ="516, 122, 559, 180" href="#"
onMouseOver="writeText(
'<b> Resistor R4 Information: </b> <br>' +
'    Voltage Drop = -6 Vdc <br>' +
'     Current = -1 mA')"
onmouseout="writeText('')"</map>


<p style="position:absolute; left:585px; top:120px; color:#0000FF;
font-weight: bold;" id="caption"> </p>

</body>
</html>
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
N

nanoman

Did you correct typos or correct mistakes (probably the latter).

I would like to know for my edification.

I am thinking that the "mistakes" are:

You moved the href location. I thought I elimiated it
The href " ! href=# />" was there, hopefully as a comment only, to remind
me to comment out or eliminate this statement as it causes my browser
(security software) to "pop up" a link security statement during the
mouseover. "commenting out" the href, eliminated this distraction.

Changed the " />" at line below "onmouseout" to just ">"

"<" in front of the color statement appears to be an error (the color change
worked in MS IE but not in FireFox).

The reason for the multiple "text" lines is to help me in inserting the
text. Using the character coding (e.g. ) is because I didn't know another
way, plus it allows for special characters such as the omega symbol for
resistance.

Nan
 
R

Ronx

I assumed all the errors were typos.
An HTML comment is <!-- comment -->, not <! Comment>

/> is only used when using XHTML pages with an appropriate !doctype.
Your snippet had no !doctype.

Replacing the href="#" in the area tag enabled the hand curser to show
on mouseover. I would get extremely annoyed at a "security" program
that nagged about hovering over links, and would change it. You can't
be a web designer if security like that gets in the way.

In the javascript, }} was changed to } since IE and FireFox complained
about too many }s

Finally, the non-breaking space is either &nbsp; or   Note the
semi-colons.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
T

Trevor Lawrence

Ronx said:
I assumed all the errors were typos.
Click to expand...

nanoman,

I am interested in image maps, so thanks to Ron for this

Just to add to the discussion.
1. Is it better to use
href="#" - a reference to the current page
OR
href = "javascript:;" - a reference to null javascript ?
(Question to Ron, really. I wonder whether different browsers react
differently.)

2. Would &nbsp; be better then   ?
(At least the initials remind one that it is Non-Breaking SPace

BTW, Here is a good reference to special characters
http://www.lookuptables.com/ (although I can't find omega in this list)

3. Would this alternative function be useful ?
function writeText(txt)
{document.getElementById("caption").innerHTML = (txt) ? txt : '' } /*
N.B. the '' before } is two single quotes */
This would mean less confusion about how to write the blank parameter - it
works with none

E.G.
<area shape ="rect" coords ="517, 216, 553, 272"
href="javascript:;"
onMouseOver="writeText(
'<b>Resistor R5 Information:</b><br>' +
'&nbsp;&nbsp; Voltage Drop = -3 Vdc<br>' +
'&nbsp;&nbsp; Current = -1 mA')"
onmouseout="writeText()">
 
N

nanoman

Trevor,

1. In this application, I believe it's better to use href = "javascript:;"
in place of href=#" because if I use href="#" CA webinspector pop-up appears
during mouse over. I just "comment" out <!-- href="#" --> I don't get the
pop-up. This works with IE and Firefox.

2. The omega symbol is Ω Reference:
http://www.w3schools.com/tags/ref_symbols.asp

Currently the "hand" cursor appears during mouse over and I am looking to
change that to a image (ie a meter movement).

The code as it stands today is (it seems to work properly in both IE and
Firefox):
I am sure there are many improvements that can be made, but it's a start.

<html>
<head>
<script type="text/javascript">
function writeText(txt) { document.getElementById("caption").innerHTML=txt }
</script>
</head>


<p align="center" style="margin-top: 0; margin-bottom: 0">

<b>This is Quiz 4, problem 1 <br> <br>


Mouse over a component or a node to see voltage
and current. </b></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">



<b>Compare to your analysis. When done, click on "See Solution"</b></p>
<p> </p>
<p align="center">


<img border="0" src="quiz%2064.jpg" usemap="#FPMap0" width="623" height="325">

<map name="FPMap0">


<--! OnMouseOver has text appear on mouse over area -->
<--! OnMouseOut has the text disappear (blanked) when you leave the area -->

<area shape ="rect" coords ="517, 216, 553, 272"
onMouseOver="writeText(
'<b> Resistor R5 Information: </b> <br>' +
' Voltage Drop = -3 Vdc <br>' +
' Current = -1 mA')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="rect" coords ="516, 122, 559, 180"
onMouseOver="writeText(
'<b> Resistor R4 Information: </b> <br>' +
' Voltage Drop = -6 Vdc <br>' +
' Current = -1 mA')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="rect" coords ="127, 9, 186, 39"
onMouseOver="writeText(
'<b> Resistor R6 Information: </b> <br>' +
' Voltage drop = 0 Vdc <br>' +
' Current = 0 mA')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="rect" coords="126, 68, 186, 104"
onMouseOver="writeText(
'<b> Resistor R7 Information: </b> <br>' +
' Voltage drop = +13 Vdc <br>' +
' Current = +13 Vdc / 21 KΩ')"
onmouseout="writeText('')"<!-- href =# -->


<area shape ="rect" coords="123, 130, 187, 162"
onMouseOver="writeText(
'<b> Resistor R8 Information: </b> <br>' +
' Voltage drop = -13 Vdc <br>' +
' Current = -13 Vdc / 21KΩ')"
onmouseout="writeText('')"<!-- href =# -->



<area shape = "polygon" coords="519, 203, 332, 203, 332, 132, 350, 133, 351,
189, 521, 190"
onMouseOver="writeText(
'<b> Wire Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current ≈ 0 mA')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="rect" coords="314, 103, 375, 135"
onMouseOver="writeText(
'<b> Node V2 Information: </b> <br>' +
' Voltage = -3 Vdc = V3 <br>' +
' Current ≈ 0 mA')"
onmouseout="writeText('')"<!-- href =# -->


<area shape ="rect" coords="266, 63, 375, 95"
onMouseOver="writeText(
'<b> Node V3 Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current ≈ 0 mA ')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="rect" coords="432, 92, 573, 113"
onMouseOver="writeText(
'<b> Vout Information: </b> <br>' +
' Voltage = -9 Vdc <br>' +
' ')"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="circle" coords="258, 82, 8"
onMouseOver="writeText(
'<b> Node Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' ∑ I = 0, Kirchhoffs Current Law' )"
onmouseout="writeText('')"<!-- href =# -->

<area shape ="polygon" coords="187, 17, 265, 17, 263, 76, 252, 75, 251, 31,
188, 31"
onMouseOver="writeText(
'<b> Node Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current = 0 A' )"
onmouseout="writeText('')"<!-- href =# -->

<area shape="polygon" coords="252, 90, 251, 139, 188, 138, 189, 152, 268,
154, 266, 91"
onMouseOver="writeText(
'<b> Node Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current = -13 Vdc / 21 KΩ' )"
onmouseout="writeText('')"<!-- href =# -->


<area shape="rect" coords="189, 77, 242, 92"
onMouseOver="writeText(
'<b> Node Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current = +13 Vdc / 21 KΩ ' )"
onmouseout="writeText('')"<!--href =# -->

<area shape="circle" coords="534, 197, 12" href="#"
onMouseOver="writeText(
'<b> Node Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' ∑ I = 0, Kirchhoffs Current Law')"
onmouseout="writeText('')"
</p>

</map>

<p style="position:absolute; left:585px; top:120px; color:#0000FF;"
id="caption" style="font-weight:bold;" </p>



</body>
</html>
 
N

nanoman

My solution to changing the cursor:

This is how I changed the cursor (used one function for onMouseOver and a
different function for onmouseout):

The onMouseOver is a "crosshair"
and the onmouseout is "default" or "pointer".

Works in IE and Firefox.

Next step is to change the "crosshair" to an image of a voltmeter.

<script type="text/javascript">
function writeText(txt)
{document.getElementById("caption").innerHTML=txt;document.body.style.cursor="crosshair"; }

function writeTextOut(txt)
{document.getElementById("caption").innerHTML=txt;document.body.style.cursor="default"; }

....
.....

<map name="FPMap0">

<area shape ="rect" coords ="517, 216, 553, 272"
onMouseOver=
"writeText(
'<b> Resistor R4 Information: </b> <br>' +
' Voltage Drop = -6 Vdc <br>' +
' Current = -1 mA')"
onmouseout="writeTextOut('')"<!-- href =# -->
 
N

nanoman

Solutions to Objective 1 and 2:

For the graphic cursor, I used a program called ArtCursor to convert a gif
file to a ani file. If you just want to practice, there are plenty of "*.cur"
files on your Windows computer that can be used (just search on *.cur).

The cursor is changed by two functions; one for OnMouseOver and one for
OnMouseOut.


Here is the code:

<html>
<head>

</head>
<body>

<script type="text/javascript">
function writeText(txt)
{document.getElementById("caption").innerHTML=txt;document.body.style.cursor="voltmeter.ani"; }
function writeTextOut(txt)
{document.getElementById("caption").innerHTML=txt;document.body.style.cursor="default"; }
</script>


<p align="center" style="margin-top: 0; margin-bottom: 0">
<b>This is Quiz 4, problem 1 <br> <br>
Mouse over a component or a node to see voltage and current. </b> <br> <br>
<b>Compare to your analysis. When done, click on "See Solution"</b></p>
<p> </p>
<p align="center">


<img border="0" src="quiz%2064.jpg" usemap="#FPMap0">

<map name="FPMap0">

<area shape ="rect" coords ="127, 9, 186, 39"
onMouseOver="writeText(
'<b> Resistor R6 Information: </b> <br>' +
' Voltage drop = 0 Vdc <br>' +
' Current = 0 mA')"
onmouseout="writeTextOut('')"<!-- href =# -->

<area shape ="rect" coords="126, 68, 186, 104"
onMouseOver=
"writeText(
'<b> Resistor R7 Information: </b> <br>' +
' Voltage drop = +13 Vdc <br>' +
' Current = +13 Vdc / 21 KΩ')"
onmouseout="writeTextOut('')"<!-- href =# -->

<area shape ="rect" coords="123, 130, 187, 162"
onMouseOver="writeText(
'<b> Resistor R8 Information: </b> <br>' +
' Voltage drop = -13 Vdc <br>' +
' Current = -13 Vdc / 21KΩ')"
onmouseout="writeTextOut('')"<!-- href =# -->

<area shape = "polygon" coords="519, 203, 332, 203, 332, 132, 350, 133, 351,
189, 521, 190"
onMouseOver="writeText(
'<b> Wire Information: </b> <br>' +
' Voltage = -3 Vdc <br>' +
' Current &8776 0 mA')"
onmouseout="writeTextOut('')"<!-- href =# -->

</map>
</p>

<p style="position:absolute; left:585px; top:120px; color:#0000FF;"
id="caption" style="font-weight:bold;" cursor="cursor:help" ></p>

<p align="center" style="margin-top: 0; margin-bottom: 0">

</body>
</html>
 
T

Trevor Lawrence

nanoman said:
Solutions to Objective 1 and 2:

For the graphic cursor, I used a program called ArtCursor to convert a gif
file to a ani file. If you just want to practice, there are plenty of
"*.cur"
files on your Windows computer that can be used (just search on *.cur).

The cursor is changed by two functions; one for OnMouseOver and one for
OnMouseOut.


Here is the code:
Click to expand...
[snip]

Well, it looks like you have found the cursor you want

I was unaware that there any *cur files installed as part of the system. But
if they exist, then great. I must have a look and see what is already on my
PC.

But you used "voltmeter.ani", so I assume that the cursor won't work as is
(i.e. as a *.cur file) and that one therefore needs the program to convert
it.

Is ArtCursor a free program ?
 
N

nanoman

The cur files work without issue. You can use either the cur or the ani
files. Both seem to work well.

I initially used cur file since there are plenty on under c:/i386 (and some
are pretty cool). There also are a plethora of ani files there as well.

The artcursor program has a 30 day evaluation period. To buy its ~$40. I am
sure there are many such programs out there. I did not find any free programs.
here is the link: http://www.aha-soft.com/products.htm

I had a voltmeter gif image and I needed to convert it to a cur or ani file.
I selected the ani file.

The last item on this webpage is "scaling" it for various monitor / window
sizes.

Nano

Trevor Lawrence said:
nanoman said:
Solutions to Objective 1 and 2:

For the graphic cursor, I used a program called ArtCursor to convert a gif
file to a ani file. If you just want to practice, there are plenty of
"*.cur"
files on your Windows computer that can be used (just search on *.cur).

The cursor is changed by two functions; one for OnMouseOver and one for
OnMouseOut.


Here is the code:
Click to expand...
[snip]

Well, it looks like you have found the cursor you want

I was unaware that there any *cur files installed as part of the system. But
if they exist, then great. I must have a look and see what is already on my
PC.

But you used "voltmeter.ani", so I assume that the cursor won't work as is
(i.e. as a *.cur file) and that one therefore needs the program to convert
it.

Is ArtCursor a free program ?
Click to expand...
 
N

nanoman

Here is the webpage if you want to look at it:

http://mysite.verizon.net/nexus08/quiz4.htm

nano

nanoman said:
The cur files work without issue. You can use either the cur or the ani
files. Both seem to work well.

I initially used cur file since there are plenty on under c:/i386 (and some
are pretty cool). There also are a plethora of ani files there as well.

The artcursor program has a 30 day evaluation period. To buy its ~$40. I am
sure there are many such programs out there. I did not find any free programs.
here is the link: http://www.aha-soft.com/products.htm

I had a voltmeter gif image and I needed to convert it to a cur or ani file.
I selected the ani file.

The last item on this webpage is "scaling" it for various monitor / window
sizes.

Nano

Trevor Lawrence said:
nanoman said:
Solutions to Objective 1 and 2:

For the graphic cursor, I used a program called ArtCursor to convert a gif
file to a ani file. If you just want to practice, there are plenty of
"*.cur"
files on your Windows computer that can be used (just search on *.cur).

The cursor is changed by two functions; one for OnMouseOver and one for
OnMouseOut.


Here is the code:
Click to expand...
[snip]

Well, it looks like you have found the cursor you want

I was unaware that there any *cur files installed as part of the system. But
if they exist, then great. I must have a look and see what is already on my
PC.

But you used "voltmeter.ani", so I assume that the cursor won't work as is
(i.e. as a *.cur file) and that one therefore needs the program to convert
it.

Is ArtCursor a free program ?
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Placing text ON a graphic 4
Overlapping text on my website. 2
Top of image lopped off & border/space on right hand side of image between text? 1
format the oneline text box? 1
Overlaying text on a graphic. 3
Paste a Table on Top of a Graphic 1
Cahnge cell background on mouseover 3
a: hover tag and graphics 4

Top