Dave Masters aka webman@althits.com

[ Design ] [ Interactivity ] [ Browsers ] [ HTML Editors ] [ Promos ] [ HOME ] [ Java Script ] [ Graphics ]


Add a Link to Your Site
Click Here For Associate and Affiliate Programs

Free Web Sites

Answers to FAQs

How do I do image "rollovers" (change the image when the mouse is over it)?
It's easier than you think. Just use the onMouseOver and onMouseOut events to change the .src property of the image. Note that images are named using the name= element of the <image> tag: 
<a href="home.html" onMouseOver = 
"document.homeImage.src='homeLitUp.gif'; return true;" onMouseOut = 
"document.homeImage.src='homeNormal.gif'; return true;"> <img 
name="homeImage" src="homeNormal.gif"> </a>
Why won't Microsoft Internet Explorer 5 show the a message in the status bar when using onMouseOver?
It's a bug in IE5. To workaround include a delay: 
<html>
<head>
<script language="JavaScript"><!--
function showStatus(text) {
    window.setTimeout('window.status="' + text + '"', 1);
}
//--></script>
</head>
<body>
<a href="somewhere.htm" onMouseOver="showStatus('status message');return true" onMouseOut="window.status='';return true">link text</a>
</body>
</html>

How can I make the browser justify a page to the right?
Try: 
<html>

<head>

<script language="JavaScript"><!--
function alignRight() {
    // can't be done
}
//--></script>

<script language="JavaScript1.1"><!--
function alignRight() {
    window.scroll(1000000,0);
}
//--></script>

<script language="JavaScript1.2"><!--
function alignRight() {
    window.scrollTo(1000000,0);
}
//--></script>

<body onLoad="alignRight();">

<pre>
012345678901234567890123456780123456789012345678901234567890123456789012345678901234567899012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
</pre>

<body>
</html>

How else can I pop-up a window the same size as the image it contains? 
It is usually difficult to avoid the margins browsers will automatically place around your image. If you know the size of the image you wish to place in your pop-up window, the alternative to using the <IMG src="">-tag is using the <BODY background>-tag. Open a window with the size of your image, and create a html-document on-the-fly with the image as a background. 

Place this function inside the <HEAD> section of your page: 
<script language="JavaScript">
function picture(picgoal,picname) {
  PicWin=window.open("",picname,'status=0,scrollbars=0,resizable=0,width=100,height=100,screenX=50,screenY=50,top=50,left=50');
  PicWin.document.open();
  PicWin.document.writeln('<html>');
  PicWin.document.writeln('<head>');
  PicWin.document.writeln('<title>Picture in a window</title>');
  PicWin.document.writeln('</head>');
  PicWin.document.writeln('<body background="'+picgoal+'">');
  PicWin.document.writeln('</body>');
  PicWin.document.writeln('</html>');
  PicWin.document.close();
}
</script>
Then this as the link: 
<A HREF="http://www.picture.gif" onClick="picture(this,'picturewindow'); return false"&rt;Click here</A>

Using a drop down menu, how can I get to another page by just clicking on the page title within the menu, rather than use the 'Go' button?
Try: 
<form>
<select onChange="if (this.options[this.selectedIndex].value != "") location.href=this.options[this.selectedIndex].value">
<option>--Select a Link--
<option value="http://www.yoursite.org">yoursite.org
</select>
</form>
However the button will be needed in 16 bit browsers since they do need to be clicked somewhere else for the onChange to register.

How can I change an image to another only pointing to it without clicking the image directly?
Try: 
<a href="http://www.yoursite.org/"
onMouseOver="if (document.images) document.images['theImage'].src='anotherimage.gif';"
onMouseOut="if (document.images) document.images['theImage'].src='originalimage.gif';"
><img name="theImage" src="originalimage.gif">

How can I use Javascript to play audio when the user downloads my site?
Sorry, There is no simple sound script that will run in all browsers and I can give you one, but it will give a lot of javascirpt errors in IE if there is no support for sound... Also it is very hard to play WHILE the site downloads...:
Load this sound.htm page in a hidden frame: 
<html>
<head>
<script language="JavaScript"><!--
function playSound() {
    if (document.embeds) {
        if (navigator.appName == 'Netscape')
            document.embeds[0].play();
        else
            document.embeds[0].run();
    }
}
//--></script>
</head>
<body onLoad="playSound();parent.otherframe.location='realpage.html';">
<embed src="sound.mid" hidden=true loop=false autostart=true>
</body>
</html>
Where the hidden frame is something like: 
<frameset rows="100%,*">
<frame src="about:blank" name="otherframe">
<frame src="sound.htm">
</frameset>

How do I detect a users screen resolution and send them to a page suitable for them?
Design your website in 800x600 resolution, create a 640x480 replica and place the following code between the HEAD tags.
This will work for both IE and Netscape v4.0 or higher. 
<script language="JavaScript"><!--
var BroW = navigator.appVersion;

//check visitor screen resolution

if (BroW >= 4) {
  x = screen.width ; y = screen.height
  if (document.layers) {
    if ((x >= 800) && (x <= 1028)) {x = 1028}
    if ((y >= 600) && (y <= 780))  {y = 780}
    if ((x >= 640) && (x <= 800))  {x = 800}
    if ((y >= 480) && (y <= 600))  {y = 600}
    if (x <= 640) {x = 640}
    if (y <= 480) {y = 480}
  }
  Res = x + "x" + y
} else {
  Res = 'unknown'
}

// redirect low resolution
// replace www.yoursite.org/640x480p.htm with your own host and page name
if (Res == '640 + "x" + 480')
  location.href="http://www.yoursite.org/640x480p.htm";
//--></script>

How do I get all buttons to be same size?
CSS can be used to set the width of all form fields: 
<input type="button" name="button" style="width: 200" value="abc">

How come when I save my image in Paint Shop Pro the text gets blurry?
This is the reason we recommend that you don't save in JPG format. Saving an image won't change the image you see in PSP, but the compressed image may be considerably different
Artifices on sharp edges, change of hues in the palette, even conversion of solid colors to dithered hues, are all problems that JPG introduces.
Text has sharp changes which JPG cannot handle. Usually, GIF is preferred for text.
JPG has only one good point and that is amount of compression.
If you're creating art or new images, save in a loss-less format such as .PSP, .PSD, .PNG, .TIF, etc.
Then, from that master image, create images for the web in .JPG format. (Saving an image in JPG the very first time creates the changes, and you cannot recover the original easily.)

How do I offer a link or button for visitors to make my site their homepage?
The following methods work with Explorer 5.0 or better. For a text link use: 
<SPAN STYLE="cursor:hand; color:blue; text-decoration:underline" 
onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.webmastersink.com/webman');">
Click Here to Make My Site Your Home Page
</SPAN>
To make a button, try the following: 
<FORM>
<INPUT TYPE="button" 
VALUE="Make My Site Your Home Page" 
onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.webmasterwsink.com/webman');"> 
</FORM>

If you have any suggestions for this area or questions about web site design, please feel free to email me at webman@althits.com 





  

       

   
  
   

   
   
Search Web Masters Ink

          
   

Find what you're looking for at www.webmastersink.com

   		
   

   

   





 
   

 









Visit Web Masters Ink

Supporters of Web Site Theory and Philosophy



 


webman and webman contents © 1998-2009 Dave Masters