More Little Tips And Tricks
Page 7
Image Change on Text Hover
Your Text Link |
H ave you ever moused over a text link, then you see an image change on another part of the page? It's a really cool effect, and it's also fairly easy to implement. Thanks to code supplied by a Bravenet member, we are happy to show you how you too can add this super image change on mouseover text link effect.
F irst, we are going to use the following JavaScript in the <HEAD> section of your document to prepare the images for display. It doesn't have to be in the <HEAD> section, but it's nice to keep things clean on your page.
B e sure to change the path of the default to the path of your uploaded images in the below <HEAD> section of your document!
<script language="JavaScript">
<!-- Hide the script from old browsers --
img0_on = new Image(50,50);
img0_on.src="change.gif";
img0_off = new Image(50,50);
img0_off.src="load.gif";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// End Hiding Here -->
</script>
N ow you will need the 2 two images. These images will change on hovering over the link. Load.gif will be the image that displays on page entry. Change.gif will be the image that replaces load.gif on mouseover. These images should be the same size but don't have to be. Now we have our images, let's place load.gif on your page. (This can go anywhere on your page.)
B e sure to change the path of the default to the path of your uploaded image in the below <BODY> section of your document!
<IMG SRC="load.gif " name="img0">
O nce in place, you can code your text link, which will activate the image change on mouseover. Here's the link code.
<a href="my_page.htm" onmouseover="over_image('img0');"
onmouseout="off_image('img0')">Our Link Text</a>
B e sure to change the my_page.htm to the path of the page you want to link with.
N ow, when a visitor mouses over your text link, the image changes!
W e deliberately put the images and text link within a table. Reason being as the above tutorial states, the images can be of different sizes, but then what will happen is anything around the images will move up and down to compensate for the differences in size of the two images. Both our images are exactly alike except that one faces left and one faces right. They are both the same pixel size so you will not get vertical movement around the changing images.
O n one final note within the script. Where you add your uploaded images it is not a complete path to your image, it is just the name of your image. Proper HTML coding dictates you should use the complete path if possible and not just the image name. This script does allow you to use the complete URL path to your image!
Having Check Boxes And Radio Buttons Appear Selected
A ctually, this is a very easy to achieve. If we were to look at the two below "Selected" buttons, then the code for selected and unselected, it will become self evident on howto.
Checked <INPUT type=checkbox checked name="?" value="?">
Unchecked <INPUT type=checkbox name="?" value="?">
Checked <INPUT type=radio name="?" checked value="?">
Unchecked <INPUT type=radio name="?" value="?">
T o make the button appear pre-selected, all you do as in the above example, add the attribute into the code of "checked" and it is done.
A s you can notice in the above examples, the question mark character ? is being used. In a functioning form, these would be replaced with the names of each selection. This is one aspect that you need a good solid working knowledge of forms to better understand the theory behind the naming of form elements.
T hese buttons are 90% of the time associated with forms that you want your viewers to already have one or more selections already chosen.
O ne of the most frequently requested tips is for a "Random Text" generator. Uses for such a script are many and include a Quote of the Day or other such randomly selected information.
T he following JavaScript will perform such a task with ease. Have a look at the script below. You can place the following in the <HEAD> section of your document, or remotely source it to another directory as a file include.
N
ote:
We have removed the HTML comments, as email often plays havoc with
them; it's still a good idea to comment your scripts so that older browsers
won't display the actual script.
<SCRIPT LANGUAGE="JavaScript">
var textnumber = 2 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (textnumber-1) * randomnumber) + 1 ;
text = new Array
text[1] = "<font color='#ffa500'><BLINK>To be or not to be, that is the question. -- Shakespeare</BLINK></font>"
text[2] = "<font color='#ffa500'><BLINK>Sin is its own punishment -- Freud</BLINK></font>"
var mytext = text[rand1]
</SCRIPT>
Y
ou can add entries, but be sure to increase the var textnumber = 2 ; variable to match the total number of entries, as well as incrementing the text[2] with the next in the series......
Now, to display our random text, we call the script by executing the
following document.write statement in the <BODY> section of your document where you want it to appear!
<script language="JavaScript">
document.write(mytext)
</script>
Y ou can re-write this script to load images, or hyperlinks, or both (images that link to other pages).
W e did add two more little twists into this script to make it "Blink" and changed the color of the text!
I f you would like to make the sayings blink, this is a two part add on that you need to do. Just adding regular <BLINK>Your Text Here</BLINK> around the text will only work in Netscape. It will not work with Internet Explorer. To make this effect work in both platforms, add the below script into the <HEAD> section of your document and then add the <BLINK>Blinking Text</BLINK> tags around your text.
1 ) You need to grab the below link and get the copy and paste code that will go into the <HEAD> section of your document.T
he other effect we added was to change the font "color" of the message. Since this is done within the java script itself, it is done slightly different than normal with the use of a different character. Instead of putting a regular font color tag such as this
<font color="#ffa500">Your Message Here</font>
Y ou need to make use of the apostrophe ' in its place such as seen below:
<font color='#ffa500'>Your Message Here</font>
I f you do not do it as such, you will get an error message pop up and wonder why.
I
f you have a site like ours and there are certain times you need to emphasize the point of viewing a source code, this little form button will do the job. Very neat and and gets your point across professionally that you want your source code viewed. The below link is an example of how we have used this button to make a point in viewing our source code. When the page opens, scroll down until you see the above little button and you can see how it is used perfectly.
[ Example ]
J ust copy the below copy and paste it anywhere within the <BODY> section of your document that you want it to appear. On a final note on the size of the page that you want the source viewed. It may take a second or two to open the source code depending on file size. If the page is of such a size your notepad will not open it, it will prompt you to have it open in word pad.
<FORM>
<INPUT TYPE=button NAME="view" VALUE="View Source Code" OnClick='window.location="view-source:" +window.location.href'>
</FORM>
L
earning how to properly nest multiple tags around one block of text or an object is crucial to successfully coding your web pages. Just be sure your opening tags have been put in a certain order and the closing tags ALL appear in the EXACT OPPOSITE ORDER.
For Example: M
aking sure you have your multiple tags nested properly takes a little getting used to, but if you get into the habit at the beginning it will become second nature to you in short order.
<TAG1><TAG2><TAG3>
[text or object here]
</TAG3></TAG2></TAG1>
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
|
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-