Jump to content

Show Help Box Coding

gongpex

By gongpex
in JavaScript

Recommended Posts

gongpex Member

gongpex

Posted
Posted

Hello Everyone a few month ago I found show help box menu javascript code like this: 

 <HTML><HEAD><TITLE>Mouseover Help Box</TITLE><script language="JavaScript" type="text/javascript"> var IB=new Object;var posX=0;posY=0;var xOffset=35;yOffset=10;function ShowHelpbox(texte) {  contenu="<TABLE border=0 cellspacing=0 cellpadding=0"+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";  var finalPosX=posX-xOffset;  if (finalPosX<0) finalPosX=0;  if (document.layers) {	document.layers["bulle"].document.write(contenu);	document.layers["bulle"].document.close();	document.layers["bulle"].top=posY+yOffset;	document.layers["bulle"].left=finalPosX;	document.layers["bulle"].visibility="show";} if(document.all) {bulle.innerHTML=contenu;document.all('bulle').style.top=posY + Ypos;document.all('bulle').style.left=finalpos;document.all('bulle').style.visibility="visible";}    else if (document.getElementById) {	document.getElementById("bulle").innerHTML=contenu;	document.getElementById("bulle").style.top=posY+yOffset;	document.getElementById("bulle").style.left=finalPosX;	document.getElementById("bulle").style.visibility="visible";  }}function getMousePos(e) {  if (document.all) {  posX=event.x+document.body.scrollLeft;  posY=event.y+document.body.scrollTop;  }  else {  posX=e.pageX;  posY=e.pageY;  }}function HideHelpBox() {if (document.layers) {document.layers["bulle"].visibility="hide";}if (document.all) {document.all("bulle").style.visibility="hidden";}else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}} function InitHelpBox(ColTexte,ColFond,ColContour,NbPixel) {IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;if (document.layers) {window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");}if (document.all) {document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");document.onmousemove=getMousePos;} else if (document.getElementById) {	   document.onmousemove=getMousePos;	   document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");} } </SCRIPT></HEAD> <BODY> <script language="JavaScript">InitHelpBox("#0000FF","#FFFFFF","#FF0000",1);</SCRIPT>Mouse over ths link below to see what apear<br><BR><a href="#" onMouseOver="ShowHelpbox('<center><img src=\'trustJesus.png\'></center>')" onMouseOut="HideHelpBox()""><img src="Trust-Jesus.png" border="0" /></A><BR> </BODY></HTML>

The results of this script are like this : ilustration.pngBut, when I tried to create it same, but it's not successful and this my code: 

