Improve company productivity with a Business Account.Sign Up

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

Return of Javascript Write text

Good morning Expert.

Working with script in code section alpha below. For each mouseover
I was writing a function and had 30 odd functions. (In code sectio alpha
I show three.)

Trying to figure out how to wqrite one function to operate all mouseovers.
Trying to write the DIV ids and texts as multiple arguments of one function,
oer code section Bravo but am getting 'undefined'. When I run the code
with just the first ID and text it works but when I add the second it breaks.
Have tried several different syntaxes for second variable pair wiht no success.

Thanks.

Allen


begin Code section Alpha ++++++++++++++++++++++++
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
function writeTextB(txt)
{
document.getElementById("descB").innerHTML=txt;
}
function writeTextC(txt)
{
document.getElementById("descC").innerHTML=txt;
}
</script>
</head>
<body>
<div><img src ="images/BABOK_e.gif" width ="780" height ="600" usemap="#RPM" /></div>
<map id ="RPM" name="RPM">
<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeTextB('Requirements Elicitation')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeTextC('Req_ments Analysis and Doc.')"/>
</map>
<div  id="desc" style="position: absolute; height: auto; width: auto; left: 280px; top: 170px; font-family: arial; "></div>
<div id="descB" style="position: absolute; height: auto; width: auto; left: 235px; top: 252px; font-family: arial; font-size: 12; "></div>
<div id="descC" style="position: absolute; height: auto; width: auto; left: 335px; top: 302px; font-family: arial; font-size: 12; "></div>
</map>
</body>
</html>
end Code section Apha +++++++++++++++

start Code section Bravo +++++++++++++++
<html>
<head>
<script type="text/javascript">

function writeText(txt, desc, txtB, descB)
{
document.getElementById("desc").innerHTML=txt;
document.getElementById("descB").innerHTML=txtB;
}

</script>
</head>
<body>
<div><img src ="images/BABOK_e.gif" width ="780" height ="600" usemap="#RPM" /></div>
<map id ="RPM" name="RPM">
<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeTextB('Requirements Elicitation')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeTextC('Req_ments Analysis and Doc.')"/>
<area shape ="rect" coords ="441,322,622,362" onMouseOver="writeTextD('Solution Assess. & Eval.')"/>

</map>
<div  id="desc" style="position: absolute; height: auto; width: auto; left: 280px; top: 170px; font-family: arial; "></div>
<div id="descB" style="position: absolute; height: auto; width: auto; left: 235px; top: 252px; font-family: arial; font-size: 12; "></div>
<div id="descC" style="position: absolute; height: auto; width: auto; left: 335px; top: 302px; font-family: arial; font-size: 12; "></div>
<div><img src ="images/requirements_types.gif" width ="600" height ="500" usemap="#RT" /></div>
</body>
</html>

end Coe section Bravo




BABOK-e.gif
0
Allen Pitts
Asked:
Allen Pitts
  • 5
  • 4
1 Solution
 
TimCotteeHead of Software ServicesCommented:
Hello 9apit,

What you need is to keep it very simple:

<script type="text/javascript">
function writeText(what,where) {
  document.getElementById(where).innerHTML = what;
}
</script>


















Regards,

TimCottee
0
 
Allen PittsBusiness analystAuthor Commented:
I understand the concept you profer If one uses the same ID and txt for all the map spots then the same
txt gets written to the same spot over and over. How does one differentiate the the differeent pairs from each other?
0
 
TimCotteeHead of Software ServicesCommented:
9apit,

This doesn't write to the same spot though, the second parameter is the destination element so it writes specific text to different destination elements dependent on which area you are over.

TimCottee
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Allen PittsBusiness analystAuthor Commented:
Still don't understand. In the sentence "This doesn't write to the same spot though, the " to what does 'This' refer? More to the point how should
<script type="text/javascript">
function writeText(txt, desc, txtB, descB)
{
document.getElementById("desc").innerHTML=txt;
document.getElementById("descB").innerHTML=txtB;
}
</script>
be written?

Thanks.
0
 
TimCotteeHead of Software ServicesCommented:
9apit,

<script type="text/javascript">
function writeText(what,where) {
  document.getElementById(where).innerHTML = what;
}
</script>

This function writeText takes two parameters:
what = The text that will be written when it is called e.g., "Requirements Planning and Management"
where = The ID of the element where this text will be written e.g., "desc"

That is all there is to it, for each mouseover handler you assign what & where appropriately. You don't need any more parameters, or anything else complicated.

onMouseOver="writeText('Requirements Planning and Management','desc');"

will place the text "Requirements Planning and Management" in the element "desc"

Change any/both of these for your mouseovers and you will have different results for each one.

TimCottee
0
 
Allen PittsBusiness analystAuthor Commented:
Hello Tim,
You apparently understand this very well. Perhaps you can either cannot remember what is was like or imagfe what is like to not have the knoweledge and what brought you to the knowledge.

If one has two parameters and use them to identify what goes where in the first ins=tance how does one differentiate between what goes in the first instance, and whre the first instance goes and what goes in the second instance and where the second instance goes?

Thanks
0
 
TimCotteeHead of Software ServicesCommented:
Taking the html I posted above:

<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management','desc')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeText('Requirements Elicitation','descB')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeText('Req_ments Analysis and Doc.','descC')"/>
<area shape ="rect" coords ="441,322,622,362" onMouseOver="writeText('Solution Assess. & Eval.','descD')"/>


This shows your four areas in the imagemap. Each one has different values for the parameters passed into the writeText function, the first being the "what" and the second being the "where". You can see that the target element (the "where") is different for each area, therefore the function will be called for each mouse-over event but will be writing the message to different elements based on that second parameter.
0
 
Allen PittsBusiness analystAuthor Commented:
Good afternoon Mr. Cottee,
Thanks for being patient.
I finally got it. It looks like before the writeText function had only one argument. The way you rewrote
it has two arguments. I also had to refresh my understanding of GetElelmentbyID and innerHTML
but the light bulb finally came on. I think the mouseover allows manipulatuion of the identified element and then uses innerHTML to  change the attribute to the text called What.
Very clever.
Thanks again.

Allen
0
 
TimCotteeHead of Software ServicesCommented:
Allen, you are welcome. It is always difficult to judge just how to pitch a response but I usually get there in the end!
0
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.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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