Jump to content

[SOLVED] How to insert interactive map? Or how to insert HTML to HTML wihout frame?

kotkotan
 Share

Recommended Posts

kotkotan Newbie

kotkotan

Posted
Posted

Hello.

Have test interactive map for site. Trying to insert it to CMS page. Can't do it without iFrame, but it didn't like me. Trying to insert HTML by HTML editor it works only in TinyMCE, on page there are nothing.

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=windows-1251" />
	<title>Мапа украины</title>
	</head>
<body>

<style>
.map_1 {
padding-right: 0px; padding-left: 0px; background: url(map/map_ua_files/blank_map.gif) no-repeat 0px 0px; left: 0px; padding-bottom: 0px; width: 511px; padding-top: 5px; position: absolute; top:0px; height: 348px
}
.map_1 img {
visibility: hidden; position: absolute
}
.map_1 div {
font-size: 10px; color: #000000; position: absolute
}
</style>

<MAP id="regions_map" name="regions_map">

<AREA shape=POLY 
coords=210,130,241,124,251,115,254,104,268,101,275,87,283,97,283,102,291,112,299,125,304,133,290,139,281,137,272,144,265,141,261,146,246,152,236,151,232,159,215,162,214,152,210,148,207,137 href="/content/3-service#donetsk" onfocus=this.blur() 
onmouseover="switchMap(this, 'visible')" 
onmouseout="switchMap(this, 'hidden')" image_id="1">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=234,42,239,37,244,13,259,8,280,8,284,0,306,-1,298,49,303,59,302,76,277,80,271,76,273,73,269,71,259,73,250,70,248,65,241,64,233,51
href="" 
image_id="2">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=74,178,74,171,94,155,96,145,106,148,114,153,123,154,128,150,136,151,141,149,147,156,129,156,121,164,105,172,96,173,85,173,74,177 href="" image_id="3"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=327,252,349,263,356,253,378,285,400,277,412,280,407,285,406,295,388,298,380,294,366,308,355,307,341,325,327,327,317,316,322,302,316,293,309,293,300,287,289,289,287,284,321,261,321,255 
href="" image_id="4">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=304,197,304,176,312,171,313,158,322,151,317,149,326,140,336,145,339,135,352,128,362,129,370,136,383,135,389,141,389,145,395,151,404,149,409,162,404,177,391,176,391,172,384,169,359,173,354,171,356,185,359,188,355,197,344,197,322,201,321,195,316,199 
href="" image_id="5">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=425,216,415,205,421,195,407,187,402,177,408,161,402,149,405,146,404,141,417,139,418,133,429,120,436,119,437,124,441,124,442,130,448,135,448,150,471,172,453,190,451,206,434,208 
href="#donetsk" image_id="6">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=351,86,382,72,399,78,418,67,439,89,436,118,423,126,417,138,405,140,406,146,395,150,388,142,387,137,382,134,368,135,361,127,352,127,365,108,358,105,358,101,350,99 
href="" image_id="7">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=275,232,283,227,299,226,304,218,300,215,305,205,301,201,309,194,317,197,321,192,333,199,335,203,345,205,342,208,347,216,353,217,355,222,352,228,356,230,354,234,364,239,351,250,350,257,345,256,348,249,326,250,314,255,306,251,283,253,269,247,273,240,261,236,284,238 image_id="8">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=117,85,127,80,136,71,143,70,142,79,146,85,152,84,148,99,153,107,152,128,144,134,140,149,119,154,112,146,111,126,114,118,114,93 
href="" image_id="9">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=34,137,41,126,61,120,63,109,73,109,77,129,95,142,94,155,75,169,74,178,61,170,58,157,52,150,48,150 
href="" image_id="10">

<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=216,162,233,158,237,150,249,152,262,145,267,140,273,144,279,141,283,135,291,138,304,133,311,136,312,140,317,135,326,140,316,149,322,151,313,158,312,172,304,176,299,176,287,188,270,189,271,183,267,181,266,176,257,176,251,170,243,173,212,170,212,165 image_id="11"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=233,42,232,54,241,65,249,66,250,72,261,75,269,72,276,81,264,102,252,105,249,117,240,124,231,124,208,130,201,108,208,101,208,87,202,75,206,66,202,57,204,51,200,47,202,37,226,34 
href="" image_id="12">