<!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=utf-8" /><title>Untitled Document</title></head> <script language="javascript" type="text/javascript"> var cf =new Object;var posX=0 pos Y=0;var xOffset=70 yOffset=20; function showBox(text) {cont="<TABLE border=0 cellspacing=0 cellpadding=0"+cf.NbPixel+"><TR bgcolor='"+cf.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+cf.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+cf.ColTexte+"'>"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";var finalpos = posX - xOffset;if(finalpos<0) finalpos=0;if(document.layers) {document.layers('box').document.write(cont);document.layers('box').document.close();document.layers('box').top=posY+yOffset;document.layers('box').left=finalpos;document.layers('box').visibility="show";} if(document.all) {box.innerHTML=cont;document.all('box').style.top=posY+yOffset;document.all('box').style.left=finalpos;document.all('box').style.visibility="visible";} else if(document.getElementById) {document.getElementById('box').innerHTML=cont;document.getElementById('box').style.top=posY+yOffset;document.getElementById('box').style.left=finalpos;document.getElementById('box').style.visibility="visible";}} function mousePos(e) {if(document.all) {posX=event.x+document.body.scrollLeft;posY=event.y+document.body.scrollTop;}else {posX=e.pageX;posY=e.pageY;} function hideBox() {if(document.layers) {document.layers['box'].visibility="hide";}if(document.all) {document.all['box'].style.visibility="hidden";}else if(document.getElementById['box'].style.visibility="hidden";}} function initHelp(ColTexte,ColFond,ColContour,NbPixel) {cf.ColTexte=ColTexte; cf.ColFond=ColFond; cf.ColContour=ColContour; cf.NbPixel=NbPixel;if(document.layers) {   window.captureEvents(event.mouseover);window.onmousemove=mousePos;   document.write("<layer name='box' visibility='show'></layer>");}if(document.all) {   document.write("<div id='box' style='position:absolute;top:0;left:0;visibility:visible'></div>");   document.onmousemove=mousePos;}else if(document.getElementById) {   document.onmousemove=mousePos;   document.write("<div id='box' style='position:absolute;top:0;left:0;visibility:visible'></div>");   }}  </script><script type="text/javascript">initHelp("#0000FF","#FFFFFF","#FF0000",1);</script> <body><a href="#" onMouseOver="ShowHelpbox('<center><img src=\'trustJesus.png\'></center>')" onMouseOut="HideHelpBox()""><img src="Trust-Jesus.png" border="0" /></A><BR></body></html>

Please someone tell me where is my wrong,And, If you can give the script more simple or easy please give it to me I'll appreciate it Thank you

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Oh, help me. This code is so outdated. It's using document.layers, and apparently the original coder didn't know that you use a comma, not a semi-colon, to separate arguments of the var statement. This code is really bad. It's using deprecated HTML elements and attributes, and nonexistant Javascript properties. I'd start coding a new one from scratch before using this one. As for your implementation of it, just at a first glance, you're missing a lot of delimiters here and you have a space between "pos" and "Y"

var cf =new Object;var posX=0 pos Y=0;var xOffset=70 yOffset=20;

It should be like this:

var cf = new Object();var posX=0, posY=0;var xOffset=70, yOffset=20;

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Since the purpose of this site is to teach, I won't make any code for you, but I can provide you with the resources so you can learn to make it yourself. The first thing you need to know is how to make functions: http://w3schools.com/js/js_functions.asp Then, inside your functions, you'll be manipulating elements in the document object model. Learn to access and manipulate objects in the HTML DOM tutorial. You'll mainly be changing the display property of the element. In order to call the functions when the mouse interacts with an element, you'll have to work with Javascript event handling. There are several good resources for that:http://w3schools.com/js/js_events.asphttp://www.quirksmode.org/js/introevents.html

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted

If so, can you give me the resources, how to create image or photo slides? please, because I really need it By the way , after I saw your profile, I think you are clever person. where do you come from? are you a Japanese? because your email is: nanye_ingolme@hotmail.com (sorry if my question are private question) Thank you

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

There are a lot of different ways you could make a slideshow, depending on exactly how you want it it can be done in different ways. Maybe you want it to scroll, or to fade. I think jQuery has some slideshow plug-ins. I'm not from Japan, I'm a citizen of the western world. My e-mail address is not from a real language.

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted

I dislike use JQuery except it must indeed to use it,because I must download it from JQuery.com and every version from JQuery can display different results, someday I had ever try using JQuery to create simple slides, I download from jquery.com and I got jquery 1.66, but the results, the image slides not move to left or right, but at bottom and top, after that, I change it using JQuery old version (1.32) and it run successful the western world where? (from country where) what's your occupation?sorry if I rather fussy, because I'm being to look friend thank's

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I referred you to jQuery because something like this requires a little more advanced knowledge of Javascript and it's a lot to explain in one thread. It requires working with event handlers, timing, style and node manipulation. I live in Spain. I don't think I'm the kind of person you would like to have as a friend.

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted

I had try to create help box using this code : 

 <!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=utf-8" /><title>Untitled Document</title> <style type="text/css">body a {text-decoration:none;} #c1 {width:300px;height:150px;border:1px solid #00FF00;}</style></head> <script type="text/javascript">var content="<div id='c1'></div>";function displayResult(){document.getElementById("b1").style.position="absolute"document.getElementById("b1").style.top="75px";document.getElementById("b1").style.left="50px";document.getElementById("b1").style.visibility="visible";document.getElementById("b1").innerHTML=content;}</script></head><body><a href="/../" id="b1" onmouseover="displayResult()" style="visibility:visible;">display</a></body></html>

but the results always only show box, and I cannot insert the text to document (inside the box). Except I put image or text between div taqs , And the text "display" disappear when I directing the mouse over to it, what is still lacking? please help me thank you

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...