PDA

View Full Version : Popup window with text



tutu1009
05-12-2009, 06:20 PM
Hello,

Can anyone please tell me how to create a popup window (with text in it) when the cursor is over on an image (see below for the code). I tried "onMouseover" from: http://www.dhtmlgoodies.com/scripts/tooltip_shadow/tooltip_shadow.html
but the text line only appears on the top-left corner (not like those demo which the text is over on the link/textbox).


<TD align=middle width=120><A href="javascript:OpenApple()"><IMG src="images/apple.JPG" border=3</A></TD>
<TD width=20></TD>

Please help! Thankssss!!!

Lily

Ryan Fitton
05-12-2009, 06:53 PM
Hi welcome to Dynamic Drive, you have posted this in the wrong section, the right section for this type of post is Javascript. Although I will try to get this to work.

Just to have a tooltip appear with just text should be like this below:

Place this part of CSS code into the <HEAD> section of your web page:

<style type="text/css">
#dhtmlgoodies_tooltip{
background-color:#EEE;
border:1px solid #000;
position:absolute;
display:none;
z-index:20000;
padding:2px;
font-size:0.9em;
-moz-border-radius:6px; /* Rounded edges in Firefox */
font-family: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;

}
#dhtmlgoodies_tooltipShadow{
position:absolute;
background-color:#555;
display:none;
z-index:10000;
opacity:0.7;
filter:alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
</style>


Place this part of code into the <HEAD> section of your web page:

<SCRIPT type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

Updated: April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes.

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/
var dhtmlgoodies_tooltip = false;
var dhtmlgoodies_tooltipShadow = false;
var dhtmlgoodies_shadowSize = 4;
var dhtmlgoodies_tooltipMaxWidth = 200;
var dhtmlgoodies_tooltipMinWidth = 100;
var dhtmlgoodies_iframe = false;
var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
function showTooltip(e,tooltipTxt)
{

var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;

if(!dhtmlgoodies_tooltip){
dhtmlgoodies_tooltip = document.createElement('DIV');
dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
dhtmlgoodies_tooltipShadow = document.createElement('DIV');
dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';

document.body.appendChild(dhtmlgoodies_tooltip);
document.body.appendChild(dhtmlgoodies_tooltipShadow);

if(tooltip_is_msie){
dhtmlgoodies_iframe = document.createElement('IFRAME');
dhtmlgoodies_iframe.frameborder='5';
dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
dhtmlgoodies_iframe.src = '#';
dhtmlgoodies_iframe.style.zIndex = 100;
dhtmlgoodies_iframe.style.position = 'absolute';
document.body.appendChild(dhtmlgoodies_iframe);
}

}

dhtmlgoodies_tooltip.style.display='block';
dhtmlgoodies_tooltipShadow.style.display='block';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';

var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 10;

dhtmlgoodies_tooltip.style.width = null; // Reset style width if it's set
dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';


dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
dhtmlgoodies_tooltipShadow.style.top = e.clientY + 10 + st + dhtmlgoodies_shadowSize + 'px';

if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth){ /* Exceeding max width of tooltip ? */
dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth + 'px';
}

var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth;
if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;


dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';

if((leftPos + tooltipWidth)>bodyWidth){
dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) + 'px';
dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) + 'px';
}

if(tooltip_is_msie){
dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';

}

}

function hideTooltip()
{
dhtmlgoodies_tooltip.style.display='none';
dhtmlgoodies_tooltipShadow.style.display='none';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none';
}

</SCRIPT>


Place this part of code where you want the link to be in your body section:

<a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Text Here');return false">Roll over me</a>

Ryan Fitton
05-12-2009, 07:08 PM
Sorry I forgot to say, i noticed that you had a link to apple.JPG, if you wanted this inside your tool tip,

Change:

<a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Text Here');return false">Roll over me</a>

To:

<a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'<img src=images/apple.JPG border=3>');return false">Roll over me</a>

tutu1009
05-12-2009, 08:48 PM
Hi Ryan,

Thanks for replying me so fast! :)

The thing still doesn't work... What I'm trying to do is, I have an image in a webpage, and what I want is that when I move the cursor onto the image, I want a popup bubble thingy that contains some text in it. Do you know what I mean? (By the way, the webpage is a .php file, I don't know if it has anything to do with this... Sorry for posting in the wrong section...)

And I have a 2nd question (sorry I'm not really familiar with coding...)

Do I need to remove the following 4 lines when I paste them into head/body?

1. <style type="text/css">
2. </style>
3. <SCRIPT type="text/javascript">
4. </SCRIPT>

Thanks again! :)

Ryan Fitton
05-12-2009, 09:03 PM
Hi again, Ok if you try this, it may work:

<a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Text Here');return false"><img src=images/apple.JPG border=3></a>

The four lines which you mentioned need to stay within the code of your website, if you take these lines out the page will not function probably.

Also I dont know if this will be much help to you but i have attached a txt file, this text file includes all of the HTML code is have used to test if the script works.

Ryan Fitton
05-13-2009, 03:16 PM
I the script still not working as it should?