Hallo,
hab hier mal eine Frage.
Ich hab hier ein TMENU das aktuell super funktioniert.
Ich möchte nun aber bei einem Punkt ein Imagemap im Menüpunkt haben. Im HTML hab ich das bereits umgesetzt und funktioniert auch problemlos.
Wie kann ich jetzt einen Menüpunkt komplett unabhängig von allen anderen formatieren bzw. wie kann ich das Imagemap hier reinbringen?
Hier mal mein aktuelles TypoScript:
marks.MAINMENUs = HMENU
marks.MAINMENUs {
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li> | </li>
}
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="has-submenu">|</li>
}
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <div class="subnav cf"><ul>|</ul></div>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
SPC = 1
SPC.before.dataWrap = </ul>|<ul>
SPC.doNotShowLink = 1
}
}
Hier das Imagemap Menu:
<div class="map">
<p>Bitte wählen Sie IhrPortal</p>
<img src="img/bgi/map.jpg" alt="map" width="540" height="360" usemap="#m_00000001" id="imageMap">
<map name="m_00000001">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="311,132,314,133,316,131,319,131,321,136,326,135,327,141,323,144,324,151,319,151,318,148,309,149,305,146,305,142,311,138,311,132" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="356,177,369,177,372,174,375,176,379,166,378,160,371,155,374,146,368,140,361,138,367,134,366,122,360,125,350,118,348,121,339,122,329,113,330,104,330,102,320,100,314,105,310,133,319,132,321,136,326,136,326,142,323,144,324,150,356,177" href="#1" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="289,140,276,138,276,143,278,145,278,148,280,157,278,160,279,163,286,168,285,169,284,172,290,184,295,183,300,191,308,190,315,194,320,207,332,207,332,201,347,200,346,188,356,177,324,150,320,150,318,148,308,148,306,146,306,142,311,138,310,132,315,105,301,98,294,103,295,112,296,114,296,117,294,117,293,120,295,128,289,140" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="231,108,236,108,241,117,244,117,249,113,254,113,256,115,256,125,255,127,249,126,233,136,231,135,226,131,221,131,220,127,229,121,228,112,231,108" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="277,139,278,148,264,162,257,162,245,170,239,169,232,174,229,163,219,158,213,165,212,160,204,160,199,169,188,173,181,167,174,172,172,171,168,171,163,165,155,165,147,157,155,150,161,150,175,134,178,136,182,135,185,130,193,129,195,133,200,132,208,123,208,116,213,111,211,104,214,94,216,95,232,109,229,112,229,122,221,127,221,131,226,131,232,135,247,127,256,125,277,139" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="277,48,267,49,262,55,256,52,252,54,240,55,230,61,229,68,221,68,217,76,221,82,217,90,221,93,221,94,214,93,232,109,237,109,242,118,252,113,256,115,256,126,276,139,288,140,296,127,294,118,296,117,294,103,301,99,299,89,291,82,282,65,282,55,277,48" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="406,87,407,70,384,46,369,48,361,40,354,40,352,50,338,45,338,40,332,36,318,35,315,41,311,39,305,45,300,41,290,45,278,45,276,49,281,54,281,65,291,82,297,88,302,99,315,106,320,100,330,102,329,112,339,122,346,122,350,119,360,125,365,122,366,127,372,128,384,121,384,110,387,107,382,98,393,99,406,87" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="492,170,496,154,493,152,492,144,489,141,488,134,481,132,475,119,464,119,456,112,457,105,452,105,452,101,441,92,431,92,427,95,427,100,420,95,414,95,406,88,392,99,382,98,387,107,384,112,384,120,372,128,366,128,367,134,362,138,368,140,374,147,371,154,378,161,379,166,395,165,401,159,403,161,407,158,413,160,416,170,424,170,430,166,439,178,452,182,456,179,460,182,466,178,475,178,475,173,478,170,492,170" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="399,220,409,225,414,225,417,218,423,221,425,218,429,218,432,212,432,208,429,205,426,206,424,208,422,208,416,204,402,203,395,206,392,207,390,205,389,206,388,211,398,213,399,220" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="363,302,376,305,397,293,414,275,419,260,415,249,420,237,415,224,410,226,399,219,398,213,389,211,389,206,393,207,400,205,414,204,423,208,428,206,432,207,432,211,437,213,444,220,451,218,454,223,461,223,472,233,479,233,480,223,492,213,492,205,495,202,494,180,496,176,492,170,479,170,475,173,475,178,465,178,461,182,456,179,453,182,440,178,431,166,424,170,416,170,413,160,407,158,405,160,401,159,395,165,379,166,375,175,372,173,369,177,356,177,346,188,346,200,333,201,333,207,325,208,324,211,330,215,330,219,324,226,326,231,332,231,336,226,345,224,347,227,344,240,350,244,351,255,362,264,357,273,350,273,348,274,348,285,347,286,357,289,363,302" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="222,264,228,266,233,273,238,273,249,289,265,290,276,298,286,296,288,299,292,298,291,303,305,315,306,322,312,331,322,330,333,315,345,309,358,309,364,302,357,289,347,287,348,274,357,273,363,264,352,255,351,244,343,241,348,227,345,224,336,226,334,231,326,230,324,226,331,219,331,214,325,211,325,207,320,207,313,208,309,204,307,204,306,208,301,209,298,206,293,211,284,211,283,210,276,220,279,228,279,230,273,229,273,226,269,227,268,236,262,236,257,244,250,245,250,237,250,235,245,236,241,233,235,235,236,242,237,244,234,246,230,245,225,242,218,247,217,252,222,259,222,264" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="188,173,197,170,204,160,212,160,212,165,219,158,229,163,231,173,238,169,244,170,257,162,263,162,278,147,281,157,279,162,286,167,285,172,291,183,295,183,300,190,307,190,315,194,320,207,313,208,311,205,307,204,306,209,301,209,297,206,292,211,282,210,276,220,279,229,273,229,273,226,268,226,268,236,262,236,257,245,250,245,250,236,245,236,242,233,235,236,237,243,236,246,231,246,225,243,226,238,222,235,221,230,224,228,223,226,214,225,212,223,205,229,204,229,204,225,201,222,197,223,194,220,192,217,192,215,197,211,194,203,200,199,202,189,192,183,192,177,188,173" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="161,221,167,215,169,215,173,210,178,210,180,214,176,218,177,224,168,230,162,230,154,240,149,235,142,237,140,236,135,236,129,239,127,238,127,237,130,232,135,232,137,228,146,228,146,224,150,218,157,224,161,221" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="122,249,120,250,126,268,130,266,140,267,142,264,148,268,152,266,157,270,157,275,161,279,161,285,167,285,173,293,186,297,191,289,195,293,201,286,205,286,210,278,211,269,221,265,222,259,219,255,218,247,225,242,226,237,222,235,222,231,224,228,223,225,214,225,212,223,205,230,204,225,201,222,196,222,194,219,193,214,167,230,161,230,154,239,148,235,142,238,139,236,134,236,129,239,122,249" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="102,215,106,218,112,218,114,222,114,233,118,235,116,238,116,244,122,244,123,249,130,240,126,238,130,232,135,232,137,228,146,228,147,222,150,218,157,225,174,211,179,211,180,215,176,218,176,223,168,230,192,215,197,210,195,202,201,198,202,189,192,183,192,177,180,167,175,172,168,171,162,165,154,165,148,157,142,156,139,159,139,163,132,163,130,162,121,162,110,174,101,178,98,189,96,191,102,215" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="41,102,50,108,57,108,60,111,65,109,64,119,68,125,64,128,65,135,61,138,60,141,67,144,67,150,61,154,62,164,58,163,49,168,53,174,50,180,59,184,58,190,61,193,61,196,58,199,59,201,59,206,66,209,74,210,76,208,81,207,91,216,98,217,101,215,97,192,99,189,100,179,110,174,122,162,131,162,131,164,139,163,138,158,143,155,144,150,144,138,141,132,148,128,147,119,140,115,139,108,125,99,122,101,118,97,111,103,105,101,105,93,97,81,83,80,74,90,59,80,51,84,44,84,44,92,40,96,40,100,41,102" href="#" title="" alt="">
</map>
Hier mal die Ausgabe im HTML:
<li class="has-submenu">
<a href="#">Menüpunkt</a>
<div class="subnav cf">
<div class="map">
<p>Bitte wählen Sie IhrPortal</p>
<img src="img/bgi/map.jpg" alt="map" width="540" height="360" usemap="#m_00000001" id="imageMap">
<map name="m_00000001">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="311,132,314,133,316,131,319,131,321,136,326,135,327,141,323,144,324,151,319,151,318,148,309,149,305,146,305,142,311,138,311,132" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="356,177,369,177,372,174,375,176,379,166,378,160,371,155,374,146,368,140,361,138,367,134,366,122,360,125,350,118,348,121,339,122,329,113,330,104,330,102,320,100,314,105,310,133,319,132,321,136,326,136,326,142,323,144,324,150,356,177" href="#1" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="289,140,276,138,276,143,278,145,278,148,280,157,278,160,279,163,286,168,285,169,284,172,290,184,295,183,300,191,308,190,315,194,320,207,332,207,332,201,347,200,346,188,356,177,324,150,320,150,318,148,308,148,306,146,306,142,311,138,310,132,315,105,301,98,294,103,295,112,296,114,296,117,294,117,293,120,295,128,289,140" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="231,108,236,108,241,117,244,117,249,113,254,113,256,115,256,125,255,127,249,126,233,136,231,135,226,131,221,131,220,127,229,121,228,112,231,108" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="277,139,278,148,264,162,257,162,245,170,239,169,232,174,229,163,219,158,213,165,212,160,204,160,199,169,188,173,181,167,174,172,172,171,168,171,163,165,155,165,147,157,155,150,161,150,175,134,178,136,182,135,185,130,193,129,195,133,200,132,208,123,208,116,213,111,211,104,214,94,216,95,232,109,229,112,229,122,221,127,221,131,226,131,232,135,247,127,256,125,277,139" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="277,48,267,49,262,55,256,52,252,54,240,55,230,61,229,68,221,68,217,76,221,82,217,90,221,93,221,94,214,93,232,109,237,109,242,118,252,113,256,115,256,126,276,139,288,140,296,127,294,118,296,117,294,103,301,99,299,89,291,82,282,65,282,55,277,48" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="406,87,407,70,384,46,369,48,361,40,354,40,352,50,338,45,338,40,332,36,318,35,315,41,311,39,305,45,300,41,290,45,278,45,276,49,281,54,281,65,291,82,297,88,302,99,315,106,320,100,330,102,329,112,339,122,346,122,350,119,360,125,365,122,366,127,372,128,384,121,384,110,387,107,382,98,393,99,406,87" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="492,170,496,154,493,152,492,144,489,141,488,134,481,132,475,119,464,119,456,112,457,105,452,105,452,101,441,92,431,92,427,95,427,100,420,95,414,95,406,88,392,99,382,98,387,107,384,112,384,120,372,128,366,128,367,134,362,138,368,140,374,147,371,154,378,161,379,166,395,165,401,159,403,161,407,158,413,160,416,170,424,170,430,166,439,178,452,182,456,179,460,182,466,178,475,178,475,173,478,170,492,170" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="399,220,409,225,414,225,417,218,423,221,425,218,429,218,432,212,432,208,429,205,426,206,424,208,422,208,416,204,402,203,395,206,392,207,390,205,389,206,388,211,398,213,399,220" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="363,302,376,305,397,293,414,275,419,260,415,249,420,237,415,224,410,226,399,219,398,213,389,211,389,206,393,207,400,205,414,204,423,208,428,206,432,207,432,211,437,213,444,220,451,218,454,223,461,223,472,233,479,233,480,223,492,213,492,205,495,202,494,180,496,176,492,170,479,170,475,173,475,178,465,178,461,182,456,179,453,182,440,178,431,166,424,170,416,170,413,160,407,158,405,160,401,159,395,165,379,166,375,175,372,173,369,177,356,177,346,188,346,200,333,201,333,207,325,208,324,211,330,215,330,219,324,226,326,231,332,231,336,226,345,224,347,227,344,240,350,244,351,255,362,264,357,273,350,273,348,274,348,285,347,286,357,289,363,302" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="222,264,228,266,233,273,238,273,249,289,265,290,276,298,286,296,288,299,292,298,291,303,305,315,306,322,312,331,322,330,333,315,345,309,358,309,364,302,357,289,347,287,348,274,357,273,363,264,352,255,351,244,343,241,348,227,345,224,336,226,334,231,326,230,324,226,331,219,331,214,325,211,325,207,320,207,313,208,309,204,307,204,306,208,301,209,298,206,293,211,284,211,283,210,276,220,279,228,279,230,273,229,273,226,269,227,268,236,262,236,257,244,250,245,250,237,250,235,245,236,241,233,235,235,236,242,237,244,234,246,230,245,225,242,218,247,217,252,222,259,222,264" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="188,173,197,170,204,160,212,160,212,165,219,158,229,163,231,173,238,169,244,170,257,162,263,162,278,147,281,157,279,162,286,167,285,172,291,183,295,183,300,190,307,190,315,194,320,207,313,208,311,205,307,204,306,209,301,209,297,206,292,211,282,210,276,220,279,229,273,229,273,226,268,226,268,236,262,236,257,245,250,245,250,236,245,236,242,233,235,236,237,243,236,246,231,246,225,243,226,238,222,235,221,230,224,228,223,226,214,225,212,223,205,229,204,229,204,225,201,222,197,223,194,220,192,217,192,215,197,211,194,203,200,199,202,189,192,183,192,177,188,173" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="161,221,167,215,169,215,173,210,178,210,180,214,176,218,177,224,168,230,162,230,154,240,149,235,142,237,140,236,135,236,129,239,127,238,127,237,130,232,135,232,137,228,146,228,146,224,150,218,157,224,161,221" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="122,249,120,250,126,268,130,266,140,267,142,264,148,268,152,266,157,270,157,275,161,279,161,285,167,285,173,293,186,297,191,289,195,293,201,286,205,286,210,278,211,269,221,265,222,259,219,255,218,247,225,242,226,237,222,235,222,231,224,228,223,225,214,225,212,223,205,230,204,225,201,222,196,222,194,219,193,214,167,230,161,230,154,239,148,235,142,238,139,236,134,236,129,239,122,249" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="102,215,106,218,112,218,114,222,114,233,118,235,116,238,116,244,122,244,123,249,130,240,126,238,130,232,135,232,137,228,146,228,147,222,150,218,157,225,174,211,179,211,180,215,176,218,176,223,168,230,192,215,197,210,195,202,201,198,202,189,192,183,192,177,180,167,175,172,168,171,162,165,154,165,148,157,142,156,139,159,139,163,132,163,130,162,121,162,110,174,101,178,98,189,96,191,102,215" href="#" title="" alt="">
<area onmouseover="changeImage('img/bgi/map-region1.jpg')" onmouseout="changeImage('img/bgi/map.jpg')" shape="poly" coords="41,102,50,108,57,108,60,111,65,109,64,119,68,125,64,128,65,135,61,138,60,141,67,144,67,150,61,154,62,164,58,163,49,168,53,174,50,180,59,184,58,190,61,193,61,196,58,199,59,201,59,206,66,209,74,210,76,208,81,207,91,216,98,217,101,215,97,192,99,189,100,179,110,174,122,162,131,162,131,164,139,163,138,158,143,155,144,150,144,138,141,132,148,128,147,119,140,115,139,108,125,99,122,101,118,97,111,103,105,101,105,93,97,81,83,80,74,90,59,80,51,84,44,84,44,92,40,96,40,100,41,102" href="#" title="" alt="">
</map>
</div>
<ul class="mobile-menu">
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
</ul>
</div>
</li>
Jemand eine Idee?
Gruß Leibnitz