Adding an HTML page with Javascript into a WordPress template page.
-
Hi! I have an HMTL page with a lengthy Javascript that I manually built on my old website: http://www.hoss.shottinnovation.com/TESTING.html
It’s a learning tool for kids to learn bike parts…
and I would like to insert that page into a page on my new website which is a WordPress with a theme template (http://www.mountainbikeontario.ca/fun-stuff).
I tried just cutting & pasting the HTML code into the WordPress page using the “Text” tab option…but it doesn’t work. The image appears (I did relocate the image onto the new site) but the Javascript doesn’t seem to work.
I’ve read that the Javascript needs to be “enqueued” but my page is currently an HTML file, not a “.js” file (and can’t be saved as such without syntax errors).
Any help would be greatly appreciated!Here’s the code for my HTML page:
<!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”>
/*<![CDATA[*/
.tooltip {
position:absolute;z-Index:101;left:-3000px;top:300px;width:175px;height:20px;background-Color:#FFFFFF;border:solid red 2px;text-Align:center;
}.img {
position:absolute;left:200px;top:30px;width:800px;height:600px;border-Width:0px;
}/*]]>*/
</style>
</head><body>
<!–This is original image you’d like to map–>
<img id=”img1″ class=”img” src=”images/Mountain Bike.png” alt=”MTB”
usemap=”#ImageMap1″ ismap=”ismap” />
<map name=”ImageMap1″ id=”map1″ >
<area shape=”poly” coords=”177,116,201,133,215,132,245,121,287,124,294,121,286,109,271,105,246,103,215,92,202,94,179,105″ href=”#” alt=”saddle” class=”tt1″/>
<area shape=”poly” coords=”227,135,242,131,250,138,263,172,252,177,240,144″ href=”#” alt=”seat post” class=”tt2″ />
<area shape=”poly” coords=”241,182,247,188,268,182,265,174″ href=”#” alt=”seat clamp” class=”tt3″ />
<area shape=”poly” coords=”273,198,278,218,481,189,476,168″ href=”#” alt=”top tube” class=”tt4″ />
<area shape=”poly” coords=”255,191,268,187,320,330,307,329″ href=”#” alt=”seat tube” class=”tt5″ />
<area shape=”circle” coords=”168,324,28″ href=”#” alt=”cassette” class=”tt6″ />
<area shape=”poly” coords=”151,297,157,285,166,277,177,277,187,278,199,266,209,268,211,273,194,290,182,297,169,294″ href=”#” alt=”rear disk brake” class=”tt7″ />
<area shape=”poly” coords=”209,296,214,308,217,319,215,329,209,336,201,342,191,342,198,328,196,314,194,309″ href=”#” alt=”rear disk brake” class=”tt8″ />
<area shape=”poly” coords=”186,299,250,240,271,240,277,259,256,252,193,307″ href=”#” alt=”seat stay” class=”tt9″ />
<area shape=”poly” coords=”216,308,220,315,260,317,291,309,291,299,284,300,262,309″ href=”#” alt=”chain stay” class=”tt10″ />
<area shape=”poly” coords=”143,342,151,349,153,355,162,354,170,353,181,358,178,375,185,385,180,391,164,389,168,367,151,366,139,359,138,346″ href=”#” alt=”rear deraillieur” class=”tt11″ />
<area shape=”poly” coords=”314,333,306,339,295,350,294,357,305,356,294,367,295,375,318,397,303,399,291,390,281,380,274,366,272,351,276,341,283,334,296,330″ href=”#” alt=”chain ring” class=”tt12″ />
<area shape=”poly” coords=”295,368,342,417,356,415,305,360″ href=”#” alt=”crank” class=”tt13″ />
<area shape=”poly” coords=”332,415,363,419,348,444,330,444,315,437″ href=”#” alt=”pedal” class=”tt14″ />
<area shape=”poly” coords=”192,250,160,235,134,237,111,248,111,263,117,278,115,289,103,289,111,318,133,310,141,293,150,275″ href=”#” alt=”spokes” class=”tt15″ />
<area shape=”poly” coords=”191,387,270,377,272,381,187,393″ href=”#” alt=”chain” class=”tt16″ />
<area shape=”poly” coords=”222,255,218,260,177,236,140,230,114,240,101,256,95,272,95,296,108,332,135,370,159,388,187,399,218,401,245,388,259,387,237,404,212,410,188,409,164,400,139,384,118,361,100,338,87,307,84,277,89,252,102,236,121,225,136,222,157,222,179,228,201,239″ href=”#” alt=”rim” class=”tt17″ />
<area shape=”poly” coords=”234,233,201,214,168,201,129,201,105,212,87,224,74,244,66,277,72,308,77,330,94,356,114,379,136,402,177,423,215,429,241,424,264,408,279,391,263,388,248,400,229,410,207,414,185,411,158,400,132,381,112,361,95,333,86,311,83,289,84,262,93,244,105,233,121,223,140,220,161,221,179,225,198,234,212,242,225,249″ href=”#” alt=”tire”class=”tt18″ />
<area shape=”poly” coords=”297,237,301,257,312,297,324,328,336,311,331,291,324,266,321,237″ href=”#” alt=”rear shock” class=”tt19″ />
<area shape=”rect” coords=”98,268,109,282″ href=”#” alt=”valve” class=”tt20″ />
<area shape=”poly” coords=”194,350,188,371,189,383,246,375,256,338,222,334″ href=”#” alt=”spokes” class=”tt21″ />
<area shape=”poly” coords=”326,330,341,347,491,214,476,193″ href=”#” alt=”down tube” class=”tt22″ />
<area shape=”poly” coords=”486,225,520,204,529,206,548,277,576,363,561,374,552,386,549,400,553,417,567,438,556,443,552,438″ href=”#” alt=”fork” class=”tt23″ />
<area shape=”poly” coords=”477,165,494,212,509,206,494,160″ href=”#” alt=”head tube” class=”tt24″ />
<area shape=”poly” coords=”554,78,565,86,578,82,574,70″ href=”#” alt=”front brake lever” class=”tt25″ />
<area shape=”poly” coords=”544,81,553,79,565,90,562,99,547,104,539,94″ href=”#” alt=”shifter” class=”tt26″ />
<area shape=”poly” coords=”471,144,480,151,476,160,510,140,523,127,533,112,544,79,545,61,540,56,530,64,529,86,522,106,514,117,498,132″ href=”#” alt=”handlebars” class=”tt27″ />
<area shape=”poly” coords=”429,161,427,172,438,173,474,161,477,153,469,145″ href=”#” alt=”grip” class=”tt28″ />
<area shape=”poly” coords=”505,119,502,131,477,142,457,142,469,131,484,127,491,130″ href=”#” alt=”stem” class=”tt29″ />
<area shape=”poly” coords=”506,145,508,161,479,160″ href=”#” alt=”rear brake lever” class=”tt30″ />
<area shape=”poly” coords=”582,386,569,423,574,437,584,427,596,390″ href=”#” alt=”hub” class=”tt31″ />
<area shape=”poly” coords=”578,367,566,374,555,386,552,402,555,415,561,425,567,426,580,385,585,384,597,388,600,393,585,436,605,437,622,425,629,413,627,394,616,380,601,370,589,366″ href=”#” alt=”front disk brake” class=”tt32″ />
<area shape=”circle” coords=”286,323,7″ href=”#” alt=”chain tensioner” class=”tt33″ />
<area shape=”poly” coords=”613,490,623,488,631,498,616,502″ href=”#” alt=”valve” class=”tt34″ />
<area shape=”poly” coords=”511,333,487,365,485,401,505,446,530,473,573,494,606,496,607,482,629,479,638,492,684,457,690,424,682,396,667,364,634,342,596,323,577,324,583,357,613,369,631,389,636,410,627,429,605,446,580,446,555,452,543,440″ href=”#” alt=”spokes” class=”tt35″ />
<area shape=”poly” coords=”492,298,473,311,452,335,444,360,439,393,451,436,468,468,517,512,564,531,613,538,650,534,692,516,718,492,734,461,738,408,729,382,712,350,692,327,663,303,634,290,600,281,561,279,566,302,632,318,664,335,681,352,701,379,715,411,715,433,710,460,691,487,659,509,629,516,598,518,569,513,542,503,516,488,485,458,468,430,462,402,463,379,464,362,475,340,489,327,500,319″ href=”#” alt=”tire” class=”tt36″ />
<area shape=”poly” coords=”502,322,510,329,489,346,479,368,476,394,483,429,496,451,517,473,543,487,567,498,591,503,615,505,632,503,652,494,675,480,693,458,698,435,698,415,692,392,683,375,663,351,643,337,627,330,608,322,589,317,566,316,564,306,589,309,622,317,649,329,667,341,681,354,693,372,705,392,711,415,712,441,706,461,698,474,685,488,667,501,654,508,631,514,610,515,587,513,564,508,543,500,525,490,507,476,487,457,472,429,466,405,465,382,467,362,475,345,487,330″ href=”#” alt=”rim” class=”tt37″ />
<area shape=”poly” coords=”311,341,298,351,305,354,309,360,320,371,329,363,327,352,320,343″ href=”#” alt=”bottom bracket” class=”tt38″ />
<area shape=”poly” coords=”328,349,331,365,323,372,337,389,343,376,342,357″ href=”#” alt=”chain ring” class=”tt39″ /></map>
<div id=”tt1″ class=”tooltip” >Saddle</div>
<div id=”tt2″ class=”tooltip” >Seat Post</div>
<div id=”tt3″ class=”tooltip” >Seat Clamp</div>
<div id=”tt4″ class=”tooltip” >Top Tube</div>
<div id=”tt5″ class=”tooltip” >Seat Tube</div>
<div id=”tt6″ class=”tooltip” >Cassette</div>
<div id=”tt7″ class=”tooltip” >Rear Disk Brake</div>
<div id=”tt8″ class=”tooltip” >Rear Disk Brake</div>
<div id=”tt9″ class=”tooltip” >Seat Stay</div>
<div id=”tt10″ class=”tooltip” >Chain Stay</div>
<div id=”tt11″ class=”tooltip” >Rear Deraillieur</div>
<div id=”tt12″ class=”tooltip” >Chain Ring</div>
<div id=”tt13″ class=”tooltip” >Crank</div>
<div id=”tt14″ class=”tooltip” >Pedal</div>
<div id=”tt15″ class=”tooltip” >Spokes</div>
<div id=”tt16″ class=”tooltip” >Chain</div>
<div id=”tt17″ class=”tooltip” >Rim</div>
<div id=”tt18″ class=”tooltip” >Tire</div>
<div id=”tt19″ class=”tooltip” >Rear Shock</div>
<div id=”tt20″ class=”tooltip” >Valve</div>
<div id=”tt21″ class=”tooltip” >Spokes</div>
<div id=”tt22″ class=”tooltip” >Down Tube</div>
<div id=”tt23″ class=”tooltip” >Fork</div>
<div id=”tt24″ class=”tooltip” >Head Tube</div>
<div id=”tt25″ class=”tooltip” >Front Brake Lever</div>
<div id=”tt26″ class=”tooltip” >Shifter</div>
<div id=”tt27″ class=”tooltip” >Handlebars</div>
<div id=”tt28″ class=”tooltip” >Grip</div>
<div id=”tt29″ class=”tooltip” >Stem</div>
<div id=”tt30″ class=”tooltip” >Rear Brake Lever</div>
<div id=”tt31″ class=”tooltip” >Hub</div>
<div id=”tt32″ class=”tooltip” >Front Disk Brake</div>
<div id=”tt33″ class=”tooltip” >Chain Tensioner</div>
<div id=”tt34″ class=”tooltip” >Valve</div>
<div id=”tt35″ class=”tooltip” >Spokes</div>
<div id=”tt36″ class=”tooltip” >Tire</div>
<div id=”tt37″ class=”tooltip” >Rim</div>
<div id=”tt38″ class=”tooltip” >Bottom Bracket</div>
<div id=”tt39″ class=”tooltip” >Chain Ring</div><script type=”text/javascript”>
function Init(){
zxcMapToolTip.init({
ImageID:’img1′, // the unique ID name or the map image parent DIV. (string)
MapID:’map1′, // the unique ID name of the image map. (string)
Mode:’move’, //(optional) the mode of execution, ‘click’ or ‘click’. (string, default = ‘click’)
AutoHide:500, //(optional) the auto hide delay in milli seconds. (number, default = 1000)
XOffset:5, //(optional) the x offset from the mouse. (number, default = 10)
YOffset:5, //(optional) the y offset from the mouse. (number, default = 10)
FadeDuration:500 //(optional) the auto hide delay in milli seconds. (number, default = no fade)
});}
if (window.addEventListener){
window.addEventListener(‘load’,Init, false);
}
else if (window.attachEvent){
window.attachEvent(‘onload’,Init);
}// Functional Code.
var zxcMapToolTip={
init:function(o){
var id=o.ImageID,mde=o.Mode,hide=o.AutoHide,ms=o.FadeDuration,xx=o.XOffset,yy=o.YOffset,map=document.getElementById(o.MapID),fimg=document.getElementById(id),as=map.getElementsByTagName(‘AREA’),mde=typeof(mde)==’string’&&mde.charAt(0).toUpperCase()==’M’?[‘mousemove’,’over’]:[‘click’,’click’],tt,c,x,y,ary=[],z0=0;
o=zxcMapToolTip[‘zxc’+id]={
fimg:fimg,
ary:ary,
hide:typeof(hide)==’number’&&hide>40?hide:1000,
ms:typeof(ms)==’number’&&ms>40?ms:false,
x:typeof(xx)==’number’?xx:10,
y:typeof(yy)==’number’?yy:10,
lst:false,
ud:”
}
for (;z0<as.length;z0++){
tt=document.getElementById(as[z0].className);
if (tt){
c=as[z0].coords.split(‘,’);
x=[1000,0];
y=[1000,0];
if (as[z0].shape.toUpperCase()==’CIRCLE’){
x=[c[0]-c[2],c[0]*1+c[2]*1];
y=[c[1]-c[2],c[1]*1+c[2]*1];
}
else {
for (z0a=0;z0a<c.length;z0a+=2){
x[0]=Math.min(x[0],c[z0a]);
x[1]=Math.max(x[1],c[z0a]);
y[0]=Math.min(y[0],c[z0a+1]);
y[1]=Math.max(y[1],c[z0a+1]);
}
}
tt.style.position=’absolute’;
tt.style.left=’-3000px’;
tt.style.top=’-3000px’;
this.addevt(as[z0],mde[0],mde[1],o,ary.length);
o.ary.push([tt,x,y,tt.offsetWidth,tt.offsetHeight,0]);
document.body.appendChild(tt);
}
}
this.addevt(document,’mousemove’,’move’,o);
},over:function(e,o,nu){
var oop=this,mse=this.mse(e);
if (o&&o.ary[nu]){
if (o.lst&&o.lst!=o.ary[nu]){
oop.out(o,o.lst);
}
if (o.ary[nu][0].offsetLeft<0&&o.ms){
clearTimeout(o.ary[nu][6]);
oop.fade(o,o.ary[nu],o.ary[nu][5],100,new Date(),o.ms);
}
o.lst=o.ary[nu];
o.ary[nu][0].style.left=mse[0]+o.x+’px’;
o.ary[nu][0].style.top=mse[1]+o.y+’px’;
}
},click:function(e,o,nu){
var oop=this,ary=o.ary[nu],p=oop.pos(o.fimg);
if (ary[0].offsetLeft<0){
o.prev=o.lst
if (o.lst&&o.lst!=ary){
oop.out(o,o.lst);
}
if (o.ms){
clearTimeout(ary[6]);
oop.fade(o,ary,ary[5],100,new Date(),o.ms);
}
clearTimeout(o.to);
o.lst=ary;
ary[0].style.left=ary[1][0]+p[0]+o.x+’px’;
ary[0].style.top=ary[2][1]+p[1]+o.y+’px’;
}
else {
oop.out(o,o.lst);
}
return false;
},out:function(o,ary,nu){
clearTimeout(o.to);
if (o.ms){
clearTimeout(o[ary[6]]);
this.fade(o,ary,ary[5],0,new Date(),o.ms/2);
}
else {
ary[0].style.left=’-3000px’;
}
},fade:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.opac(ary[0],now);
ary[5]=now;
}
if (ms<mS){
ary[6]=setTimeout(function(){ oop.fade(o,ary,f,t,srt,mS); },10);
}
else {
ary[5]=t;
oop.opac(ary[0],t);
if (t==0){
ary[0].style.left=’-3000px’;
}
}
},move:function(e,o){
if (o.lst&&o.lst[0].offsetLeft>0){
var oop=this,xy=this.mse(e),p=this.pos(o.fimg),ud=(xy[0]<o.lst[1][0]+p[0]||xy[0]>o.lst[1][1]+p[0]||xy[1]<o.lst[2][0]+p[1]||xy[1]>o.lst[2][1]+p[1])&&(xy[0]<o.lst[0].offsetLeft||xy[0]>o.lst[0].offsetLeft+o.lst[3]||xy[1]<o.lst[0].offsetTop||xy[1]>o.lst[0].offsetTop+o.lst[4]);
if (ud!=o.ud){
o.ud=ud;
clearTimeout(o.to);
if (ud){
o.to=setTimeout(function(){ oop.out(o,o.lst); },o.hide);
}
}
}
},pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},opac:function(o,p){
o.style.filter=’alpha(opacity=’+p+’)’;
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=p/100-.001;
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){ o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent(‘on’+t,function(e){ return oop[f](e,p,p1); });
}
}
}
</script>
</body>
</html>The blog I need help with is: (visible only to logged in users)
-
note that you should learn how to use Pastebin or another service for large code listings when you ask for help at WordPress.ORG – they tend to not like long listings last I helped in the forum
The site you are asking about does not seem to be hosted on WordPress.COM so you need to make friends over at WordPress.ORG the keepers of the software you are using.
This site is for support of sites hosted on WordPress.COM. You should address your questions to WordPress.ORG the keepers of the software you are using: http://wordpress.org/support/
The forum at WordPress.ORG is not connected to WordPress.COM so you will need to open an account at .ORG if you do not already have one. You may use the same email at WordPress.ORG as you do at WordPress.COM.
For more on the difference: http://support.wordpress.com/com-vs-org/
If you are asking for help with a WordPress.COM site then we need a link to that site to give you accurate help.
- The topic ‘Adding an HTML page with Javascript into a WordPress template page.’ is closed to new replies.
WordPress.com Forums 