internet.com

Go to WebDeveloper Home


hm-v6-139x61.gif

Database Journal: The Knowledge Center for Database Professionals

find a web host with:
CGI Access
DB Support
NT Servers
UNIX Servers
Telnet Access

advanced search
jobs

Get FREE Development Info via your Email!

The Webdeveloper channel
FlashKit
GIF.com
HiermenusCentral
webdeveloper Jobs
Java Boutique
JavaScript.com
JavaScript Source
ScriptSearch
StreamingMedia World
WDJ
WDVL
WebDeveloper.com
WebReference.com
XMLFiles.com

internet.com
Internet News
Internet Investing
Internet Technology
Windows Internet Tech.
Linux/Open Source
Web Developer
ECommerce/Marketing
ISP Resources
ASP Resources
Wireless Internet
Downloads
Internet Resources
Internet Lists
International
EarthWeb
Career Resources

Search internet.com
Advertise
Corporate Info
Newsletters
E-mail Offers

internet.commerce
Be a Commerce Partner

D R .   W E B S I T E®
WebDeveloper.com

October 19, 1998

Setting Up JavaScript Rollovers; Site Redirects; CSS for Link Colors

By David Fiedler and Scott Clark

Dear Dr. Website®: I've found some sites that say you can do rollovers with three simple lines of code, but when I try, I get error messages. I'm using FrontPage 98, and here's the code I'm using:

<a href="javascript:nothingMuch();"
onMouseOver="yaImgChange(11,'img1.gif');"
onMouseOut="yaImgChange(11,'img2.gif');">
< img src="img1.gif"></a>

You're confusing placeholders or shorthand (such as "nothingMuch" or "yaImgChange") with actual code. Yes, the HTML is only three lines, but you do need actual JavaScript. The following is courtesy of Macromedia Dreamweaver.

<html>
<head>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v1.2
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
var preloadArray = new Array();
for (var i=0; i<imgFiles.length; i++) {
preloadArray[i] = new Image;
preloadArray[i].src = imgFiles[i];
}
}
}

function MM_swapImage() { //v1.2
var i,j=0,objStr,obj,swapArray=new
Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[') == 0 && document.layers == null) ||
(objStr.indexOf('document.all[') == 0 && document.all == null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v1.2
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData .length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<a href="#" onMouseOver="MM_swapImage
('document.img1','document.img1','img2.jpg')"
onMouseOut="MM_swapImgRestore()">
<img src="img1.jpg" width="160" height="120" name="img1" border="0">
</a>
</body>
</html>

Dear Dr. Website®: Is there HTML or JavaScript code that can change any or all of the link colors anywhere within a single HTML page? I'd like to use light-colored links on a black menu panel and then change them to dark-colored links on white for the content area.

Neither JavaScript nor HTML, but Cascading Style Sheets to the rescue. All you have to do is something like this before the first area:

<style>
A:link { background: black; color: white; }
A:visited { background: black; color: yellow; }
A:active { background: black; color: cyan; }
</style>

and like this before the second:

<style>
A:link { background: white; color: blue; }
A:visited { background: white; color: red; }
A:active { background: white; color: brown; }
</style>

They'd have to be separate tables, though, and at the moment, this works properly only with fourth-generation browsers.

Dear Dr. Website®: I changed Web servers (from AOL to Xoom). How do I redirect users to my new location when they type in my AOL address?

An oldie but goodie! Simply set up your old page something like this (and be careful with the quotes):

<HTML>
<head>
<meta HTTP-EQUIV="Refresh" CONTENT="0;
URL=http://www.newdomain.com/newhomepage.html">
</head>
</HTML>

Visit The Dr. Website® Archives.
Click here for a list of Dr. Website's most frequently asked questions (and answers!).
Send your own question to Dr. Website®.

Fast Jump to Anywhere on WebDeveloper.com®:

Contact the WebDeveloper.com® staff

Last modified: 20

 

Refresh Daily
Join Editor-in-Chief David Fiedler The Editor With No Time and find truth, justice, and a clue or two.


Browse by Category
[ Site Map ]

ActiveX / VBscript
Animated GIF Archive
Browsers
CGI / Perl
Database Connectivity
E-Commerce
HTML-Advanced: DHTML, CSS
HTML / Site Authoring Tools
Intranet/Groupware
Java
JavaScript
Multimedia: Audio / Video / Streaming Technologies
Opinions
Refresh Daily: Editorial Column
Security
Servers & Server Tools
Site Design / Graphics
Site Management / Marketing / Log File Analysis
VRML / 3D
XML



The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers