Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

wie funktioniert das mit “rect coords”
 
[JJ]
Sr. Member
 
Avatar
Total Posts:  294
Joined:  2009-02-02
Eifel /Kreis EU
 

ich versuche schon den halbenTag die CMS Seite “Electronics Landing” zu ändern.
Und zwar möchte einfach nur zu Testzwecken ein anderes Bild einfügen.
Das Ganze sieht im Original wie folgt aus:

<div class="left" style="width:284px; margin-right:25px;">
<
h3 style="margin-bottom:0;"><a href="{{store direct_url="electronics/cell-phones.html"}}"><img src="{{skin url='images/media/head_electronics_cellphones.gif}}" alt="Cell Phones" style="display:block; border:0;"/></h3>
<
p><img src="{{skin url='images/media/test2.jpg}}" alt="" usemap="#Map" border="0"/></p>
</
div>
<
div class="left" style="width:284px;">
<
h3 style="margin-bottom:0;"><a href="{{store direct_url="electronics/cameras/digital-cameras.html"}}"><img src="{{skin url='images/media/head_electronics_digicamera.gif}}" alt="Digital Cameras" style="display:block; border:0;"/></a></h3>
<
p><img src="{{skin url='images/media/electronics_digitalcameras.jpg}}" alt="" usemap="#Map2" border="0"/></p>
</
div>

<
div class="clear"></div>
<
div class="clear"></div>
<
div class="clear"></div>

<
map name="Map">
  <
area shape="rect" coords="14,154,78,182" href="{{store direct_url="electronics/cell-phones.html?manufacturer=3"}}">
  <
area shape="rect" coords="12,177,80,209" href="{{store direct_url="electronics/cell-phones.html?manufacturer=20"}}">
  <
area shape="rect" coords="104,158,167,181" href="{{store direct_url="electronics/cell-phones.html?manufacturer=2"}}">
  <
area shape="rect" coords="103,181,179,208" href="{{store direct_url="electronics/cell-phones.html?manufacturer=101"}}">
 <
area shape="rect" coords="16,203,273,432" href="{{store direct_url="electronics/cell-phones/blackberry-8100-pearl.html"}}">
</
map>

<
map name="Map2">
  <
area shape="rect" coords="14,152,75,179" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=33"}}">
  <
area shape="rect" coords="109,154,163,183" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=31"}}">
  <
area shape="rect" coords="14,177,73,208" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=32"}}">
  <
area shape="rect" coords="106,180,177,211" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=34"}}">
</
map>

Wenn ich versuche ein anderes Bild einzufügen, werden leider die Verlinkungen nicht mehr angezeigt. Auch habe ich eine Bilddatei genommen, die von den Maßen genau so ist wie das Original.

Das Ganze sieht dann so aus:

<div class="left" style="width:284px; margin-right:25px;">
<
h3 style="margin-bottom:0;"><a href="{{store direct_url="electronics/cell-phones.html"}}"><img src="{{skin url='images/media/head_electronics_cellphones.gif}}" alt="Cell Phones" style="display:block; border:0;"/></h3>
<
p><img src="{{skin url='images/media/test1.jpg}}" alt="" usemap="#Map" border="0"/></p>
</
div>
<
div class="left" style="width:284px;">
<
h3 style="margin-bottom:0;"><a href="{{store direct_url="electronics/cameras/digital-cameras.html"}}"><img src="{{skin url='images/media/head_electronics_digicamera.gif}}" alt="Digital Cameras" style="display:block; border:0;"/></a></h3>
<
p><img src="{{skin url='images/media/test2.jpg}}" alt="" usemap="#Map2" border="0"/></p>
</
div>
<
div class="clear"></div>
<
div class="clear"></div>
<
div class="clear"></div>

<
map name="Map">
  <
area shape="rect" coords="14,154,78,182" href="{{store direct_url="electronics/cell-phones.html?manufacturer=3"}}">
  <
area shape="rect" coords="12,177,80,209" href="{{store direct_url="electronics/cell-phones.html?manufacturer=20"}}">
  <
area shape="rect" coords="104,158,167,181" href="{{store direct_url="electronics/cell-phones.html?manufacturer=2"}}">
  <
area shape="rect" coords="103,181,179,208" href="{{store direct_url="electronics/cell-phones.html?manufacturer=101"}}">
 <
area shape="rect" coords="16,203,273,432" href="{{store direct_url="electronics/cell-phones/blackberry-8100-pearl.html"}}">
</
map>

<
map name="Map2">
  <
area shape="rect" coords="14,152,75,179" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=33"}}">
  <
area shape="rect" coords="109,154,163,183" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=31"}}">
  <
area shape="rect" coords="14,177,73,208" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=32"}}">
  <
area shape="rect" coords="106,180,177,211" href="{{store direct_url="electronics/cameras/digital-cameras.html?manufacturer=34"}}">
</
map>

