Guide to creating a web site, web design, web development, internet marketing, promotion, html tips and tricks, javascript and more.

Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering Free Javascript Tips, Snippets and Codes

Open Directory Projectfree ebooksfree articles
web site design development internet marketing and promotion tutorials

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

webmaster resources
website design



Highlight an Image on Mouseover

If you're looking for a way to spice up your web site, this JavaScript tip may be just what you're looking for. You can use JavaScript to highlight an image when you place your mouse over it.

This JavaScript tip provides a great way to highlight your navigational buttons or whatever you'd like.

Example:


Place your mouse pointer over the above image.



Place the following JavaScript code between your HEAD tags:

<SCRIPT language="JavaScript1.2">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
// -->
</SCRIPT>



Next, place the following code within all of the image tags you'd like the affect to be applied:

style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"



Here's how your image tag might look:

<img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">


Script code provided by:
Christian Kizer





Submit your JavaScript code snippets. We'll credit you and give you a link to your website.