Solved

Returned paragraphs as image pop-up help?

Posted on 1998-09-28
9
198 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:guadalupe
9 Comments
 
LVL 2

Expert Comment

by:chrisbolt
ID: 1838193
Nope
0
 

Expert Comment

by:Lycanthrope
ID: 1838194
Wrong...there is a way to do it, at least with IE4, if not all browsers. Open up the question again.
0
 
LVL 3

Author Comment

by:guadalupe
ID: 1838195
A comment added said it was possible.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 28

Expert Comment

by:sybe
ID: 1838196
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
 

Expert Comment

by:Lycanthrope
ID: 1838197
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
 
LVL 3

Author Comment

by:guadalupe
ID: 1838198
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
 
LVL 10

Accepted Solution

by:
MasseyM earned 50 total points
ID: 1838199
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
 
LVL 3

Author Comment

by:guadalupe
ID: 1838200
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
 
LVL 1

Expert Comment

by:phadley
ID: 12760915
CR = '\n'
TAB = '\t'
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question