How To Show Picture On Mouseover With Javascript Tutorial

today i was asked how you can make a picture appear when you put the mouse arrow on a link. for example, i have a link and i when someone puts their mouse arrow on top of it, it would show a picture. well, that's easy to do using HTML, CSS and Javascript. i will show you how you can do this.

first, we are going to create an html file called javascript-showpicture.html to create this file, i will be using a text editor. i am using windows xp to do this tutorial, so i will use notepad for my text editor.

the first thing we are going to need is the style, i will just simple create a box with a grey thin line border, and to make sure that the image shows right next to the link, i will use the absolute position so here is the CSS code i would use:

<style type="text/css">
#Style {
	position:absolute; 
	visibility:hidden;
	border:solid 1px #CCC;
	padding:5px;
	
}
</style>

ok, so i got my style, now i need the javascript code: we are going to use this code, this code will make it so that when you put the mouse over the link, it will show the image, but as soon as you move the mouse arrow outside the link, we want the picture to hide away. so we create a ShowPicture() Function using Javascript code:

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

ok, we have our CSS and Javascript, now we need the HTML to put it all together. we are going to be using a div to show the image and a href link to allow the user to put their mouse over the link so this is the HTML we will need to use:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="http://www.wallpaperama.com/post-images/forums/200901/11-880-aaaa.jpg"></div>

thats it, now we put it all together, open a blank we are going to copy and past the following code into it:

<h1>Show Picture on Mouseover by Wallpaperama.com</h1>
<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">
#Style {
	position:absolute; 
	visibility:hidden;
	border:solid 1px #CCC;
	padding:5px;
	
}
</style>

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="http://www.wallpaperama.com/post-images/forums/200901/11-880-aaaa.jpg"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div><a href="http://www.wallpaperama.com">&lt;&lt; Visit Wallpaperama.com For More Cool Javascript Tricks</a></div>

now save it as javascript-showpicture.html

once you have saved it, open javascript-showpicture.html with your browse and you can see it in action

ok, the best way to know what you are getting is to see what it looks like, you have two options, create the file youself and see it. i would prefer you do it that way, its more fun. but if you are lazy, i will create a demo for you. here it is: hope this helps