[GELÖST] responsive area maps

PatriziaF · 27. Juni 2013 10:20

Hallo liebe CMSler,

ich habe eine area map und möchte diese gerne responsive machen.
leider funktioniert das nicht mit nachfolgenden mitteln. habt ihr eine idee warum?

DANKE u lg
patrizia

javascript für resize area map

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
{literal}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="uploads/keli/js/jquery.rwdImageMaps.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('img[usemap]').rwdImageMaps(); 
}); 
</script>
{/literal}

css

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS==]
img[usemap] {
border: none;
height: auto;
max-width: 110%;
width: auto;
}

area map

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<map name="karte" > 
<area id="karte1" title="" onmouseover="imageMap.src='uploads/keli/images/karte1.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="35,235,18,223,12,200,22,183,36,165,56,194,62,194,60,206,56,222,51,240,33,236" href="index.php?page=vorarlberg" alt="" target="_self" />
 
<area id="karte2" title="" onmouseover="imageMap.src='uploads/keli/images/karte2.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="63,206,82,188,78,172,105,181,123,196,148,194,170,180,198,176,217,175,214,169,234,176,240,180,247,192,240,202,228,207,212,211,202,212,204,236,179,245,167,236,150,232,142,241,124,250,104,254,89,251,72,234,64,241,60,205" href="index.php?page=tirol" alt="" target="_self" />
 
<area id="karte4" title="" onmouseover="imageMap.src='uploads/keli/images/karte4.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="248,284,260,271,270,267,255,256,252,238,260,238,276,247,288,242,319,245,332,260,340,262,360,244,376,254,411,249,422,267,418,279,425,290,421,293,411,296,403,309,391,312,385,316,373,310,365,312,350,308,347,306" href="index.php?page=kaernten" alt="" target="_self" />
 
<area id="karte5" title="" onmouseover="imageMap.src='uploads/keli/images/karte5.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="430,289,446,291,468,287,510,250,497,208,493,190,443,160,440,168,415,174,400,169,365,186,363,178,348,185,346,182,344,172,323,181,326,193,322,197,312,202,313,211,316,216,328,216,336,226,341,230,338,246,332,254,336,257,350,248,359,240,371,247,407,246,420,250,426,270" href="index.php?page=steiermark" alt="" target="_self" />
 
<area id="karte6" title="" onmouseover="imageMap.src='uploads/keli/images/karte6.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="515,205,524,188,520,172,520,161,528,155,531,147,541,150,555,140,568,132,578,130,578,177,564,178,553,177,543,169,538,172,534,175,530,181,538,184,544,186,550,188,550,197,548,204,544,208,541,210,538,209,536,208,529,209,527,210,527,212,529,216,532,220,533,221,534,226,532,228,530,230,531,236,534,238,534,241,532,244,532,244,530,246,530,248,528,249,524,250,521,252,519,252,516,255,510,255,508,250,508,244,504,236,502,232,501,226,501,221,500,214,499,208,498,206,502,204,503,204,514,204,517,201,518,200,519,198" href="index.php?page=burgenland" alt="" target="_self" />
 
<area id="karte3" title="" onmouseover="imageMap.src='uploads/keli/images/karte3.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="250,233,257,234,266,236,272,239,273,240,282,243,291,238,304,239,317,242,326,244,331,246,335,237,337,234,335,227,334,227,332,224,329,221,324,221,313,218,306,210,306,201,307,196,309,195,310,190,305,183,306,179,306,173,305,159,298,155,296,154,291,151,290,145,294,140,294,136,284,135,280,134,275,132,270,130,264,131,266,138,269,149,270,162,275,168,279,172,281,178,280,185,274,195,266,194,260,189,254,183,257,178,254,173,245,173,246,177,250,192,247,195,243,204,236,207,233,208,226,211,211,213,207,215,204,222,204,227,205,231,207,233,209,235,216,237,221,233,225,228,241,229,245,235,251,233" href="index.php?page=salzburg" alt="" target="_self" />
 
