/    Sign up×
Community /Pin to ProfileBookmark

onmouseover event, how’s it done?

Copy linkTweet thisAlerts:
Jul 04.2008

Hey Folks,

I came across this onmouseover event in the htmlgoodies.com page, the “links” are double underlined, but I have seen it on other sites and was wondering if there’s a tutorial or an explanation on it. It’s kind of similar to the tooltip by [URL=”http://www.walterzorn.com/tooltip/tooltip_e.htm”]walter zorn[/URL] that I’ve been playing around with to learn how it works.

Any help or advise would be appreciated.

I’ve used Flash to create very simple, similar affects but I want to learn how to do the same with JavaScript, and I’m wondering if it’s possible. I know that Flash’s ActionScript is similar to JavaScript but Flash has the added Canvas interface where one can draw the object to be manipulated…

Peace,
Free-Element

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@cgishackJul 04.2008 — I am not quite sure if this is what you want or not, but here is how you can adda double underline link on hover using CSS

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;style type="text/css"&gt;


a:hover {

<i> </i>border-bottom: 2px double;
<i> </i>line-height: 1.7em;
}


&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;a href="http://www.google.com" &gt; Double underline link &lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@Free-ElementauthorJul 04.2008 — cgishack,

Thank you for your prompt reply.

No that wasn's it, I guess I wasn't very clear, sorry if that was the case...

I was reffering to the little info-window that pops-up on the onmouseover event, that's the little sucker I want to learn about; thanks for the CSS thought though.


Peace

Free-Element
Copy linkTweet thisAlerts:
@cgishackJul 04.2008 — Here is a sample i whiped up.

its small enough you can maybe understand the basic concepts.

The code is pretty crude, but you will get the idea..

Basically, hide and show divs then position them based on where the mouse is

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;style type="text/css"&gt;

.hiddenTipDiv
{
position:absolute;
top:-100px;
left: -100px;
display:none;
border:solid 1px #000000;
background-color:#FFFFCC;
padding:10px;
}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;


function ShowTip(e,el,tipDivID)
{
el.onmouseout = function() { tip.style.display = "none"; } //register mouseout event
var XY = getXY(e); // get mouse XY
var tip = document.getElementById(tipDivID);
tip.style.top = XY.y + "px"; //position
tip.style.left = XY.x + "px";
tip.style.display = "block";//show tip
}

function getXY(e)
{
var x,y;
e = e || window.event;
if (navigator.appName.indexOf('Microsoft') != -1)
{
var parent = e.srcElement;
x=e.clientX + document.body.scrollLeft;
y=e.clientY + document.body.scrollTop;
}
else
{
x =e.pageX
y= e.pageY
}
var XY = new Object();
XY.x = x;
XY.y = y;
return XY;
}


&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;


This is a test to see if the &lt;a href="http://www.google.com" onmouseover="ShowTip(event,this,'tipDiv1')"&gt;tips&lt;/a&gt; work

&lt;div id="tipDiv1" class="hiddenTipDiv"&gt; This is the tip. It is a div hidden in the page &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;



Drew
Copy linkTweet thisAlerts:
@Free-ElementauthorJul 04.2008 — cgishack,

You just whipped this up? Are you @*&$+!^ me? Dude?!!

I haven't had a chance to actually go over it yet, my kids are hungry and I promised them I'de take a break an hour ago so...

But Thank YOU, I'll dive right into it later tonight and see if I can make heads or tales out of it.

Thanks again.


Peace,

Free-Element
Copy linkTweet thisAlerts:
@cgishackJul 04.2008 — Yep. Just whipped it up ?

once you do it enough you can write things fast.

There are probably better ways to do it so you do not require a separate div for each tip, but depending on your needs this might be what you want.

The sample is just the general methods to get the job done. Some other pieces are probably required to make it a little better.

let me know if you need help expanding it.
Copy linkTweet thisAlerts:
@Declan1991Jul 04.2008 — This is my preferred version.&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Popup&lt;/title&gt;
&lt;style type="text/css"&gt;
.popup {
text-decoration:underline;
}
.popup span {
position:absolute;
display:none;
border:solid 1px #000000;
background-color:#FFFFCC;
padding:10px;
text-decoration:none;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var popupinit = function(){
var addEvent,getXY;
if (window.addEventListener) {
addEvent = function(e,t,h){
e.addEventListener(t,h,false);
};
getXY = function(e) {
return {"x":(e.pageX),"y":(e.pageY)};
};
}
else if (window.attachEvent) {
addEvent = function(e,t,h){
e.attachEvent("on"+t,h);
e = null;
};
getXY = function(e) {
return {"x":(e.clientX + document.body.scrollLeft),"y":(e.clientY + document.body.scrollTop)};
};
}
else {
return false;
}
var els = document.getElementsByTagName("*"), i = els.length,el;
while (i--) {
el = els[i];
if (/(^|s+)popup($|s+)/.test(el.className)) {
(function(e){
var span = e.getElementsByTagName("span");
span = span[span.length-1];
addEvent(e, "mouseover", function(ev) {
ev = ev||window.event;
var XY = getXY(ev);
span.style.top = XY.y + "px"; //position
span.style.left = XY.x + "px";
span.style.display = "block";//show tip
});
addEvent(e,"mouseout",function() {
span.style.display="none";
});
})(el);
}
}
};
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
This is a test to see if the &lt;span class="popup" href="http://www.google.com"&gt;tips&lt;span&gt; This is the tip. It is a div hidden in the page &lt;/span&gt;&lt;/span&gt; work.
Simply &lt;span class="popup"&gt;add&lt;span&gt;a class of popup to the tag&lt;/span&gt;&lt;/span&gt;
&lt;script type="text/javascript"&gt;
popupinit();
&lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @Free-Element spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...