bubble tips like "snap shots" or "ContentLink"

Forum Moderators: not2easy

Message Too Old, No Replies

bubble tips like "snap shots" or "ContentLink"

bubble tips for text tag definition

techtheatre

5:15 am on May 12, 2007 (gmt 0)

Can anyone point me in the right direction to do a "bubble tip" similar to those at Snap Shots (link preview) or ContentLink (ads)? I am setting up a FAQ list of definitions on a site and I want a mouseover of one of my words to display the contents of a particular definition html file. I have defined the terms and put each in a separate file (includes images in some)...so i just want to make an inline popup (only during mouseover) that can contain some static content including image(s)...

Any thoughts? Thanks!

Marshall

6:54 am on May 12, 2007 (gmt 0)

Put this script in <HEAD>


<script type="text/javascript" language="JavaScript"> 
<!--  
function HideContent(d) {  
if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; }  
function ShowContent(d) {  
if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; }  
function ReverseContentDisplay(d) {  
if(d.length < 1) { return; }  
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }  
else { document.getElementById(d).style.display = "none"; }  
}  
//-->  
</script>

Create <DIV> in CSS:


<div id="UNIQUEID" class="CLASS"> 
IMAGE OR TEXT HERE<br> 
</div>

Use this as your link:


<a onmouseover="ShowContent('UNIQUEID'); return true;" onmouseout="HideContent('UNIQUEID'); return true;" href="IMAGE_HERE" target="_blank">CURSE OVER LINK HERE</a>

Wher I put "IMAGE_HERE" in the href=, you can make that an actual link. Just remember, each <DIV> has to have a unique ID. With this, you can use as many per page as you want.

Marshall

5:13 pm on May 12, 2007 (gmt 0)

I forgot this part for the css:


<style type="text/css"> 
div.CLASS { 
border:10px ridge #0000FF; 
display: none; /* this is a must */ 
position: absolute; /* this is a must */ 
background-color: #000000;  
padding: 10px; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #FFFFFF; 
text-align: center; 
} 
</style>

techtheatre

2:13 am on May 13, 2007 (gmt 0)

THANKS! This works great. What if i wanted to "float" the message tip and have it hover beside (or above...whatever) the link? WOuldn't i have to position the DIV explicitly with the method you gave?

Marshall

3:52 am on May 13, 2007 (gmt 0)

This code will cause a <DIV> to float with the cursor:
Enter in <HEAD>


<script type="text/javascript" language="JavaScript"> 
<!-- Copyright 2006 Bontrager Connection, LLC 
var cX = 0; var cY = 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) { 
d.style.left = (cX+10) + "px"; 
d.style.top = (cY+10) + "px"; 
} 
function HideContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "none"; 
} 
function ShowContent(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>

Use the same CSS for the <DIV> as before as well as the same <a onmouseover......></a>

In the following two lines of the script, you can change the value of the numbers in the (cx+10) and (cy+10), but don't make make them too high. Also, don't make the <DIV> too large, it won't float right. Almost forgot, you can make the (cx) and (cy) negative values too: (cx-10) or (cy-10). It all depends where you want the float to appear in relation to the cursor.

[edited by: Marshall at 4:04 am (utc) on May 13, 2007]

techtheatre

4:43 am on May 13, 2007 (gmt 0)

I am now getting an error from javascript as soon as i mouse-over the link. also, the div is not hidden upon pageload (but it was before...?). I am using IE7.

Here is my current complete page source:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>test page</title>

<script type="text/javascript" language="JavaScript">  </script>

<style type="text/css">
div.FAQ { color: #336633; font-weight: bold; font-size: 12px; font-family: Arial, sans-serif; background-color: #ffffcc; text-align: center; padding: 10px; border: solid 1px; position: absolute; display: none }
#UNIQUEID { background-color: #ffc; position: absolute; top: 0px; left: 0px; visibility: visible; display: block }
</style>
</head>

<body bgcolor="#ffffff">
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<a onmouseover="ShowContent('UNIQUEID'); return true;" onmouseout="HideContent('UNIQUEID'); return true;" href="#" target="_self">LINK</a>
<div id="UNIQUEID" class="FAQ">IMAGE OR TEXT HERE<br> </div>
<p></p>
</body>
</html>

Marshall

5:12 am on May 13, 2007 (gmt 0)

First, your css has to be this:

#UNIQUEID { background-color: #ffc; position: absolute; display: none }

postion: absolute and display: none are the critical elements. Do not add z-index or left and top px.

Second, the scipt cannot be in one line (don't ask me why). As you see it dislay here is how it has to appear in the <HEAD>
<script type="text/javascript" language="JavaScript">

</script>

techtheatre

5:34 am on May 13, 2007 (gmt 0)

THANKS! It is working great! I don't know where the extra stuff (z-index or left and top px) came from...i am using an editor, so i guess it injected that stuff...i have switched back to source-only view.

This was very helpful. Thank you VERY much!

Marshall

5:48 am on May 13, 2007 (gmt 0)

Here's a neat tip too. Change the cursor when then mouse the link to a question mark. In CSS:

.dlink {
cursor: help
}

I use "dlink" as I have some D Links on my site, but obviously you can call it what you want.

Xapti

6:50 pm on May 13, 2007 (gmt 0)

He posted in a CSS section... wouldn't it be best to give a CSS solution?
I'm not sure if IE would support such a thing very well though.

Marshall

7:25 pm on May 13, 2007 (gmt 0)

It does. And CSS won't do it alone that I know of.

[edited by: Marshall at 7:46 pm (utc) on May 13, 2007]