Returned paragraphs as image pop-up help?

Is is possible to place "returns" in the text alt section of an image so that the "pop up help" which appears naturally when the mouse is rested upon the image appears as a paragraph?
LVL 3
guadalupeAsked:
Who is Participating?
 
MasseyMCommented:
I don't have an answer for inserting the returns in the tool tips, but for 4.x browsers, here are some good resources:

http://www.insidedhtml.com/tips/elements/ts10/page1.asp

Below is the one I use (It is their example from their site):
I got this from http://www.webreference.com/js/column16/

<HTML>
<HEAD>
<TITLE>Title Here</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;

function clearEl() {}

// -->
</SCRIPT>
</HEAD>
<BODY>



<A HREF="/"
   onMouseOver="if (NS4 || IE4) activateEl('home', event)"
   onMouseOut="clearEl()">home</A> /
<A HREF="/experts/"
   onMouseOver="if (NS4 || IE4) activateEl('experts', event)"
   onMouseOut="clearEl()">experts</A> /
<A HREF="/js/"
   onMouseOver="if (NS4 || IE4) activateEl('javascript', event)"
   onMouseOut="clearEl()">javascript</A> / column16



<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2">
var style = ((NS4 && document.test) || IE4) ? 1 : 0;
var timerID = null;
var padding = 3; // < 4 recommended
var bgcolor = "beige";
var borWid = 2; // for no border, assign null
var borCol = "#0000cc";
var borSty = "solid";
var str = "<STYLE TYPE='text/css'>";
str += ".tooltip {";
str += "position: absolute;";
str += "visibility: hidden;";
str += "left: 0; top: 0;";
if (borWid > 0) { // if a border is specified
  str += "border-width: " + borWid + ";";
  str += "border-color: " + borCol + ";";
  str += "border-style: " + borSty + ";";}
if (NS4) {
  if (borWid > 0 && padding <= 3) {
    str += "padding: 0;";
    str += "layer-background-color: " + bgcolor + ";";
  } else if (borWid > 0 && padding > 3) {
    str += "padding: " + (padding - 3) + ";";
    str += "background-color: " + bgcolor + ";";  } else if (borWid == 0) {
    str += "padding: " + padding + ";";
    str += "layer-background-color: " + bgcolor + ";";
  }
} else {
  str += "padding: " + padding + ";";
  str += "background-color: " + bgcolor + ";";
}
str += "}";
str += "</STYLE>";

if (style) {
  document.write(str);
  if (NS4) window.onload = init;
}

makeEl("home", 300, "A web site about creating web sites. With thousands of select, annotated links, hourly web news, noted columnists, and free services this is webmaster <I>nirvana</I>.");
makeEl("experts", 300, "Let our leading experts keep you up to date with the latest developments, featuring the columns you need. Each is a respected author in their chosen field.");
makeEl("javascript", 300, "A JavaScript how-to column with biweekly prescriptions, that are sure to improve your JavaScript health. Shows readers how to utilize the latest JavaScript features.");

function init() {
  setTimeout("window.onresize = redo", 1000);
}

function redo() {
  window.location.reload();
}

function makeEl(id, width, code) {
  if (!style) return;
  var str = "<STYLE TYPE='text/css'>";
  str += "#" + id + " {";
  str += "width: " + width + ";";  str += "}";
  str += "</STYLE>";
  str += "<DIV CLASS='tooltip' ID='" + id + "'>" + code + "</DIV>";
  document.write(str);
}

function displayEl(left, top) {
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
  var whichEl = (NS4) ? document[active] : document.all[active].style;  whichEl.left = left;  whichEl.top = top;
  whichEl.visibility = (NS4) ? "show" : "visible";
}

function clearEl() {
  if (!style) return;
  var whichEl = (NS4) ? document[active] : document.all[active].style;
  whichEl.visibility = (NS4) ? "hide" : "hidden";
  active = null;
  if (timerID) clearTimeout(timerID);
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
}

function activateEl(id, e) {
  if (!style) return;
  active = id;
  if (NS4) document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = checkEl;
  checkEl(e);
}

function checkEl(e) {
  if (timerID) clearTimeout(timerID);
  var left = (NS4) ? e.pageX : event.clientX + document.body.scrollLeft;
  var top = (NS4) ? e.pageY + 20 : event.clientY + document.body.scrollTop + 20;
  timerID = setTimeout("displayEl(" + left + ", " + top + ")", 300);}
// </SCRIPT>
</BODY>
</HTML>
0
 
chrisboltCommented:
Nope
0
 
LycanthropeCommented:
Wrong...there is a way to do it, at least with IE4, if not all browsers. Open up the question again.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
guadalupeAuthor Commented:
A comment added said it was possible.
0
 
sybeCommented:
It is possible using javascript:

<script>
document.write("<img src='test.gif' width=100 height=100 border=0 alt='first line" + unescape("%0A") + "second line'")

</script>

0
 
LycanthropeCommented:
Javascript isn't necessary, and you may need the carriage return. Do this:

<img src="myimg.jpg"
alt="first line&#13;&#10;second line&#13;&#10;third line">

&#13; is a carriage return and &#10; is a linefeed.

*sigh* What is the point of points, anyhow?
0
 
guadalupeAuthor Commented:
Well both suggestion work, but only for IE.  Any suggestions for how to get the same results in Netscape.  A universal solution would obviously be the best but if thats no possible then just one that works in Netscape and I can always doc.write in the write on with an if/else.

Thanks!!
0
 
guadalupeAuthor Commented:
Wow!  Now thats an answer ......

and a pain in the %&@*!.  But thank you, I just wasn´t expecting so much code but then again I wasn´t expecting to have to make my own tool tips.  However there seems to be an error in lines 79 and 23.  IE returns the a "chain constante without terminator" (I´m translating from spanish so it may not be exactly the same in eng.) for line 79 and "object expected" at line 23???   Netscape doesn't give any errors but nothing happens either.  Help??  

Thanks!
0
 
phadleyCommented:
CR = '\n'
TAB = '\t'
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.