<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=471,172,449,148,449,134,442,129,442,124,437,124,436,110,439,107,441,84,494,99,497,114,492,119,486,122,496,127,488,135,494,145,496,158,491,170 
href="" image_id="13">

<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=63,64,72,73,75,81,87,81,92,93,87,99,73,108,62,111,60,120,40,127,34,138,28,138,19,130,17,123,20,121,19,100,43,75 
href="" image_id="14">

<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=225,172,246,172,251,170,258,176,266,176,271,189,290,187,300,176,304,176,304,201,301,205,305,208,300,219,304,221,300,228,279,231,275,234,247,234,245,223,251,222,251,217,245,210,241,210,239,204,241,196,237,194,227,192,227,184,223,179 
href="" image_id="15">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=187,175,192,170,200,174,208,174,209,169,225,173,223,180,227,185,227,192,230,194,238,194,241,198,239,207,243,210,251,217,250,223,245,223,247,234,236,240,236,246,219,267,213,267,206,276,202,271,202,280,205,285,201,289,190,279,173,285,165,283,165,276,185,254,184,241,192,237,193,243,218,240,203,214,203,203,193,200,192,185 
href="" image_id="16">

<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=278,80,291,80,304,76,320,78,333,73,340,84,342,92,351,87,351,101,358,102,359,108,365,109,364,113,337,138,335,145,317,135,312,140,308,133,304,133,304,129,275,87 href="" image_id="17"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=106,12,147,22,158,29,159,33,151,37,144,52,142,70,133,73,127,81,117,85,113,80,105,82,91,90,89,82,84,79,87,71,94,66,105,67,114,57,114,52,111,49,116,46,109,35,103,35,106,28 
href="" image_id="18">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=306,1,320,1,334,20,327,28,332,35,332,42,355,45,363,49,363,70,369,77,364,81,360,81,342,92,340,83,332,73,318,78,302,77,303,60,298,49,302,31,302,17,308,9 href="" image_id="19"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=73,109,92,94,92,90,109,80,115,80,117,85,113,101,114,120,111,130,112,147,117,153,112,153,96,145,95,140,90,138,87,139,85,135,77,128
href="" image_id="20">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=154,106,180,108,188,104,193,115,203,112,210,130,207,139,217,162,207,173,198,174,191,169,187,177,181,168,148,158,141,148,146,132,153,127 href="" image_id="21"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=107,12,105,36,111,36,117,47,112,50,116,55,106,68,101,65,94,66,88,70,85,80,75,81,72,71,59,58,61,40,57,20,67,22,76,13 
href="" image_id="22">
<AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=61,171,35,166,25,159,18,164,1,148,1,138,13,121,18,123,20,131,30,138,39,140,48,149,52,150,60,159 href="" image_id="23"><AREA 
onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=333,200,350,196,356,196,359,187,353,177,355,171,370,172,386,169,391,173,391,177,403,178,408,188,422,195,422,199,416,202,420,209,423,213,423,216,397,231,386,230,365,252,369,242,367,237,364,241,354,235,356,231,352,230,356,222,351,219,346,217,342,210,345,206,334,204 
href="" image_id="24"><AREA 

onmouseover="switchMap(this, 'visible')" onfocus=this.blur() 
onmouseout="switchMap(this, 'hidden')" shape=POLY 
coords=203,38,201,48,205,54,203,58,208,68,203,76,209,87,209,101,203,106,202,112,191,114,191,109,187,104,180,107,153,106,148,98,152,84,146,85,143,77,144,52,152,36,173,27,186,33,195,30 
href="" image_id="25">
</MAP>

