Coords in Picturemap relativ angeben ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anliegen
anpassen
bild
browser
code
feststehender begriff
gedanke
http
interesse
kreisen
medium
multiplikator
problem
url
vorliegen
weben
webseite
werk
zugang
zugriff
-
Hallo Gemeinschaft,
gibt es eine Möglichkeit die coords in einer Picturemap relativ und nicht absolut anzugeben?
Beispiel absolut:
<area shape="rect" coords="382, 75, 460, 168" title="Leonardo da Vinci" href="davinci.htm">
Ich möchte, dass ich die Map, die derzeit mit 800x600 angegeben ist, dynamisch (also in %) gestalte.
Selbstverständlich müsste ich hierbei auch die Koordinaten für die Spots abändern, aber wie?
Die coords für die linke obere Ecke ist 0,0.
Somit könnte ein Multiplikator in Abhängikeit von der Browserauflösung theoretisch zum Ziel führen.
Oder denke ich wirres Zeug, und ihr habt längst eine bessere Lösung.
LG Gary
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mit einfachem html leider nicht möglich.
Mithilfe von Javascrippt allerdings schon.
Ich fand's als Aufgabe mal spannend und habe da was gebastelt:
klickmich
Die Sache hat allerdings 2 Hacken.
-1) Ohne javascript gibts natürlich auch keine prozentualen AREA-Werte, Du könntest den Code so anpassen das das Bild nur bei aktiviertem javascript 100% x 100% groß ist.
-2) Mein Code wird nur einmal ausgeführt, wenn sich die Größe des Bildes danach ändert (zB indem die Fenstergröße verändert wird) ändern sich die Area-Werte nicht. Das könnte verbessert werden Indem die (anfänglichen )areas.coords-Werte in einem Array festgehalten werden und regelmäßig aktualisiert werden (onmouseover,onmousemove,zeitintervall o.ä.).
Hier noch einmal der js-Code:
//Die tatsachliche groesse des Bildes var defWidth = 345; var defHeight = 312; n = document.getElementById('landkarte'); //die Aktuelle groesse des Bildes in Pixel var actWidth = n.width; var actHeight = n.height; //multiplikator-Werte multWidth = actWidth/defWidth; multHeight = actHeight/defHeight; //alle AREA-Tags im Tag mit der Id "landkarte_areas" areas = document.getElementById('landkarte_areas').getElementsByTagName('AREA') for (i=0;i<areas.length;i++) { //alert(areas[i].coords); var numbers = areas[i].coords.split(','); var newCoords = "";var sw="H"; for (j=0;j<numbers.length;j++) { sw = (sw=="H")?"W":"H"; //alert(numbers[j]); newCoords += (sw=="W")? Math.round(numbers[j]*multWidth) : Math.round(numbers[j]*multHeight); newCoords += (j!=numbers.length-1)?',':''; } //alert('alte Werte:\n'+areas[i].coords+'\nNeue Werte:\n'+newCoords); areas[i].coords=newCoords; }
-
simuliertes schrieb:
...Die Sache hat allerdings 2 Hacken.
-1) Ohne javascript gibts natürlich auch keine prozentualen AREA-Werte, Du könntest den Code so anpassen das das Bild nur bei aktiviertem javascript 100% x 100% groß ist.
-2) Mein Code wird nur einmal ausgeführt, wenn sich die Größe des Bildes danach ändert (zB indem die Fenstergröße verändert wird) ändern sich die Area-Werte nicht. Das könnte verbessert werden Indem die (anfänglichen )areas.coords-Werte in einem Array festgehalten werden und regelmäßig aktualisiert werden (onmouseover,onmousemove,zeitintervall o.ä.).
Sorry, dass ich nicht sofort geantwortet habe.
Also ich finde das Skript super und würde es gerne mit deiner Erlaubnis in dieser oder leicht abgewandelter Form verwenden.
(mit Hinweis auf den Urheber im Quelltext)
Da meine Website sowieso ohne Java und Flash nicht auskommt, währe dein Skript ein echter Vorteil.
LG Gary
-
Sorry, aber der Ansatz ist weder Userfreundlich noch sinnvoll!
Wenn eine Graphik prozentual skaliert wird, leidet bei Vergrößerung der Darstellung die Qualität. Browser haben halt wenig Möglichkeiten, ein Bild in der Darstellung vernünftig umzurechnen.
Wenn deine Seite ohne JS nicht auskommt, hast Du einen grundsätzlichen Designfehler im System!
Das Skript von simuliertes löst zwar, zumindest nach oberflächlicher Betrachtung, dein Problem der Relativierung von Click-Koordinaten, ändert aber nichts am Grundlegenden Problem der Usability. Imagemaps sind prinzipiell schon ein Problem. Deren Funktion noch zusätzlich von einem Javascript abhängig zu machen, wäre für mich kein brauchbarer Weg.
FF -
fatfreddy schrieb:
Sorry, aber der Ansatz ist weder Userfreundlich noch sinnvoll!
Wenn eine Graphik prozentual skaliert wird, leidet bei Vergrößerung der Darstellung die Qualität. Browser haben halt wenig Möglichkeiten, ein Bild in der Darstellung vernünftig umzurechnen.
Wenn deine Seite ohne JS nicht auskommt, hast Du einen grundsätzlichen Designfehler im System!
Das Skript von simuliertes löst zwar, zumindest nach oberflächlicher Betrachtung, dein Problem der Relativierung von Click-Koordinaten, ändert aber nichts am Grundlegenden Problem der Usability. Imagemaps sind prinzipiell schon ein Problem. Deren Funktion noch zusätzlich von einem Javascript abhängig zu machen, wäre für mich kein brauchbarer Weg.
FF
Hi,
Da meine Seiten vom Konzept her einem Spiel ähnlich sind leidet die Grafik eher an der Verwinzlichung.
Während ich selbst mit einer Auflösung von 1680 x 1050 durchs Web browse, muss ich aus Rücksicht auf die ca. 50% User mit einer Auflösung von 1024 x 768 meine Maps verkleinern.
Genau aus diesem Grund ist mir das Skript wichtig, um Usern mit einer höheren Auflösung keine Miniatur anzubieten.
Ich hatte wohl selbst eine Zeit eine gewisse Java - Phobie und weiß noch nicht einmal weshalb.
Java = gefährlich, unschick oder gar ansteckend?
Ich habe keine Ahnung, bloß das Web ist voll damit und mir ist's eine Hilfe.
LG Gary
-
gerald-grinschgl schrieb:
Da meine Seiten vom Konzept her einem Spiel ähnlich sind leidet die Grafik eher an der Verwinzlichung.
Während ich selbst mit einer Auflösung von 1680 x 1050 durchs Web browse, muss ich aus Rücksicht auf die ca. 50% User mit einer Auflösung von 1024 x 768 meine Maps verkleinern.
Genau aus diesem Grund ist mir das Skript wichtig, um Usern mit einer höheren Auflösung keine Miniatur anzubieten.
Ok, wenn Du deine Seite als Spiel siehst, diktierst Du die Spielbedingungen. Ich sehe Webseiten eher als Informationsmedium, deren erste Aufgabe ist halt der Transfer von Informationen vom Autor zum User. Alle technischen/graphischen Spielereien können den Transfer zwar interessanter gestalten, sollten der Information aber untergeordnet sein. Wenn eine gewisse zusätzliche (sic!) Technik erforderlich ist, die Inhalte rüber zu bringen ist das ein Designproblem.
gerald-grinschgl schrieb:
Ich hatte wohl selbst eine Zeit eine gewisse Java - Phobie und weiß noch nicht einmal weshalb.
Java = gefährlich, unschick oder gar ansteckend?
Ich habe keine Ahnung, bloß das Web ist voll damit und mir ist's eine Hilfe.
<oberlehremodus Wir reden hier von JavaSCRIPT, nicht von Java</oberlehrermodus>
Es geht nicht um eine Phobie, sondern um sinnvollen Einsatz. Mit Javascript kann ich Mehrwert schaffen, oder, bei falschem Einsatz, Nutzbarkeit verhindern.
Inhalte einer Webseite sollten jedem Nutzer zugänglich sein. Eine Verbesserung für Javascriptnutzer ist legitim. Eine Zugangsbarriere für die, die es nicht nutzen wollen oder können (!), hingegen nicht.
Eine Imagemap ist für sich schon ein Problem, was allgemeine Zugänglichkeit angeht. Diese noch mit Javascript aufzubrezeln, macht es noch schlimmer.
Du, als malender Künstler solltest doch noch ein größeres Interesse daran haben, daß deine Webseite barrierefrei ist, also auch Sehbehinderten einen Zugang zu deinen Werken ermöglicht. Deine Website ist dein Medium, auch diesem Kreis von Nutzern, die eventuell deine Bilder nicht sehen können, dein Anliegen darzustellen.
FF
-
fatfreddy schrieb:
Du, als malender Künstler solltest doch noch ein größeres Interesse daran haben, daß deine Webseite barrierefrei ist, also auch Sehbehinderten einen Zugang zu deinen Werken ermöglicht. Deine Website ist dein Medium, auch diesem Kreis von Nutzern, die eventuell deine Bilder nicht sehen können, dein Anliegen darzustellen.
FF
Ja, hmmm... also dieses Beispiel von sehbehinderten Menschen lasse ich beiseite und komme zur Barrierefreiheit.
Um meine Website zu testen, klappere ich sämtliche @-Cafes der Stadt ab um zu sehen, wie das Ergebnis denn aussieht.
Bis dato konnte ich erst bei einer einzigen Location (free internet) meine Seite nicht öffnen (sowie 100te andere auch).
In meinem konkreten Fall ist doch eigentlich das "Nichtvorhandensein" einer dynamischen Map die wahre Barriere.
Ich habe mir schon Gedanken gemacht und einige Nachforschungen angestellt.
http://www.quora.com/How-many-sites-use-HTML5-and-Javascript
http://www.hobo-web.co.uk/best-screen-size/
Jetzt könnte ich mir das alles ersparen und wie du sagst, eine rein informative Seite bauen, aber das Web ist eben schon längere Zeit nicht mehr nur Information, sondern auch Unterhaltung.
Beides zusammen ergibt eine gute Mischung.
Mir persönlich gefällt meine Seite auch noch nicht, könnte ein wenig mehr konservativ im Design sein, aber das Konzept passt.
LG Gary
-
Der Gedanke ist eine Seite auch ohne javascript Navigier und betrachtungsfähig zu erhalten.
Javascript kann nun einmal in jedem Browser deaktiviert werden.
Den von mir gelieferten Code könnte man also problemlos entsprechend abändern.
-schreibe die Seite in html so das sie ohne javascript auskommt aber wo das Bild zu klein ist (für 1680 x 1050 User).
-Dann lässt Du per javascript Das Bild vergrößern (document.getElementbyId('bildId').width="100%" o.ä. Du wirst wohl auf das onload-element zurückgreifen müssen dabei)
-Und natürlich die coordinaten entsprechend mit javascript anpassen.
Im Ergebniss hast Du eine Barrierefreie Seite mit javascript.
Barrierefrei ist im Web ja bereits ein feststehender Begriff der bedeutet das jeder maximal möglichen zugriff auf die Seite hat egal was für körperliche oder Hard/Softwaretechnische Einschränkungen vorliegen.
-
simuliertes schrieb:
Der Gedanke ist eine Seite auch ohne javascript Navigier und betrachtungsfähig zu erhalten.
Javascript kann nun einmal in jedem Browser deaktiviert werden.
Den von mir gelieferten Code könnte man also problemlos entsprechend abändern.
-schreibe die Seite in html so das sie ohne javascript auskommt aber wo das Bild zu klein ist (für 1680 x 1050 User).
-Dann lässt Du per javascript Das Bild vergrößern (document.getElementbyId('bildId').width="100%" o.ä. Du wirst wohl auf das onload-element zurückgreifen müssen dabei)
-Und natürlich die coordinaten entsprechend mit javascript anpassen.
Im Ergebniss hast Du eine Barrierefreie Seite mit javascript.
Barrierefrei ist im Web ja bereits ein feststehender Begriff der bedeutet das jeder maximal möglichen zugriff auf die Seite hat egal was für körperliche oder Hard/Softwaretechnische Einschränkungen vorliegen.
Um ein Missverständnis aufzuklären, ich habe die Bilder für die Map in 1680 x 1050 gerändert und auf das Maß von 1024 x 768 verkleinert, um Usern mit eben ab dieser Auflösung eine barrierefreie Sicht zu ermöglichen.
Mit deinem Skript ist es mir nun möglich die Map prozentual anzugeben, was für Anwender mit niedriger Auflösung kein Nachteil ist, und denen mit höherer ein optimales Bild liefert.
Knackpunkt bei der Geschichte waren doch nur die statischen Spots.
Was die Map ansich betrifft, so habe ich bei keinen von mir getesteten Browsen ein Problem festgestellt.
Ein "roll back" zu älteren Versionen ist selbstverständlich nicht möglich, aber was würde mich veranlassen, eine alte Version zu verwendenden wenn eine neuere - verbesserte verfügbar ist.
Klar kann man Javascript im Browser deaktivieren oder nicht aktivieren, aber warum?
Eine Sicherheitslücke?, ja vermutlich - aber jeder ist selbstverantwortlich und Wege Schaden zu verbreiten vielfältig.
LG Gary -
Also ich habe jetzt keine große Motivation diese Diskussion zum 100ten mal erneut zu führen.
Also kurz:
1)
Wenn es doch möglich ist allen Nutzern die Webseite zur verfügung zu stellen warum willst Du es nicht tun (Wie , habe ich ja bereits kurz beschrieben)
2) Wenn Du schon Besucher Deiner Seite ohne Javascript ausschließen willst hinterlasse wenigstens einen Hinweis für Sie.
<noscript><b>Für diese Website benötigen Sie einen Browser mit aktiviertem Javascript!!</b></noscript>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
