Javascript Onmouseover Show Small Windows Then Hide
Posted On Fri Nov 07, 2008 By hostman In Javascipt Forums And Other Related Topics Discussion About Javascript Progamming Forums
man today i wanted to create a small javascript where if the user put their mouse arrow on an image, i want it to show a little popup window to show a message, but i didnt want an alert, i wanted a div included with css. so this is the only thing i could come up with, i hope this helps you.
if you want to see it in action, just put your mouse over the little question mark image below. hopefully that works for you. if you have a better script please tell me
here is the code i use to make this happen:
Javascript Code:
check out my example, just put your mouse over the question mark image:
if you want to see it in action, just put your mouse over the little question mark image below. hopefully that works for you. if you have a better script please tell me
here is the code i use to make this happen:
Javascript Code:
<style type="text/css">
<!--
.box {
background-color: #F4F4F4;
border: 1px solid #CCC;
height: 100px;
width: 200px;
padding: 5px;
display:none;
position:absolute;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideText(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowText(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
<span
onmouseover="ShowText('Message'); return true;"
onmouseout="HideText('Message'); return true;"
href="javascript:ShowText('Message')">
<img src="http://www.wallpaperama.com/forums/post-images/20081107_6718_question-mark.gif">
</span>
<div
id="Message"
class="box"
>
You can find good wallpapers at wallpaperama.com plus stuff to get your wallpaper website going
</div>
<!--
.box {
background-color: #F4F4F4;
border: 1px solid #CCC;
height: 100px;
width: 200px;
padding: 5px;
display:none;
position:absolute;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideText(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowText(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
<span
onmouseover="ShowText('Message'); return true;"
onmouseout="HideText('Message'); return true;"
href="javascript:ShowText('Message')">
<img src="http://www.wallpaperama.com/forums/post-images/20081107_6718_question-mark.gif">
</span>
<div
id="Message"
class="box"
>
You can find good wallpapers at wallpaperama.com plus stuff to get your wallpaper website going
</div>
check out my example, just put your mouse over the question mark image:
You can find good wallpapers at wallpaperama.com plus stuff to get your wallpaper website going
MrBombastic Thu Apr 12, 2012
thanks man!
Rashid Fri Apr 06, 2012
This is very good,, thanks for provide it as public. :),,
Greg Tue Feb 28, 2012
nice one.. neat n clean code, I am planning on using it on ikteo-istia and radio-stati if you have no problem with that..
m8k6 Wed Feb 22, 2012
Was exactly what I was looking for to give help tips within my websites dropdown menu (nestle it inside the <a> tag with an align of right, looked perfect, also tossing a z-index into the CSS fixes it shifting under objects incase anyone else ran into that.
LEK Fri Aug 05, 2011
thank so much I will try it in my blog
D.K Wed Jul 13, 2011
This is very goo code i am try and its work properly
karipparasunil Sat Aug 14, 2010
Hi
Very Good Code for me.
If you incloe Click to select all code in the javascript ;copying procewss wiil be easier.Any way thanking you
Is there any tutorials to learn javascript ?
Plse inform me.
Thanking u
Very Good Code for me.
If you incloe Click to select all code in the javascript ;copying procewss wiil be easier.Any way thanking you
Is there any tutorials to learn javascript ?
Plse inform me.
Thanking u
sdfsdfs Tue Jul 13, 2010
Nice thanks! Helped a lotNice thanks! Helped a lotNice thanks! Helped a lotNice thanks! Helped a lotNice thanks! Helped a lotNice thanks! Helped a lot
milu Mon Jul 05, 2010
thanks a ton for this code, helped me alot. cheers and keep up the good work.
Bill Thu Jun 03, 2010
Hi Hostman....I have a webpage here anchor-physica that I am trying to use this mouseover script with each of the images. Could you help or direct me to a code for the multiple images. Thanks
Rafael Sat May 08, 2010
Great script. I did put it to work in this rabrice-rh.homeip.net/pan But it does not work in other browser but FireFox.
Deb Tue May 04, 2010 
Thank you, thank you, thank you! I have been trying to figure out how to do this for hours!
nishith Mon May 03, 2010
Really find helpful...thanks for this
keep it on
keep it on
Yoowraj Mon Apr 26, 2010
Hi,
this is really good script for popup where i can put text box and some of text also
thank you for this and best of luck for future...Youwraj
this is really good script for popup where i can put text box and some of text also
thank you for this and best of luck for future...Youwraj
surya Fri Jan 29, 2010
it look's great ..very helpful thanks a lot.......
Related Content
Information
Forums »
Javascipt Forums And Other Related Topics Discussion About Javascript Progamming »
Javascript Onmouseover Show Small Windows Then Hide
Javascipt Forums And Other Related Topics Discussion About Javascript Progamming »
Javascript Onmouseover Show Small Windows Then Hide
Title: Javascript Onmouseover Show Small Windows Then Hide
Description: man today i wanted to create a small javascript where if the user put their mouse arrow on an image, i want it to show a little popup window to show a message, but i didnt want an alert, i wanted a div included with css
Tags: javascript ,sample ,code ,div ,css ,hide ,show ,click
Info: This Post Has Been Viewed 0 Times Since
Date: Fri Nov 07, 2008
Author hostman Received 38 Replies #810
Date: Fri Nov 07, 2008
Author hostman Received 38 Replies #810
Share
URL: 
Embed:
To embed this topic, just copy the code from the "Embed" box. Once you've copied the code, just paste it into your website or blog to embed it
BBCODE::
BBCODE is use on forums. You can put this code on all your BBCODE enabled forums like PhpBB, vBulletin® and others. Just Copy and Paste this code on your Posts and Replies on your forums
wallpaperama | Wallpapers | Forums | Terms Of Service
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5