<area id="karte9" title="" onmouseover="imageMap.src='uploads/keli/images/karte9.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="261,126,277,110,280,108,313,110,328,75,339,71,339,51,349,60,359,75,380,79,389,71,421,85,424,113,422,117,406,122,403,124,390,115,384,124,388,144,407,154,404,168,384,173,376,177,372,180,362,174,350,180,347,171,339,170,327,177,318,181,323,190,320,196,315,199,306,197,312,187,310,180,309,159,302,153,291,146,305,135,276,129" href="index.php?page=oberoesterreich" alt="" target="_self" />
 
<area id="karte7" title="" onmouseover="imageMap.src='uploads/keli/images/karte7.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="514,115,534,109,541,119,542,128,523,130,509,129,511,119,512,109" href="index.php?page=wien" alt="" target="_self" />
 
<area id="karte8" onmouseover="imageMap.src='uploads/keli/images/karte8.png';" onmouseout="imageMap.src='uploads/keli/images/oesterreich.png';" shape="poly" coords="426,46,435,35,456,36,482,48,505,59,528,63,535,54,548,57,564,65,570,85,562,97,568,113,575,128,561,132,548,141,541,147,529,143,525,147,525,153,519,157,516,163,516,170,518,175,520,182,520,189,519,191,517,198,515,201,511,201,503,201,499,198,493,188,489,184,476,176,465,168,456,163,447,160,435,158,435,164,426,169,413,169,408,169,403,166,410,150,405,147,399,146,393,142,383,136,383,128,384,127,390,130,391,117,397,122,411,127,420,123,433,118,427,104,425,85,420,82,406,72,405,65,414,54" href="index.php?page=niederoesterreich" alt="" target="_self" />
</map> 
<img src="uploads/keli/images/oesterreich.png" alt="" name="imageMap" usemap="#karte"/>

Janl · 27. Juni 2013 11:12

google . . .
http://mattstow.com/experiment/responsi … -maps.html

PatriziaF · 27. Juni 2013 11:33

ja das verwende ich ja.
funktioniert aber nicht.

NaN · 27. Juni 2013 11:39

Pack mal das letzte <IMG> nach oben vor die Map.
Ansonsten bräuchten wir mal einen Link um das im Einsatz sehen zu können.

Janl · 27. Juni 2013 11:52

Versuche erst mal das Beispiel 1 zu 1 nach zu machen inklusive Reihenfolge und Größenangaben.

Und wie Nan sagt, gibt es ein Link?

mfg
Jan

PatriziaF · 27. Juni 2013 12:20

hat auch nicht geholfen :-(

Link:
http://www.webdots.at/demo/keli/index.p … esterreich

Benutzer:*****
PW:*****

bitte seid gnädig mit mir, wir sind noch nicht fertig ;-)

DANKE für die prompten Rückmeldungen.

nockenfell · 27. Juni 2013 13:12

Zugangsdaten nur per PM versenden. Habe deshalb die Zugangsdaten gelöscht.

nicmare · 27. Juni 2013 13:13

hast du schonmal mit der Fehlerkonsole von Firefox gearbeitet? Siehe:
http://adrop.in/69j

Also gibt es Probleme mit der Einbindung von der rwdImageMaps Datei. Probiers mal mit nem absoluten pfad. Also {uploads_url} in der Pfadangabe

Beitrag geändert von nicmare (27. Juni 2013 13:14)

nicmare · 27. Juni 2013 13:17

in der demo wird übrigens jquery 1.7.2 verwendet. nimm das mal. kann sein dass das script nicht mehr kompatibel ist mit dem neuesten jquery

PatriziaF · 27. Juni 2013 13:33

@nockenfall: danke, aber das sind eh zugangsdaten die ich nur temporär für euch vergeben habe ;-)

@nicmare: ich arbeite mit firebug. ist die fehlerkonsole direkt bei firefox integriert? wie erreiche ich die?
EDIT: ha bin ich doof. habs gefunden - eh im firebug ;-)