<DIV style="POSITION: relative; HEIGHT: 280px">
<DIV class="map_1" id="div_map">
<img 
style="LEFT: 209px; TOP: 90px" height=78 
src="map/map_ua_files/cherkass.gif" 
width=94> <img style="LEFT: 238px; TOP: 0px" height=89 
src="map/map_ua_files/chernigi.gif" 
width=79> <img style="LEFT: 77px; TOP: 151px" height=40 
src="map/map_ua_files/chernive.gif" 
width=78><img style="LEFT: 294px; TOP: 257px" height=79 
src="map/map_ua_files/crym0000.gif" 
width=127><img style="LEFT: 307px; TOP: 132px" height=74 
src="map/map_ua_files/dniprope.gif" 
width=114> <img style="LEFT: 403px; TOP: 125px" height=102 
src="map/map_ua_files/donetska.gif" 
width=74> <img style="LEFT: 351px; TOP: 75px" height=85 
src="map/map_ua_files/harkivsk.gif" 
width=91> <img style="LEFT: 270px; TOP: 202px" height=65 
src="map/map_ua_files/hersonsk.gif" 
width=102> <img style="LEFT: 118px; TOP: 75px" height=90 
src="map/map_ua_files/hmelnits.gif" 
width=51> <img style="LEFT: 44px; TOP: 111px" height=78 
src="map/map_ua_files/ivano_fr.gif" 
width=60> <img style="LEFT: 215px; TOP: 130px" height=66 
src="map/map_ua_files/kirovogr.gif" 
width=119> <img style="LEFT: 206px; TOP: 38px" height=100 
src="map/map_ua_files/kyivska0.gif" 
width=79> <img style="LEFT: 435px; TOP: 89px" height=92 
src="map/map_ua_files/luganska.gif" 
width=67> <img style="LEFT: 21px; TOP: 65px" height=79 
src="map/map_ua_files/lvivska0.gif" 
width=79> <img style="LEFT: 226px; TOP: 174px" height=70 
src="map/map_ua_files/mykolaiv.gif" 
width=86> <img style="LEFT: 165px; TOP: 177px" height=128 
src="map/map_ua_files/odesska0.gif" 
width=95> <img style="LEFT: 280px; TOP: 78px" height=76 
src="map/map_ua_files/poltavsk.gif" 
width=95> <img style="LEFT: 90px; TOP: 15px" height=83 
src="map/map_ua_files/rivnensk.gif" 
width=77> <img style="LEFT: 300px; TOP: 0px" height=97 
src="map/map_ua_files/sumska00.gif" 
width=78> <img style="LEFT: 78px; TOP: 84px" height=76 
src="map/map_ua_files/ternopil.gif" 
width=47> <img style="LEFT: 149px; TOP: 105px" height=81 
src="map/map_ua_files/vinnytsk.gif" 
width=77> <img style="LEFT: 56px; TOP: 14px" height=69 
src="map/map_ua_files/volynska.gif" 
width=65> <img style="LEFT: 3px; TOP: 122px" height=56 
src="map/map_ua_files/zakarpat.gif" 
width=71> <img style="LEFT: 341px; TOP: 174px" height=80 
src="map/map_ua_files/zaporizk.gif" 
width=89> <img style="LEFT: 149px; TOP: 28px" height=92 
src="map/map_ua_files/zhytomyr.gif" 
width=71> 

