Solved

Son of javascript text write

Posted on 2008-10-13
3
455 Views
Last Modified: 2011-10-19
Good afternoon Expert,

Please forgive the long code section but don't worry, it is listed to
ask a question of concept. The code works. But I now have nineteen
functions. Perhaps there is no way to use looping or arays or some opther
method of reducing the number of functions or perhaps there is. I remember
in VB class that looping or arrays were a way of reducing the number of subroutines.
Does that apply here? If so can you give me a basic idea of the syntax?

Also a brief and specific question. (Maybe I should make this a separate question. If
so let me know.) In the diagram marked Business Anaylsis Body of Knowledge there
is text that appears, 'Enterprise Anaysis'.that  Ioverlaps the box it is supposed to go in.
Is there some way of putting a line break (<br>) int the line
<area shape ="rect" coords ="65,241,140,338" onMouseOver="writeTextG('Enterprise Analysis')"/>

Thanks

Allen in Dallas



begin code section ++++++++++++++++

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

function writeTextD(txt)
{
document.getElementById("descD").innerHTML=txt;
}

function writeTextE(txt)
{
document.getElementById("descE").innerHTML=txt;
}

function writeTextF(txt)
{
document.getElementById("descF").innerHTML=txt;
}

function writeTextG(txt)
{
document.getElementById("descG").innerHTML=txt;
}

function writeTextH(txt)
{
document.getElementById("descH").innerHTML=txt;
}

function writeTextJ(txt)
{
document.getElementById("descJ").innerHTML=txt;
}

function writeTextK(txt)
{
document.getElementById("descK").innerHTML=txt;
}

function writeTextL(txt)
{
document.getElementById("descL").innerHTML=txt;
}

function writeTextM(txt)
{
document.getElementById("descM").innerHTML=txt;
}

function writeTextN(txt)
{
document.getElementById("descN").innerHTML=txt;
}

function writeTextP(txt)
{
document.getElementById("descP").innerHTML=txt;
}

function writeTextQ(txt)
{
document.getElementById("descQ").innerHTML=txt;
}

function writeTextR(txt)
{
document.getElementById("descR").innerHTML=txt;
}

function writeTextS(txt)
{
document.getElementById("descS").innerHTML=txt;
}

function writeTextT(txt)
{
document.getElementById("descT").innerHTML=txt;
}

function writeTextU(txt)
{
document.getElementById("descU").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.')"/>
<area shape ="rect" coords ="441,322,622,362" onMouseOver="writeTextD('Solution Assess. & Eval.')"/>
<area shape ="rect" coords ="235,412,700,440" onMouseOver="writeTextE('Requirements Communication')"/>
<area shape ="rect" coords ="176,411,641,441" onMouseOver="writeTextF('Requirements Communication')"/>
<area shape ="rect" coords ="65,241,140,338" onMouseOver="writeTextG('Enterprise Analysis')"/>
</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 id="descD" style="position: absolute; height: auto; width: auto; left: 470px; top: 352px; font-family: arial; font-size: 12; "></div>
<div id="descF" style="position: absolute; height: auto; width: auto; left: 330px; top: 435px; font-family: arial; "></div>
<div id="descG" style="position: absolute; height: auto; width: auto; left: 70px; top: 305px; font-family: arial; font-size: 12;"></div>

<div><img src ="images/requirements_types.gif" width ="600" height ="500" usemap="#RT" /></div>
<map id ="RT" name="RT">
<area shape ="rect" coords ="40,67,193,110" onMouseOver="writeTextH('Business Requirements')"/>
<area shape ="rect" coords ="40,132,193,174" onMouseOver="writeTextJ('User Requirements')"/>
<area shape ="rect" coords ="40,190,193,231" onMouseOver="writeTextK('Functional Requirements')"/>
<area shape ="rect" coords ="40,254,193,294" onMouseOver="writeTextL('Qual of Serv Requirements')"/>
<area shape ="rect" coords ="40,313,193,354" onMouseOver="writeTextM('Assumpt_ns & Constraints')"/>
<area shape ="rect" coords ="40,380,193,421" onMouseOver="writeTextN('Implement_n Req_ments')"/>

<area shape ="rect" coords ="214,67,560,110" onMouseOver="writeTextP('High level goals. Business purpose & metrics')"/>
<area shape ="rect" coords ="214,132,560,174" onMouseOver="writeTextQ('Gathered by requirements elicitation')"/>
<area shape ="rect" coords ="214,190,560,231" onMouseOver="writeTextR('Behavior and information of solution')"/>
<area shape ="rect" coords ="214,254,560,294" onMouseOver="writeTextS('Environmental conditions')"/>
<area shape ="rect" coords ="214,313,560,354" onMouseOver="writeTextT('Nonfunctional aspects that limit or impact')"/>
<area shape ="rect" coords ="214,380,560,421" onMouseOver="writeTextU('Transition from current to desired, temporary')"/>


</map>

<div id="descH" style="position: absolute; height: auto; width: auto; left: 60px; top: 705px; font-family: arial; font-size: 12;"></div>
<div id="descJ" style="position: absolute; height: auto; width: auto; left: 65px; top: 765px; font-family: arial; font-size: 12; "></div>
<div id="descK" style="position: absolute; height: auto; width: auto; left: 60px; top: 825px; font-family: arial; font-size: 12; "></div>
<div id="descL" style="position: absolute; height: auto; width: auto; left: 60px; top: 885px; font-family: arial; font-size: 12; "></div>
<div id="descM" style="position: absolute; height: auto; width: auto; left: 60px; top: 950px; font-family: arial; font-size: 12; "></div>
<div id="descN" style="position: absolute; height: auto; width: auto; left: 60px; top: 1015px; font-family: arial; font-size: 12;"></div>

<div id="descP" style="position: absolute; height: auto; width: auto; left: 235px; top: 705px; font-family: arial; font-size: 12;"></div>
<div id="descQ" style="position: absolute; height: auto; width: auto; left: 235px; top: 765px; font-family: arial; font-size: 12; "></div>
<div id="descR" style="position: absolute; height: auto; width: auto; left: 235px; top: 825px; font-family: arial; font-size: 12; "></div>
<div id="descS" style="position: absolute; height: auto; width: auto; left: 235px; top: 885px; font-family: arial; font-size: 12; "></div>
<div id="descT" style="position: absolute; height: auto; width: auto; left: 235px; top: 950px; font-family: arial; font-size: 12; "></div>
<div id="descU" style="position: absolute; height: auto; width: auto; left: 235px; top: 1015px; font-family: arial; font-size: 12;"></div>

</body>
</html>

end code section ++++++++++++++++


BABOK-e.gif
Requirements-types.gif
0
Comment
Question by:9apit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 24

Accepted Solution

by:
glcummins earned 300 total points
ID: 22706944
You can combine those functions into a single function that takes two parameters:

 1. The text to be written
 2. The ID of the field to write

Like this:

function writeText(txt, fieldId)
{
document.getElementById(fieldId).innerHTML=txt;
}
0
 
LVL 7

Assisted Solution

by:mltsy
mltsy earned 200 total points
ID: 22708844
I agree with glcummins on that question.

As for the text overlapping the box it's supposed to fit in - it looks like you have the positioned to the pixel, you could also add in a pixel width so that the text would wrap properly for the box it's supposed to fit in, something like:

<div id="descG" style="position: absolute; height: auto; width: 90px; left: 70px; top: 305px; font-family: arial; font-size: 12;"></div>
0
 

Author Closing Comment

by:9apit
ID: 31505697
Spilt points to recognize both contributions. Thanks
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question