JavaScript:
Hover & Click Effects Least Tern > Tech Class > Teacher Resources > Resources for Web Design
JavaScript:
Hover & Click Effects
Hover effect: change graphic | Alert Box | Open new window from link
A graphic that changes with the onMouseover event (this is also a link to Google):
You will need two saved graphics in the same folder as your page. They must be exactly the same size. Keep the graphics small in size.
Code: Change the words in red to your link reference and your image file paths.
Paste this between <head> and </head>:
<script language = "JavaScript">
<!--
//Active images:if (document.images)
{
img1on=new Image();
img1off=new Image();
img1on.src="greendot.gif";
img1off.src="reddot.gif";
}
//Function to 'activate' images:
function imgOn(imgName)
{
if (document.images)
{
document[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName)
{
if (document.images)
{
document[imgName].src = eval(imgName + "off.src");
}
}
var leftPos = 0
if (screen) {
leftPos=screen.width-60}
-->
</SCRIPT>Paste this into the <body> where you want the image to appear.
<a href = "http://www.google.com" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"><img src="reddot.gif" border=0 name="img1" width="32" height="32"></a>
Next: Click this link to pop open an alert box. You can use this with onMouseOver as well.
Code: add the red to your <a href...> tag. Change the alert message. The quotation marks and parenthesis are important!!
<a href="#" onClick="alert('Use this for notes, hints and definitions')">
Another version of this alert box script can be found on the Claris Home Page styles tutorial.
Last: open a new window by clicking on a graphic (or on a link).
Click this green dot to open a new window to see a list of possible "contacts".
The size of the window is set in the JavaScript function. Resize this NewWindow to suit the needs of your image or information.
The source code for this page can be copied and changed to accomodate different link colors, more than one image OnMouseOver event, and whatever you imagine. See the resources available from your teacher to learn more about JavaScript.
Code:
Add this between <head> and </head>. If you already have JavaScript in your page, add only the part in red (the actual function). Change the words in green to the name of the web page you want to open. Change the properties in blue to control the appearance of the new window. That web page should be in the same folder as the source page, or you will need to create a path to it. For multiple windows, as for a text annotation, you will need to copy/paste the red code and create a new function for each (named differently - perhaps by the content of the new window).
<script language = "JavaScript">
<!--
function Contact()
{
NewWindow=window.open('contact.html', 'help', 'toolbar=no, directories=no, status=yes,menubar=no,scrollbar=yes,resizable=yes,width=200,height=200, left=700,top=50');
}
-->
</SCRIPT>Change the link <a href...> so that it looks exactly like this: <a href="javascript:Contact()">. Note: left=700 places the window 700 pixels from the left margin. top=50 places the top border 50 pixels from the top of the open window. Setting both values to 0 aligns the new window to the upper left corner.
Another version of this can be found on the Claris Home Page styles tutorial. Click on the link to bullets, etc. See also our page of Open New Window JavaScripts for another set of code.
Elizabeth Sky-McIlvain 1/19/04