<DIV style="LEFT: 230px; TOP: 132px">Черкасская</DIV>
<DIV style="LEFT: 240px; TOP: 50px">Черниговская</DIV>
<DIV style="LEFT: 88px; TOP: 170px">Черновецкая</DIV>
<DIV style="LEFT: 320px; TOP: 280px">Автономная<BR>Республика Крым</DIV>
<DIV style="LEFT: 322px; TOP: 160px">Днепропетровская</DIV>
<DIV style="LEFT: 414px; TOP: 180px">Донецкая</DIV>
<DIV style="LEFT: 373px; TOP: 100px">Харьковская</DIV>
<DIV style="LEFT: 300px; TOP: 240px">Херсонская</DIV>
<DIV style="LEFT: 125px; TOP: 100px">Хмельницкая</DIV>
<DIV style="LEFT: 52px; TOP: 130px">Ивано-<BR>Франковская</DIV>
<DIV style="LEFT: 235px; TOP: 162px">Кировоградская</DIV>
<DIV style="LEFT: 225px; TOP: 85px">Киевская</DIV>
<DIV style="LEFT: 442px; TOP: 115px">Луганская</DIV>
<DIV style="LEFT: 31px; TOP: 100px">Львовская</DIV>
<DIV style="LEFT: 250px; TOP: 200px">Николаевская</DIV>
<DIV style="LEFT: 200px; TOP: 230px">Одесская</DIV>
<DIV style="LEFT: 294px; TOP: 100px">Полтавская</DIV>
<DIV style="LEFT: 111px; TOP: 30px">Ровенская</DIV>
<DIV style="LEFT: 315px; TOP: 60px">Сумская</DIV>
<DIV style="LEFT: 85px; TOP: 120px">Тернопольская</DIV>
<DIV style="LEFT: 157px; TOP: 145px">Винницкая</DIV>
<DIV style="LEFT: 68px; TOP: 45px">Волынская</DIV>
<DIV style="LEFT: 0px; TOP: 155px">Закарпатская</DIV>
<DIV style="LEFT: 352px; TOP: 205px">Запорожская</DIV>
<DIV style="LEFT: 155px; TOP: 65px">Житомирская</DIV>

<img src="map/map_ua_files/t_pixel0.gif" width=511 height=348 border="0" useMap=#regions_map style="LEFT: 5px; visibility: visible; TOP: 5px"> 

</DIV>

</DIV>

<SCRIPT language="JavaScripts" type="text/javascript">
<!--
function switchMap(obj, value) {
document.getElementsByTagName("img")[obj.getAttribute("image_id") - 1].style.visibility = value;
}
//--></SCRIPT>


</body>
</html>

help please

 

post-541242-0-90567600-1379939180_thumb.png

post-541242-0-77089000-1379939235_thumb.png

Link to comment
Share on other sites
Jiten rash (away) Newbie

Jiten rash (away)

Posted
Posted

src="map/map_ua_files/zaporizk.gif" alt="" width="89" height="80" /> <img style="left: 149px; top: 28px;" src="map/map_ua_files/zhytomyr.gif"

do u have this images on directories

 

if i see this javascript its not even loading anything

function switchMap(obj, value) {
document.getElementsByTagName("img")[obj.getAttribute("image_id") - 1].style.visibility = value;
}

Link to comment
Share on other sites
kotkotan Newbie

kotkotan

Posted
  • Author
Posted

src="map/map_ua_files/zaporizk.gif" alt="" width="89" height="80" /> <img style="left: 149px; top: 28px;" src="map/map_ua_files/zhytomyr.gif"

do u have this images on directories

 

 

if i see this javascript its not even loading anything

 

function switchMap(obj, value) {

document.getElementsByTagName("img")[obj.getAttribute("image_id") - 1].style.visibility = value;

}

1. yes, this files in this directory

2. how to load this script?

thanks

Link to comment
Share on other sites
kotkotan Newbie

kotkotan

Posted
  • Author
Posted

you need to extend tinyMCE features, without it - map and also other js scripts will not work properly.

tell me please how i can do this? 

 

in tinyMCE script in CDATA like this

<script language="JavaScripts" type="text/javascript">// <![CDATA[
function switchMap(obj, value) {
document.getElementsByTagName("img")[obj.getAttribute("image_id") - 1].style.visibility = value;
}
// ]]></script>
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

thank you, i checked them, it looks like images doesnt work, path to each image looks like:

http://ADDRESS/content/map/map_ua_files/t_pixel0.gif

and on this path there is no picture

 

what to do? upload pictures for example to /img/ directory and in code you pasted use direct url to these images instead of simple "map/map_ua_files/t_pixel0.gif"

  • Like 1
Link to comment
Share on other sites
kotkotan Newbie

kotkotan

Posted
  • Author
Posted

thank you, i checked them, it looks like images doesnt work, path to each image looks like:

http://ADDRESS/content/map/map_ua_files/t_pixel0.gif

and on this path there is no picture

 

what to do? upload pictures for example to /img/ directory and in code you pasted use direct url to these images instead of simple "map/map_ua_files/t_pixel0.gif"

of course. how could I forget about it))) you are great as always! many thanks!!!!

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...