Goodies to Go ™
May 10, 2004– Newsletter #284

A. You are on the right track. You would use an INLINE FRAME. I believe
what you are missing is using the TARGET attribute to tell the link where to
open in.
<IFRAME src="firts_page.htm" width="350" height="200" frameborder="10">
alternative content for browsers which do not
support iframe
</IFRAME>

The <IFRAME> tag that tells the browser an inline frame will go here.
src="first_page.htm" lets you specify the url of the document in the frame that
will open when the user enters your site.
width="350" lets you give the frame a width, in pixels.
height="200" lets you give the frame its height, in pixels.
frameborder="10" allows you to give the frame a border.
The alternative content would be for browsers that do not support IFRAMES. You
can add this or not, but if someone entering your page without an updated web
browser they will see nothing because those browsers would ignore the IFRAME
tags.
Also, this frame uses links just like any other frame. You can give the inline
frame a name, and target the frame with a link on your page outside the frame.

First, add the name command to your IFRAME tag:
<IFRAME src="first_page.htm" name="my_frame" width="350" height="200"
frameborder="10"> </IFRAME>
Now, target a link on your page to show up in the frame:
<A HREF="my_page_one.htm" target="my_frame">Link One</A>
<A HREF="my_page_two.htm" target="my_frame">Link Two</A>
<A HREF="my_page_three.htm" target="my_frame">Link Three</A>
Now you have to create the other pages to show in the IFRAME when the user
clicks on the links.

Q. When I made my site, I viewed it through IE with the view/text size
set to "smaller". When someone views my page with it set to another size, it
displays my site wrong. Is there an HTML or CSS code to combat this problem?

A. Set your desired text size in the using CSS(Cascading Style Sheet).

It might look something like this:
<style type="text/css">
<!–
body{
font-family: verdana,arial,helvetica,san-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
}
–>
</style>
If the text is in a table you may not get the desired size. You would need to
create a class and apply it to the <TD> tag.
<style type="text/css">
<!–
body{
font-family: verdana,arial,helvetica,san-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
}
.large_text{
font-family: verdana,arial,helvetica,san-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
}
–>
</style>
<td class="large_text">