Wer sagt mir, warum es nicht funktioniert???

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Also die Bildgröße ist zu 100% egal. Diese Imagemaps definieren ja nur mit diesen coords also Koordinaten auf welche Größe bzw. Fläche ein Link funktionieren soll. In dem Fall auf einer Grafik mehr als ein Link, daher wurde hier mit ImageMaps gearbeitet.

Mir ist aber aufgefallen das die Links von der Seite die du beschreibst generell ins Leere gehen oder? Auch die Originalen - stimmts?
Habe gerade heraus gefunden, wenn man mit sample-data installiert hat, dann muss man erst unter Cache Verwaltung ein mal diese “Katalog Rewrites” aktualisieren - danach treffen auch die Links Ihr Ziel.

Nun hättest du erst die Basis um loszulegen mit deinen eigenen Links.

Hier noch eine Info zu den Image Maps (da steht auch welche Arten es gibt & wie diese Koordinaten zu deuten sind)
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
[JJ]
Sr. Member
 
Avatar
Total Posts:  294
Joined:  2009-02-02
Eifel /Kreis EU
 
ds_1984 - 29 April 2009 12:39 PM

Also die Bildgröße ist zu 100% egal. Diese Imagemaps definieren ja nur mit diesen coords also Koordinaten auf welche Größe bzw. Fläche ein Link funktionieren soll. In dem Fall auf einer Grafik mehr als ein Link, daher wurde hier mit ImageMaps gearbeitet.

Mir ist aber aufgefallen das die Links von der Seite die du beschreibst generell ins Leere gehen oder? Auch die Originalen - stimmts?
Habe gerade heraus gefunden, wenn man mit sample-data installiert hat, dann muss man erst unter Cache Verwaltung ein mal diese “Katalog Rewrites” aktualisieren - danach treffen auch die Links Ihr Ziel.

Nun hättest du erst die Basis um loszulegen mit deinen eigenen Links.

Hier noch eine Info zu den Image Maps (da steht auch welche Arten es gibt & wie diese Koordinaten zu deuten sind)
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

LG - Daniel

Hallo Daniel,

mein Problem ist, dass die Links, sowalb ich eine andere Grafik nehme erst gar nicht angezeigt werden. Den Link zu selfhtml kannte ich schon, habe auch da mal nach ne Lösung gesucht, aber.....

Wie gesagt, die Links werden nicht mehr angezeigt, sobald eine andere Grafik genommen wird (in meinem Beispiel mit test1.jpg und test2.jpg s.o.).
Die Tatsache, dass sie ins leere führen, sind erstmal zweitrangig wink, sie sollen erst angezeigt werden wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
[JJ]
Sr. Member
 
Avatar
Total Posts:  294
Joined:  2009-02-02
Eifel /Kreis EU
 

Hallo Daniel,

ich weiß mir nicht mehr zu helfen, das Bild wird angezeigt, die links nicht.
Wärst du so lieb und würdest mir weiterhelfen wenn ich dir das Bild zusendenwürde?? per PN??? Vielleicht (bestimmt) mache ich im Code was falsch :-(

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Kannst du machen (Bild bzw. Bilder zuschicken)

Kann dir aber nicht versprechen das ich es hin bekomme.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
[JJ]
Sr. Member
 
Avatar
Total Posts:  294
Joined:  2009-02-02
Eifel /Kreis EU
 

Ich konnte mein Problem lösen, mir war nicht bewusst, dass die Begriffe die verlinkt werden sollen im Bildbearbeitungsprogramm schon in der Grafik positioniert (geschrieben) werden müssen.
Anschließend müssen die Koordinaten dieser Begriffe ermittelt werden um dort die Verlinkung zu positionieren.

Auf der Suche nach einer Lösung habe ich ein interessantes Tool gefunden, was ich euch nicht vorenthalten möchte.

FastImageMap

 
Magento Community Magento Community
Magento Community
Magento Community
 
sfp77
Member
 
Total Posts:  71
Joined:  2008-11-29
 

Ich konnte mein Problem lösen.

Schön! grin

Mir war nicht bewusst, dass die Begriffe die verlinkt werden sollen im Bildbearbeitungsprogramm schon in der Grafik positioniert (geschrieben) werden müssen.

Das ist aber nicht richtig! Die HTML Image Map hat nichts damit zu tun, wie Du Deine Grafik aufbaust.
Ich hatte Dein Beispiel von oben in eine HTML-Datei kopiert, den Magento-Code entfernt und ein unbearbeitet Urlaubsbild von mir eingesetzt.
Alles hat wunderbar funktioniert. Ich konnte es nur nicht an einer Magento-Installation testen.

Danke für das Tool. Ich werde es mir bei Gelegenheit mal anschauen.

Viele Grüße,

Sören

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top