also die .js datei wird ja aufgerufen, kann mir ja mittels firebug den code ansehen - also an dem kanns nicht liegen.
bzgl jquery-version: ich hatte vorher die 1.7.2 drin, da gings auch nicht. hab deswegen die neuere genommen ;-) aber hab jetzt wieder 1.7.2 rein getan.

warum glaub er dass rwdImageMaps keine Funktion ist?

im JS vom Matt Stow fängt die Funktion wie folgt an:

Hier klicken, um den Code zum Kopieren zu markieren

[== JS ==]
;(function(a){a.fn.rwdImageMaps=function(){var d=this,c=parseFloat(a.fn.jquery);.......

warum schreibt er hier fn dazwischen - was ist fn?
und warum ein ; vor der Funktion?

DANKE!!!

Beitrag geändert von PatriziaF (27. Juni 2013 13:38)

PatriziaF · 27. Juni 2013 14:21

also VIELEN DANK FÜR EURE ANREGUNGEN.
Ich hab aufgrund eure Rückmeldungen nochmal google bemüht und einen Beitrag von NAN von 2011 gefunden.

Darin steht: Setz die Javascripts mal nach unten kurz vor </body>

Sodala hab dann mal nach unten gescrollt.
und siehe da, da ist bereits js eingebunden.
also aufgeräumt und meine js da unten eingefügt.
TADA funktioniert. so einfach wärs gewesen *auf den kopf greife*

Sry fürs stören und vielen vielen dank für die anregungen - ohne euch wär ich da nicht draufgekommen!

LG

NaN · 27. Juni 2013 14:50

Nur kurz zur Ergänzung:

warum schreibt er hier fn dazwischen - was ist fn?

Weil das so gemacht wird.
Laienhaft ausgedrückt: Unter "fn" findet man alle jQuery-Funktionen. Das jQuery-Plugin "Responsive Image Maps" erweitert also jQuery um die Funktion "rwdImageMaps", wobei "a" hier nichts weiter als eine Variable ist, die "jQuery" beinhaltet. ( a.fn.rwdImageMaps = function(){...} ) Das muss Dir erstmal als Erklärung reichen, denn sonst musst Du Dir noch die Erklärung von "prototype" über Dich ergehen lassen. Und das führt jetzt zu weit.

und warum ein ; vor der Funktion?

Weil darum.
Könnte ja sein, dass vorangegangene Scripts die letzte Zeile nicht ordnungsgemäß mit einem Semicolon beendet haben bzw. dass das letzte Semicolon beim Minimieren des Scriptes entfernt wurde (Juckt den Javascript-Interpreter nämlich wenig, wenn das die letzte Zeile im Script ist. Allerdings weiß ja keiner, dass da noch Scripte folgen. Kann ja jeder machen wie er will.) Ist also nur da, um auf Nummer sicher zu gehen.

PatriziaF · 27. Juni 2013 15:02

danke dir. war sehr lehrreich heute!

Forum für CMS/made simple

#1 27. Juni 2013 10:20

[GELÖST] responsive area maps

#2 27. Juni 2013 11:12

Re: [GELÖST] responsive area maps

#3 27. Juni 2013 11:33

Re: [GELÖST] responsive area maps

#4 27. Juni 2013 11:39

Re: [GELÖST] responsive area maps

#5 27. Juni 2013 11:52

Re: [GELÖST] responsive area maps

#6 27. Juni 2013 12:20

Re: [GELÖST] responsive area maps

#7 27. Juni 2013 13:12

Re: [GELÖST] responsive area maps

#8 27. Juni 2013 13:13

Re: [GELÖST] responsive area maps

#9 27. Juni 2013 13:17

Re: [GELÖST] responsive area maps

#10 27. Juni 2013 13:33

Re: [GELÖST] responsive area maps

#11 27. Juni 2013 14:21

Re: [GELÖST] responsive area maps

#12 27. Juni 2013 14:50

Re: [GELÖST] responsive area maps

#13 27. Juni 2013 15:02

Re: [GELÖST] responsive area maps

Fußzeile des Forums