Q. I have html pages that are run from the local hard drive and interact
with a backend SCO Unix server. In some pages I store filenames to be used as
bookmarks. Just for reference, here is the code that stores the bookmark…
<script language="JavaScript">
var totalscore = "0";
var lesson = "AP_LES";
var filename = document.location.href;
filename = filename.substr(filename.lastIndexOf("/") + 1);
filename = "lessons/ap_les/" + filename;
SaveLesson(lesson,filename,totalscore);
</script>
I have a link to take the end user back to that bookmark. Unfortunately, the
page that is saved is contained within a frameset. Here is my code that opens up
a bookmarked page…
<script language="JavaScript">
if (lessonlink == "")
{
document.write("Try out our self-paced lessons to get up to speed quickly on
your software.");
}
else
{
document.write(sUser + ", would you like to <a
href=javascript:// onclick=window.open(lessonlink)>visit</a> where you last left
off?");
}
</script>
Here is my problem…the page opens just fine using the filename I am saving,
but I need it to open up within the main frame of my frameset. How can I open up
a frame set and target one of the frames with a variable that stores a filename
as it opens?

A. To target a frame in a frameset you will need to reference the name of
the frame you want to affect. Try this and see if it works:
parent.mainframe.document.write("Try out our self-paced lessons to get up to
speed quickly on your software.");
"mainframe" would be the name of the frame you want to target. You can also
perform a function in the other frame by doing this:
parent.mainframe.function_name()
You can also populate a variable in the other frame this way:
parent.mainframe.variable_name="some value"
Or a form element this way:
parent.mainframe.document.form_name.element_name.value="some value"

Q. I am trying to find a script that will resize the page in a web from
one size to another! I designed the site in an 800X600 Resolution and when
someone with a 640X480 Resolution views it, the frames page creates 2 scroll
bars instead of just one. I need the web Page to resize the window/web
page/browser depending the user’s resolution.

A. You could check the width and height of the screen when the page loads
and the resize it this way: <script type="text/javascript"> function Resizewin()
{
if(screen.width<800||screen.height<600)
{window.resizeTo(800,600)}
}
</script>
<body onLoad="Resizewin()">

Q. I was wondering if there is anyway to place text on top of pictures
with html.

A. Here is the link to see how its done:

https://www.htmlgoodies.com/tutors/textonimages.html

Q. Is it possible to change the link color with the onMouseOver command?

A. I have done it using JavaScript. There is also a way using CSS, but
here is my JavaScript version (you will notice that for IE5+ and NS6+ it is
quite simple, but for NS4 version browsers it requires some complex coding — if
you don’t care about NS4 I would suggest you leave that part out):
<html>
<head>
<title>Change Link Color</title>
<style type="text/css">
/* Set colors for IE5.0+ and Netscape 6.0 */
.textRed {color:red}
.textBlue {color:blue}
.textLgreen {color:lightgreen}
/* Set colors for Netscape 4.0+ */
A.normal{color:blue}
A.over{color:red}
A.overb{color:lightgreen}
/* No underline on link for all browsers */
A{text-decoration:none}
</style>
<SCRIPT LANGUAGE="JavaScript">
/* This script was written by Jim Young of www.requestcode.com and has been
tested in Internet Explorer 5.0+, Netscape 4.0+ and Netscape 6.0. I use the
statement (this.className) to change the class for the links in NS6 and IE5.0+ .
The scripts below are strictly for NS4.0+ . Add links below that are in the same
order as your links in the body section. the format for the array is:
page to link to, the link name(what is displayed on your page), div id,
class(color) for the mouseover, and class(color) for the mouseout.
make sure you separate them by a comma (,).
*/
var links = new Array()
links[0]="http://www.wsabstract.com,Website
Abstraction,divLink0,over,normal"
links[1] ="http://www.requestcode.com,Requestcode,divLink1,overb,normal"
// Unless you absolutely have to DO NOT change the functions below.
function change(linknum)
{
if(document.layers) // Check for NS4.0+
{
linkval=links[linknum].split(",") // split out the values
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[3]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+"
onMouseOut=changeb(""+linknum+"")>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write(‘"+linkd+"’)"
eval(docwrta)
eval(‘document.’+linkdiv+’.document.close()’)
}
}
function changeb(linknum)
{
if(document.layers)
{
linkval=links[linknum].split(",")
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[4]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+"
onMouseOver=change(""+linknum+"") onMouseOut=changeb(""+linknum+"")
>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write(‘"+linkd+"’)"
eval(docwrta)
eval(‘document.’+linkdiv+’.document.close()’)
}
}
</SCRIPT>
</head>
<body>
<SCRIPT>
/* If you add more links here make sure you update the links array with the same
url and other required information. Make sure they are entered in the array in
the same order as they appear on your page. Also remember to change the value
being passed on the mouseover and mouseout to the functions to match the entry
in the array. Make sure you use different names for each div. In the mouseover
for IE and NS6 you can change the class name specified by the statement
this.className to a color you have setup in the styles area in your head section
above. You should leave the class(color) for the mouseout the same as when your
link is displayed when the page is first loaded. I currently have them set to
blue which is the class normal.
*/
</SCRIPT>
<CENTER>
<H1>Link Effect Example</H1>
Run your mouse over the links to see them change color </CENTER> <div
id="divLink0" style="left:15; position:absolute; top:90;
visibility:visible">
<a href="http://www.wsabstract.com" onMouseOver="change (‘0’);this.className=’textRed’"
class="normal" onMouseOut="changeb (‘0’);this.className=’textBlue’">Website
Abstraction</a> </div> <div id="divLink1" style="left:15; position:absolute;
top:120;
visibility:visible">
<a href="http://www.requestcode.com" onMouseOver="change (‘1’);this.className=’textLgreen’"
class="normal" onMouseOut="changeb (‘1’);this.className=’textBlue’">Requestcode</a>
</div>
</body>
</html>

Top

News Goodies

Teen Busted For Sasser Worm as New One Hits
[May 10, 2004] A new mutant emerges even as Microsoft
announces the arrest of a German high school student in
connection with the creation of the Sasser worm.