PDA

View Full Version : 4.10: HTML editor ads weird behavior in block



Morgan Bohman
August 26, 2012, 07:52 PM
Hi All,
I've been busy this weekend but I have begun to dig a bit under the hood. I have a problem that I am stuck with. I've made a map over Sweden that is clickable and it works great in stand alone html file and Dreamweaver, but as soon as I drop the code into source in one block it doesn't behave like the html file anymore.
The code looks like this:

<div style="background: url(sweden_back.gif) no-repeat;">
<div style="display:block;width:158px;height:379px;z-index: 20;overflow:hidden;background: url(sweden_front.gif) no-repeat 167px" id="map">
<img src="trans.gif" alt="" usemap="#sweden" style="z-index:30;width:158px;height:379px;border: none;" />
</div>
<div>
<map name="sweden">
<area shape="poly" alt="Norrbotten" coords="114,3,120,9,127,14,132,15,136,17,143,25,144,40,147 ,40,146,47,152,55,151,72,157,80,157,85,152,86,146, 88,141,86,138,89,139,93,133,97,129,100,132,102,130 ,107,110,101,107,108,96,101,87,96,75,85,72,84,60,7 6,59,72,64,65,67,60,69,58,69,52,66,46,70,43,71,41, 73,34,79,28,84,31,87,25,86,15,89,14,90,16,98,16,10 5,19,107,17,105,14,108,9,107,4,105,0,113,1" href="" title="Norrbotten" onMouseOver="document.getElementById('map').style.backgroundPos ition='59px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Vasterbotten" coords="129,107,127,116,133,123,132,128,126,134,123,144,12 0,148,108,155,102,147,98,144,96,139,88,144,75,141, 46,110,50,102,50,82,56,81,60,76,72,85,75,85,86,95, 107,107,111,102" href="" title="Vasterbotten" onMouseOver="document.getElementById('map').style.backgroundPos ition='-108px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Jamtland" coords="46,111,59,124,76,140,75,143,74,149,66,151,67,153,6 8,157,80,169,76,171,72,175,52,181,53,185,56,189,59 ,188,60,192,57,196,56,200,50,200,48,206,36,205,32, 198,34,195,30,194,27,190,20,188,18,172,20,165,18,1 59,21,154,21,149,31,138,42,139,44,136,44,128,38,12 5,40,121" href="" title="Jamtland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-274px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Vasternorrland" coords="107,155,105,161,97,166,97,172,92,175,92,181,87,184 ,88,190,77,191,60,187,55,189,52,184,52,180,72,176, 76,170,79,170,67,155,67,152,65,150,74,149,75,140,8 7,144,95,141,97,145,103,147" href="" title="Vasternorrland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-441px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Dalarna" coords="19,189,28,191,33,195,33,198,35,204,45,207,50,208,5 1,209,54,210,58,208,65,221,66,223,70,224,73,230,71 ,233,74,239,78,245,74,248,70,248,68,246,66,247,65, 251,62,253,53,248,51,251,47,250,42,245,24,222,27,2 14,25,209,18,203,19,194" href="" title="Dalarna" onMouseOver="document.getElementById('map').style.backgroundPos ition='-607px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Gavleborg" coords="48,207,51,200,56,200,56,195,60,194,59,188,64,187,8 0,191,87,191,86,198,87,203,88,205,84,207,84,224,86 ,231,85,241,77,245,71,234,73,231,71,225,68,223,65, 222,63,216,57,209,55,210,50,209" href="" title="Gavleborg" onMouseOver="document.getElementById('map').style.backgroundPos ition='-774px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Varmland" coords="24,222,31,232,35,238,39,243,43,245,47,250,47,266,4 5,277,30,279,23,276,22,273,18,273,13,271,9,271,10, 259,11,258,13,252,17,252,22,247,21,241,22,239,22,2 35,18,224,18,221" href="" title="Varmland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-941px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="orebro" coords="47,250,51,251,52,248,61,254,64,264,63,269,66,274,6 3,280,63,282,57,284,55,287,48,286,45,280,47,266" href="" title="orebro" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1107px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Vastmanland" coords="61,254,65,251,65,246,71,248,74,248,78,246,79,256,8 1,262,76,266,72,268,67,271,63,269,65,264" href="" title="Vastmanland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1274px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Uppsala" coords="86,232,90,233,91,236,95,234,98,239,100,239,101,236 ,104,240,102,245,102,252,94,259,91,261,90,264,82,2 64,79,258,78,245,85,242" href="" title="Uppsala" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1441px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Stockholm" coords="104,242,111,253,111,258,108,262,104,265,107,266,10 6,270,104,275,101,280,98,278,95,283,93,275,92,281, 87,276,87,270,90,263,96,258,102,252" href="" title="Stockholm" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1607px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Soodermanland" coords="64,278,67,273,70,269,79,264,84,267,87,270,87,276,9 2,281,89,285,84,288,80,288,75,285,66,278,64,279" href="" title="Sodermanland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1774px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Vastra Gotaland" coords="9,271,17,272,22,274,29,279,45,278,47,285,49,287,53 ,287,48,302,43,302,41,305,36,305,36,316,33,322,27, 329,22,324,19,323,17,323,16,317,15,316,11,317,8,31 5,6,312,6,305,4,305,2,301,3,296,0,293,2,285,0,285, 0,275,3,273,5,277,5,280,9,278" href="" title="Vostra Gotaland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-1941px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Jonkoping" coords="26,328,32,323,36,316,37,305,42,305,43,302,48,302,5 0,304,55,303,55,310,57,313,61,314,64,316,64,320,62 ,322,62,326,56,327,55,329,53,327,45,329,45,336,43, 336,43,334,41,332,34,332,32,329,28,331" href="" title="Jonkoping" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2107px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Ostergotland" coords="54,287,61,282,67,278,75,286,73,288,75,289,79,289,8 1,292,80,297,81,305,79,305,77,302,69,303,70,309,69 ,310,64,310,61,314,57,313,55,309,55,302,52,304,48, 303" href="" title="ostergotland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2274px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Halland" coords="8,316,12,317,15,317,16,323,23,324,27,331,32,329,35 ,332,35,335,30,338,30,341,32,348,28,351,23,348,22, 343,18,338,13,333,10,324" href="" title="Halland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2441px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Kronoberg" coords="34,332,41,332,44,336,46,329,53,327,55,328,62,327,6 7,333,67,335,62,336,60,347,59,349,55,348,54,350,50 ,350,43,346,41,346,38,349,31,348,31,343,30,338,33, 336,35,335" href="" title="Kronoberg" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2608px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Kalmar" coords="62,327,62,321,65,320,64,316,61,314,64,311,70,310,7 0,303,77,303,81,306,80,309,79,310,80,312,80,321,78 ,327,78,330,79,333,77,337,79,337,82,332,83,325,86, 322,86,327,84,334,84,338,82,342,82,345,80,350,77,3 56,76,355,75,349,75,345,74,345,73,350,72,352,68,35 2,64,348,60,347,61,339,63,335,67,335,67,332" href="" title="Kalmar" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2774px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Gotland" coords="115,303,112,306,108,306,103,312,99,318,101,320,100 ,325,101,330,101,336,104,336,107,332,108,328,112,3 23,115,321,112,317,112,311,119,306,119,304" href="" title="Gotland" onMouseOver="document.getElementById('map').style.backgroundPos ition='-2941px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Skane" coords="22,348,27,351,34,349,42,346,46,348,46,354,48,355,4 8,360,44,363,43,369,45,373,43,377,39,377,32,378,25 ,378,21,376,22,372,23,367,15,353,15,351,18,352,21, 353,17,348,20,347" href="" title="Skane" onMouseOver="document.getElementById('map').style.backgroundPos ition='-3107px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="poly" alt="Blekinge" coords="46,348,52,350,56,348,62,347,65,348,71,352,71,355,6 9,357,67,356,58,357,50,357,51,360,51,361,48,360,48 ,355,46,352" href="" title="Blekinge" onMouseOver="document.getElementById('map').style.backgroundPos ition='-3274px'" onMouseOut="document.getElementById('map').style.backgroundPos ition='167px'" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</div>

But when executing this, the front gif is shifted in position downwards. Guess that your div inner and outer are making something. So if anyone have a clue to get the html code inserted without interference into the block, I would be very happy.

And guys, you really need to fix the forum so we could use our characters with dots.

//Morgan

Vladimir
August 27, 2012, 03:58 AM
Hello,

You can try to make it so:

- create a tpl file (templates/your_template/tpl/blocks/f_map.tpl);
- add html code of map to new file;
- create a content box with type Smarty.

138

I've added a temporary content box on your site.

Morgan Bohman
August 27, 2012, 04:38 AM
Thanks Vlad, Now I'm learning something new, great thanks!