How To Show Picture On Mouseover With Javascript Tutorial

Forums » Javascipt » How To Show Picture On Mouseover With Javascript Tutorial
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...
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
UPDATE: since i wrote this article, a new way of doing the same with less code can be accomplish with jquery. if you have not installed jquery in your web page, you really need to check it out.
New Way: How To Show Picture On Mouseover With Jquerytutorial

DEMO:

Put Mouse Here To Show Image










Ken
good tutorial but what do you do if you want to use more than one links??
http://wallpaperama.com/forums/how-to-show-picture-on-mouseover-with-javascript-tutorial-t6984.html
alessandro
hello, ;-))

i lost a couple of days in tring this,, now, if i have a list of words,, links actually, and i want that each one of them get a immage view on the mouse passage??? i tried to modify your code,, few hours just,, but,, if you could help me... this is my web site:

drink24hours

thanks and i have appreccite,,

ale
oz
this is exactly what i need it works... but how do you add more than one text link so it recognises different images?

i need it for a pricelist so when the user hovers over different models a different pic shows. thanks!
art
how about a multiple one..
kalidas
yeah it's nice...... but when it's mouseover it's displaying......... if it display with thick box it looks more nice
Mark
how would you apply text mouseover to show image to a list of names?
og
i need the same tweak as well where you can have multiple text links with different images for each link....please help!! thanks!
dario
just great! i think i'll use the other one with the small window. ehm... the picture is.... astonishing?
Roberta
thnks a lot.... :)
John
this code worked perfect. others make this so difficult. excellent job!!! thank you, john
clayten
can i change the position of image that is displayed on the page. in the current example the picture is displayed below the link. is it possible to display it above the link. thanks
Tamshed
superb it is usefull for me thank you
paul
i see other people have asked, is it posible to have a number of these mouse over links on one page
Mark
many ask the same question. disappointing that for 10 months there's been no answer. short of making multiple copies of the code and naming each one sequentially and then calling on each sequential script, how can one make this code work for multiple images. also, how to edit for text, though i can just make an image of the text if i can't figure that out.
Mark
to get this to work with multiple links you need different css div ids. ("style1", "style2" etc. and need to change them in the html code.

it seems the javascript error may be caused by trying to put two images in the same place. you can still put them sort of on top of each other, but the script won't know that if the div id is different. :-) there must be a better way.
Ahmad
ur java code is working but just on 1 place.
Louis
just to thank you for this wonderful script.
Ashit
thank you - works beautifully! for multiple mouseover of different images, i've called the next as stylez etc. however, i find that the code leaves a large number of blank rows even when no images are being shown. this makes the webpage look quite bad with these gaps between the text rows.
will appreciate advice on this problem.
Jonas
thank you a lot !!!
nice pic when you finish tutorial :)
catherine
thanks a lot for the code.

--------------------- sea
dynamsoft
scmsoftwareconfigurationmanagement
rachel
hi! i'd like to do this effect over a picture with multiple image maps. i'd like the different mapped regions to have an image popup upon mouse hover. how could the code be changed to enable this?

