PDA

View Full Version : Tooltip text in all browsers


codaphobic
12-04-2006, 02:24 PM
I am using an image as a hypertext link. What I want to do is to display a standard tooltip text on the image. I mistakingly used the 'alt' attribute to do this. To my dismay I found this works in IE but not in Netscape, Firefox, Opera etc. I then found out that I should use the 'title' attribute instead. I did this and it solved the problem just to leave me with another problem. DW now keeps on reminding me that Netscape 6 does not recognize the attribute 'title'. I also know that Netscape 6 is not a browser that is about much anymore but in the meantime I am stuck with these horrible red lines in my code. Any advice anyone? Thanks.

domedia
12-04-2006, 02:47 PM
You're stuck with it until you remove NN6 as a target browser. Here' s how you can change your target browsers:

Open your page in Dreamweaver.
On the Document toolbar, click the Check Browser button to the right of the title field.
From the Check Browser menu, select Settings. The Target Browsers dialog opens.
In the Target Browsers dialog, select the minimum version of each browser you want to use for testing your pages. Click OK to save your settings and close the dialog.

codaphobic
12-04-2006, 03:44 PM
It sounds so simple when you know how. Thanks a lot.

davidj
12-04-2006, 04:02 PM
Eh I have just written a tooltip script for you (rather than using the alt's)
Shucks.

Oh well here it is anyway. Its a hack really from another script i had used before

page1.htm

I have 2 images used in the example -
Images/BMW Z4.jpg
Images/15_50_46_web.jpg

Replace these lines with images you have.

On the MouseOver event i have onMouseOver="ToolTip('This is a Z4');
This is where the text is defined for each image. Amend where needed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" src="tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id="Layer1" style="position:absolute; background-color: #FFFF66; layer-background-color: #FFFF66; border: 1px none #000000; visibility: hidden;" ><div id="text"></div></div>
<p><img src="Images/BMW Z4.jpg" width="346" height="166" onMouseOver="ToolTip('This is a Z4');MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">

</p>
<p><img src="Images/15_50_46_web.jpg" width="352" height="187" onMouseOver="ToolTip('This is a beach');MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')" /></p>
</body>
</html>


save as tooltip.js (to be placed in the same dir as the first page)


<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function ToolTip(message){
var offSetY = 0;
var offSetX = 30;
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}

st = document.getElementById('Layer1').style;
txt = document.getElementById('text');

st.top = tempY + "px";
st.left = tempX + offSetX + "px";

st.width = 200;
st.height = 25;

txt.innerHTML = message;

return true
}
}
//-->

domedia
12-04-2006, 04:20 PM
Yes, just a basic tooltip is already covered in the HTML standard by the attribute 'title'.

The times I've wanted something more advanced, like in davidj's example, I've utilized a script that uses the DOM to grab what's already in the title attribute and output the content a little fancier.

codaphobic
12-04-2006, 04:20 PM
At cellular level, you're actually quite smart. I am going to give this a try. Thanks. It would appear that I have stumbled upon a forum that is definitely the place to be....