************************************************************
Speaking GraphicallyIf a picture truly is worth a thousand words, then it
’
s certainly worth
remembering that it
’
s a lot easier to come up with a picture than it is
to come up with a thousand words!
That having been said, it surprises
me how many questions I get concerning the
"
best
"
graphics application
for handling pictures.
So, to answer those question, this week
’
s
newsletter presents some points to consider when choosing picture
handling tools (deliberately avoiding naming specific products
—
I
suggest you browse available products looking for features and price.)
The first tool you
’
re going to need is the one that gets you the picture
in the first place.
You could get it off the net, take it or create
it.
Let
’
s go in that sequence.
For pictures, graphics, clipart etc. off the net, do yourself a favor
and go on over to Graphics.com.
There you
’
ll find the largest, easiest
to use resource out there, and it
’
s easily worth the price!
If you
’
re going to take it, you
’
ll need a camera.
Best, of course, to
go digital (do they really still sell film?)
More megapixels mean
better resolutions, higher prices and bigger picture files (way too big
for the web!)
If you want your pictures for print as well as the web,
get the most megapixels that fit within your budget.
If you want them
only for the web, put the money back in your pocket
—
the cheapo
cameras will do just fine!
If you
’
re going to create it (more power to you
–
you obviously have
more creative art talent than do I!) you
’
ll either put it on paper (or
the like) and scan it or you
’
ll create it in your graphics application.
If you truly have these talents then you probably already know which
tools you like, and the
"
best
"
one will always be the one you know best.
For us mere mortals, the choice involves a few basic considerations.
Some applications have a plethora of features and functions, sending
their price up into the $300-$600 (please choose your currency
equivalents!) range and ensuring that you will spend the next few years
mastering the 5% you really need.
Other simply get the basic job done.
These are my favorites!
Costing less than $50 or so, they take a full
ten minutes of study and include a button which says something like
"
click me to create a web album out of your selected pictures.
"
Outstanding!
Even if you don
’
t want the album itself, you have right
sized and oriented your pictures and now have them available to use on
whichever pages you wish.
Sometimes (often, in fact) the simpler is simply better!
By the way
…
. if you
’
re running Windows XP try right clicking a picture
in your
"
My Pictures
"
folder and
"
Send To
"
,
"
Mail Recipient
"
.
Windows
will then ask if you want it to adjust the picture sizes for you.
Say
yes, and send them to yourself.
Check your mailbox and you
’
ll find all
your pictures sized just right for a web album.
(A simple little tip
that doesn
’
t cost you anything!)
Thanks for reading!
–
Vince Barnes
************************************************************
Q & A Goodies***********************************
Questions are taken from submissions to our Community
Mentors. You can ask a Mentor a question by going to
I am using the script under the So You Want to Resize Your Window,
Huh? tutorial and was wondering if I could have it so that when a
website visitor clicks on my main image, the re-sized window would pop
up rather than them having to only click a text link.
A.This is an example of how you can click on an image and have a window
popup that is sized to the width and height of the larger image:
<
html
>
<
head
>
<
title
>
Image Pop Up Viewer
<
/title
>
<
SCRIPT LANGUAGE=
"
JavaScript
"
>
image0=new Image()
// preload images large images
image0.src=
"
large0.gif
"
image1=new Image()
image1.src=
"
large1.gif
"
image2=new Image()
image2.src=
"
large2.gif
"
image3=new Image()
// preload thumb nail images of large images
image3.src=
"
thumb0.gif
"
image4=new Image()
image4.src=
"
thumb1.gif
"
image5=new Image()
image5.src=
"
thumb2.gif
"
var ImgWin=
"
"
function imgwin(Imgn) // get width of large image that was pre
loaded above
{
w=eval(Imgn+
"
.width
"
)
if(w
<
100)
{w=100}
h=eval(Imgn+
"
.height
"
) // get height of large image that
was pre loaded above
if(h
<
100)
// cannot open window less than 100
by 100
pixels
{h=100}
h=h+25
picgif=eval(Imgn+
"
.src
"
)
// build image source
if(ImgWin.open)
//
if the window is open close it
{ImgWin.close()}
/*Create window and display large image of thumbnail.
If you want to change the position of the window when it
pops up change the values for the top and left
properties below in the variable WinProps.
The values in
top and left are number of pixels from the top
and left of the edge of the screen.
*/
WinProps=
"
width=
"
+w+
"
,height=
"
+h+
"
,location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=0,left=0
"
ImgWin=window.open(
"
"
,
"
winimg
"
,config=WinProps);
ImgWin.document.write(
"
<
HTML
>
"
)
ImgWin.document.write(
"
<
HEAD
>
<
TITLE
>
Display
Image
<
/TITLE
>
<
/HEAD
>
"
)
ImgWin.document.write(
"
<
BODY marginheight=
’
0
′
marginwidth=
’
0
′
leftmargin=
’
0
′
topmargin=
’
0
′
bgcolor=
’
lightyellow
’
>
"
)
ImgWin.document.write(
"
<
CENTER
>
<
IMG SRC=
"
+picgif+
"
BORDER=
’
0
′
HSPACE=0 VSPACE=0
>
<
BR
>
"
)
ImgWin.document.write(
"
<
FONT SIZE=-1
>
<
A HREF=
’
#
’
onClick=
’
self.close()
’
>
Close Me
<
/A
>
<
/FONT
>
<
/CENTER
>
"
)
ImgWin.document.write(
"
<
/BODY
>
"
)
ImgWin.document.write(
"
<
/HTML
>
"
)
ImgWin.document.close()
ImgWin.focus()
}
<
/SCRIPT
>
<
/head
>
<
body
>
<
CENTER
>
<
SCRIPT
>
/*
If you add more thumbnail images make sure that you include the
thumbnail and larger image in the
preload sections above.
In the onClick event for the added images
make sure you change the value
being passed to match the image name of the large image that
matches the thumbnail image.
Both
of these must be setup in the image preload sections above.
*/
<
/SCRIPT
>
<
BR
>
<
BR
>
<
BR
>
<
A HREF=
"
#
"
onClick=
"
imgwin(
‘
image0
’
);return
false;
"
>
<
IMG
SRC=
"
thumb0.gif
"
NAME=
"
img0
"
BORDER=
"
0
"
>
<
/A
>
<
BR
>
<
A HREF=
"
#
"
onClick=
"
imgwin(
‘
image1
’
);return
false
"
>
<
IMG
SRC=
"
thumb1.gif
"
NAME=
"
img1
"
BORDER=
"
0
"
>
<
/A
>
<
BR
>
<
A HREF=
"
#
"
onClick=
"
imgwin(
‘
image2
’
);return
false
"
>
<
IMG
SRC=
"
thumb2.gif
"
NAME=
"
img2
"
BORDER=
"
0
"
>
<
/A
>
<
/CENTER
>
<
/body
>
<
/html
>
I am new to Javascript. I have been researching a way to unselect a
number of checkboxes once a specific checkbox is clicked and
vise-a-versa.
A.Here is a example that I put together for someone else (you could
replace the radio buttons with form buttons and it would work the same.)
<
html
>
<
head
>
<
title
>
Check All
<
/title
>
<
SCRIPT LANGUAGE=
"
JavaScript
"
>
function checkall(formid,obj)
{
len=formid.ckb.length
for(i=0;i
<
len;i++)
{
if(obj.value==
"
Check All
"
)
{formid.ckb
[
i
]
.checked=true}
if(obj.value==
"
Uncheck All
"
)
{formid.ckb
[
i
]
.checked=false}
}
}
function onlyone(fldobj)
{
alert(fldobj.name)
}
<
/SCRIPT
>
<
/head
>
<
body
>
<
CENTER
>
<
FORM NAME=
"
myform
"
>
<
INPUT TYPE=
"
checkbox
"
NAME=
"
ckb
"
onClick=
"
onlyone(this)
"
>
Checkbox
One
<
BR
>
<
INPUT TYPE=
"
checkbox
"
NAME=
"
ckb
"
onClick=
"
onlyone(this)
"
>
Checkbox
Two
<
BR
>
<
INPUT TYPE=
"
checkbox
"
NAME=
"
ckb
"
onClick=
"
onlyone(this)
"
>
Checkbox
Three
<
BR
>
Check All
<
INPUT TYPE=
"
radio
"
NAME=
"
chka
"
VALUE=
"
Check All
"
onClick=
"
checkall(this.form,this)
"
>
Uncheck All
<
INPUT TYPE=
"
radio
"
NAME=
"
chka
"
VALUE=
"
Uncheck All
"
onClick=
"
checkall(this.form,this)
"
>
<
/FORM
>
<
/CENTER
>
<
/body
>
<
/html
>
{See also
–
Ed.
]
Q.I am having trouble with using named parameters in JavaScript code.
For example, in this simple mathematical code:
var number : integer = cos (30);
document.write (
"
the Cosine of 30 Degrees is
"
+ number +
"
"
)
This is where I
’
m trying to calculate the cosine of 30 degrees and have
made a rule that the
"
number
"
variable must always be an integer.
However, when I attempt to run this code, I get the error message in
Netscape:
[
missing
"
;
"
before statement
]
in the line of code
"
var number
: integer = cos(30)
"
. I always get this type of message whenever I try
to set any variable to always be an integer or string.
What am I doing
wrong?
A.Unlike other languages you cannot specify if a variable is a string
or integer in JavaScript.
Here is an example of how it would be done.
<
hmtl
>
<
head
>
<
title
>
Test
<
/title
>
<
/head
>
<
body
>
<
script language=
"
javascript
"
>
var number = Math.cos(30);
document.write (
"
the Cosine of 30 Degrees is
"
+ number +
"
"
);
<
/script
>
<
/body
>
<
/html
>
I have a question about backgrounds and style sheets.
Is there any
way (such as using the
"
repeat-y
"
function) to get the background to
border down the right as opposed to the left side?
Also, is there a way
to get it to tile down both sides?
I am essentially interested in
getting the look of a border on both the left and right side of the
page, but i want it to appear correctly on all screen resolutions, so of
course, making a very long image with the desired left and right
backgrounds simply on opposite sides or the image would be impractical.
A.I have one way for this to work; however, it doesn
’
t work in IE 5.5.
It does work in NN 6 and above, Mozilla, and Opera.
Add two divs to the bottom of your HTML file:
<
div id=
"
left
"
>
<
/div
>
<
div id=
"
right
"
>
<
/div
>
Then add the following CSS:
#left {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100%;
border: 1px solid red;
margin: 0;
padding: 0;
background: url(ava.gif) repeat-y top left fixed; }
#right {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 100%;
border: 1px solid red;
margin: 0;
padding: 0;
background: url(ava.gif) repeat-y top right fixed; }
This will set backgrounds for the two extra divs in your HTML, and
should tile the length of the page. IE 5.5 doesn
’
t recognize the
"
fixed
"
property for anything other than background images for the BODY tag, so
the extra divs scroll with the page.
Q.I have created on a development site thru
"
Dreamweaver/UltraDev
"
,
information which our project team are copying to another application.
The challenge we face is to have the information on the development
presented as a hard copy, with page breaks and hopefully in the same
format (colors and all). So far all we have done is to copy and paste
the information into a word document, but we are losing most of the
original format.
A.Using CSS you can set the where the page breaks are when printing
your web page. If you are doing this within a company in which everyone
is using the same browser you may get away with it with few problems.
Not all web browsers recognize this particular attribute. I believe IE 5
and above and Netscape 6 and above will recognize it. The CSS attributes
"
page-break-before
"
and
"
page-break-after
"
. Both instruct the printer to
begin printing a new page, with the difference being before or following
the element the attribute is applied to. For instance if you apply the
attribute within the H1 tag like this:
<
style
>
h1{ page-break-before: always; }
<
/style
>
The printer will start a new page before every H1 tag.
Hello, I have a link question.
On my site I have the link color
scheme to be black, which works well on the left bordered side of my
page, but not on the right side which has a black background.
Is there
anyway to change the color just one or two links without changing the
color of all the links?
A.Using CSS and assigning a class to each link you can use different
colors and other attributes to whichever links you want. For instance if
you want one of your links to be black and another to be white you would
set up a style sheet like this:
<
style type=
"
text/css
"
>
a.one:link {color: #000000}
a.two:link {color: #FF0000}
<
/style
>
Place the style between the
<
HEAD
>
tags.
Now apply the class to the
actual links in your HTML like this:
<
a class=
"
one
"
href=
"
default.html
"
>
This link will be black.
<
/a
>
<
a class=
"
two
"
href=
"
default.html
"
>
This link will be red.
<
/a
>
***********************************
IBM Makes Way Into Xbox[
October 25, 2005
]
Chip production is under way in the U.S. and abroad
to get Microsoft
’
s Xbox 360 in homes for the holiday season.
Read the article:
[
October 25, 2005
]
The two organizations end a long-standing
disagreement over new services proposed by the .com registry owner.
Read the article:
[
October 25, 2005
]
Video on demand continues to play an important role
in cable services.
Read the article:
[
October 25, 2005
]
TurboLinux released the first major update in two
years, as the Japanese vendor aims to gain government share in Japan.
Read the article:
[
October 25, 2005
]
Oracle President Chuck Phillips says the company will
look to replace proprietary software developed by corporations.
Read the article:
[
October 25, 2005
]
Cox, Comcast and Time Warner are reportedly weeks
away from signing a wireless phone agreement with the carrier.
Read the article:
[
October 25, 2005
]
UPDATED: IBM, Cisco, CA and others form Aperi, a
group to advance open storage infrastructure management.
Read the article:
[
October 24, 2005
]
Next generation of open source database officially
released with loads of new advanced SQL features.
Read the article:
[
October 24, 2005
]
Cisco
’
s new system integrates radio, cell, PSTN and
VoIP for a converged interoperability for public safety and other
markets.
Read the article:
[
October 24, 2005
]
P.A. Semi licenses with IBM for PowerPC instruction
set. Could Apple have waited?
Read the article:
***********************************
Did you ever wish your newsletter was an easy two way communications
medium?
Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on
something you have seen in here, you can now send your input to:
mailto:nlfeedback@htmlgoodies.com
We already receive a lot of email every day.
This address helps us sort
out those relating specifically to this newsletter from all the rest.
When you send email to this address it may wind up being included in
this section of the newsletter, to be shared with your fellow readers.
Please don
’
t send your questions to this address.
They should be sent
to our mentors: see
Thanks for all your feedback!
***********************************
Filtered Directory List ASP.NET SampleThis script allows users to search for files simply by entering any part
of the filename.
The implementation is easier then the classic ASP
version thanks to the fact that the GetFiles method of the DirectoryInfo
object will take an optional SearchPattern parameter and handle the
filtering for us.
In this article, Marco Nanni offer a quick overview of Visual MainWin, a
Visual Studio .NET plug-in that allows you to develop, debug, and deploy
Web applications for the J2EE platform using C# or VB.NET.
This article will explain how you can avoid rigidity when building
applications by using the provider design pattern.
The provider design
pattern is used throughout ASP.NET 2.0 and there are also guidelines on
how to provide this functionality in ASP.NET 1.x applications.
***********************************
1881Pablo Picasso Was Born
On this day in 1881 in Malaga, Spain, one of the greatest, and probably
the most famous artists of the twentieth century was born.
He was the
son of a drawing professor who steered him towards a career in academic
art.
In 1900 he went to Paris the exhibit his work on the prestigious
Rue Lafitte, where his great success induced him to return to live
permanently in Paris.
His body of work comprises more than 50,000
paintings, drawings, engravings, sculptures, and ceramics, which he
produced over 80 years.
Pablo died in 1973 at the age of 91.
Prints of
some of his work hang in my house
—
if you would like to send me
originals, email me
&
I
’
ll make shipping arrangements.
Today was also the day that in:
1415in the Battle of Agincourt
the Welsh Longbow proved superior to an armored knight;
1760George III ascended the throne of England;
1854the Light Brigade
charged
"
into the valley of death
"
at the Battle of Balaklava during the
Crimean War;
1945Japanese surrendered Taiwan to Gen Chiang
Kai-shek;
1960the first electronic wrist watch went on sale (in
NYC);
1962Author John Steinbeck was awarded the Nobel Prize in
literature;
1965the Rolling Stones released
"
Get Off of My
Cloud
"
;
1968Yoko Ono announced she was having John Lennon
’
s
baby;
1971Roy Disney dedicated Walt Disney World in Orlando
Florida;
1983US invaded Granada;
1988ABC News reported
on potbellied pygmy porkers
’
popularity as pets;
Born today were: in
1825composer Johann Strauss (the younger;
composer Georges Bizet;
1881artist Pablo Picasso;
singer/entertainer Minnie Pearl
[
Sarah Ophelia Colley
]
;
1928actress Marion Ross;
1928actor Anthony Franciosa;
1941Australian singer Helen Reddy;
1949actor Brian Kerwin;
1963actress Tracy Nelson;
1967actress Julia Roberts;
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