thanks!!!
rachel
Peter
That's really cool. I tried to do this more than once on a page, with different photos each time but it just brings up the same photo each time. Is there a way round this?
Joel
With this code, you have to repeat the code with different ID's if yo wish to have multiple mouseover text links. I mean, copy your code word for word twice & paste into HTML doc. bottom & top mouseover link both displays only the top pic. Change the style ID in the CSS properties, DIV ID, & in onMouseOver. Isn't there a way to utilize one ID code, to apply these setting to multiple text links?.. Isn't there a way to make it so you don't?
sashi
The image is appearing fine on mouseover, but the text is overriding the image at some parts.
Stealthway.net
- at - Joel: thanks you, it works....................
Arturo
Awesome work! This was Very helpful! cheers!
K
Very simple, great, however, Is there a way to have more than 1 image and how do you make the image appear next to the mouseover text?
andylonger
Very useful, I have used your code.Thanks again for sharing...
Giggle
ty for this script i been looking everywhere for it but i have one issue i dont want the image to load below the text i want it to load to the left of it can some one help me with this thanks
Diego
I wanted it to work with a whole line of a table. I just modified the Style to be a css tyle and not and id name, gave an id to each div container base on the items from my system and it worked! Thanks for the tips...
987
654 üt eaüt eüt eaüt e üteüt
Mike
This is just what I was looking for but I have six images to show. Do I put 1,2,3,4,5,6 in the style==?
Mike
I meant to say this is just what I was looking for but I have six images to show. Do I put 1,2,3,4,5,6 in the source==?. Just a rookie and don't know how.
Monesh
I want no how to change image onmouseover, onmouseout using lightbox in javascript...
George
Yes, that should do it.
neeraj
thanks bro...............yup
Kannan
hi friends,,,,,,,,, i need how to show image from database by onmouseuover image script......
John
What this is.....
It's just making a new html instead of showing a picture in an excisting page...I want a to show a picture in the same page when I move over a text..e.g. when the text is Chuck...I want to display his picture when the mouse is over this text...

Making a new page...is nothing....
tara
Try looking for position attributes in css. w3schools will be a good source.
nupz
I want to make a list of names. First picture show fine but when i move mouse the name on the bottom, the upper picture is blinking and not goes away. What i have to do?
peter
Awesome - so simple yet effective. By the way - how do I change the position(I would like to move the image slightly down and right by let's say 4 pixels)
ONE80
I have noticed that many have had the same problem as me and got no reply on how to fix it. The question is HOW DO I APPLY THIS TO MORE THEN ONE IMAGE ON MY PAGE. IT DOES NOT WORK? well here is the answer I found very similar code on another website just use it and it works fine. You can have as many mouseovers on one page as you like.. I hope this helps for all of you looking for a solution. houstoni
pixel
Yes, I have the same question... but I don't see the solution that was found by one80
Erwin
I have the same problem, can you give the link with your solution please.
mboadi
Thanx alot. It works fine for me but not compatible with pdf. I would like to see a preview of the pdf on mouseover too. Pleas help me fix this. thank you
holdenrussell
You said that you have a link to apply this to more than one image. Do you still have that link? (I don't see it)
junior
eu tenho um blog e eu coloquei esse código em HTML/javascript na apareceu a imagem,so aparece no meu bloco de notas(no bloco de notas esse código dá certo).Eu tenho que adicionar alguma coisa ao HTML da página do blog? obrigado pela atenção
Tyla
I have noticed that many have had the same problem as me and got no reply on how to fix it. The question is HOW DO I APPLY THIS TO MORE THEN ONE IMAGE ON MY PAGE. IT With Regards to this comment: DOES NOT WORK? well here is the answer I found very similar code on another website just use it and it works fine. You can have as many mouseovers on one page as you like.. I hope this helps for all of you looking for a solution. Plea could you give us the link... Thanks
junior
I have a blog and I put this code in HTML / javascript appeared in the image, so it appears on my notepad (notepad in this code works well). I have to add something to the HTML of the blog page? Thank you for your attention
junior
Face the word that the image will appear when the mouse has not incorporated the above text is only two lines below the end of the sentence. to I solve this? See how it looks ..
Gaurav
hii i am using this code its work statically in html but if i am using it in php while loop for many images then its not work ...
so,plz suggest me how i solve this???
saurav
Very Good Intresting If Possible So You Can Send me Another Code Related
durga
this link will be vry usefull to upload multiple images..

logodesignfactory /popup.html.
Mirja
Really great. It was very useful for me. Thanks a lot.
Title: How To Show Picture On Mouseover With Javascript Tutorial [811]
Tags: how to show picture on mouseover with javascript tutorial
By
Comments 53
Visits 51076