class Attribut in einer <area> sensitive Grafik

[jule82]

Hallo leute,

ich hab leider ein kleines Problemchen :)
Und zwar hab ich mir eine Seite zusammengebastelt, wo ich oben ein Bild mit area Bereichen hab, welche über href="#anchor" in eine unter dem Bild liegende Tabelle, in die jeweilige Zeile verweisen.

Soweit alles gut :)
Nun möchte ich jedoch als Attribut nicht href="",
sondern class"dokument" anbinden, da ich eine dokumente.htm habe in der alle Dokumente in class sortiert sind, da sich die Dateinamen ständig ändern.

Das funktioniert leider nicht :(

Beispiel:

<area shape="rect" coords="37, 107, 351, 564" class="dokument1" alt="Dokument1">

Wer kann mir da helfen?
Vielen Dank im voraus

[ChrisB]

Hi,

Nun möchte ich jedoch als Attribut nicht href="",
sondern class"dokument" anbinden, da ich eine dokumente.htm habe in der alle Dokumente in class sortiert sind, da sich die Dateinamen ständig ändern.

Ich habe keine Idee, was du damit meinen koenntest.

MfG ChrisB

[jule82]

Hi Chris,

also:

Ich verschiedene dokumente in einem Verzeichnis. Diese Dokumente hab ich auf einer Seite aufgelistet und mit jeweiligen class-namen versehen.
Beispiel:

<tr id="dokument1">
<td><a href="../../../../../dokument1.1.xls" target="_blank">Dokumenteins</a></td>
</tr>

<tr id="dokument2">
<td><a href="../../../../../dokument2.1.xls" target="_blank">Dokumentzwei</a></td>
</tr>

....usw.

Und dann hab ich mehrere Html-Seiten mit Tabellen, wo ich auf diese Dokumente über

Ausschnitt:

<tr>
<td>
<li><a class="dokument1">Dokument1</a>/</li>
</td>
</tr>

aufrufe.(Funktioniert wunderbar)

So und nun bin ich grade dabei diese Tabellen abzuschaffen und mit .gifs zu ersetzen.

Ausschnitt:

<map name="Uebersicht" id="Uebersicht">

<area shape="rect" coords="170, 200, 354, 291" href="http://www.google.de"  alt="Google">

</map>

<img border="0" id="Level3IMG" class="Bild" src="../../image/bild.gif" width="852" height="560" alt=""   usemap="#Uebersicht" style="position:absolute; z-index:20; left:20;">
....

funktionert soweit auch alles.

Nun möchte in dieser Area fläche die class="dokument1" anbinden, dass man durch Klick auf die Fläche, das Dokument1 öffnen kann.
Jedoch öffnet zeigt er mir immer
Die Seite kann nicht angezeigt werden.

Ich hoffe ich hab mein Problem genau genug geschildert :)

[Sven Rautenberg]

Moin!

Ich verschiedene dokumente in einem Verzeichnis. Diese Dokumente hab ich auf einer Seite aufgelistet und mit jeweiligen class-namen versehen.

Wo sind in diesem Beispiel irgendwelche Class-Namen?

Beispiel:

<tr id="dokument1">
<td><a href="../../../../../dokument1.1.xls" target="_blank">Dokumenteins</a></td>
</tr>

<tr id="dokument2">
<td><a href="../../../../../dokument2.1.xls" target="_blank">Dokumentzwei</a></td>
</tr>

Ich sehe nämlich keine!

Und weil auch ChrisB keine sieht, ist dass schon der grundlegende Irrtum - vermutlich auf deiner Seite.

Und dann hab ich mehrere Html-Seiten mit Tabellen, wo ich auf diese Dokumente über

Ausschnitt:

<tr>
<td>
<li><a class="dokument1">Dokument1</a>/</li>
</td>
</tr>

aufrufe.(Funktioniert wunderbar)

Bezweifle ich einfach mal. Wobei die Frage ist, was du unter "funktioniert" verstehst, und in welchem Browser.

- Sven Rautenberg

[jule82]

Hihi sorry wenn ich mich nicht so gut ausdrücken kann.
Ich meinte natürlich IN DER DOKUMENTEN.HTM SIND DIE DOKUMENTE MIT IDs VERSEHEN WORAUF ICH DANN VON ANDEREN SEITEN AUS IN VERWENDUNG VON CLASS DIESE DOKUMENTE ÖFFNEN KANN.

Also wenn ich in der table auf die Dokument1 klicke, öffnet er dieses Dokument

<li><a class="dokument1">Dokument1</a>/</li>
.

Jetzt will ich quasi, dass selbe in der area fläche bezwecken.
Sodass man beim drauf klicken eines area-Bereiches auf einer map,
dieses Dokument1 öffnen kann.

:(

kann mir niemand helfen?

wäre euch wirklich dankbar

[Sven Rautenberg]

Moin!

Ich meinte natürlich IN DER DOKUMENTEN.HTM SIND DIE DOKUMENTE MIT IDs VERSEHEN WORAUF ICH DANN VON ANDEREN SEITEN AUS IN VERWENDUNG VON CLASS DIESE DOKUMENTE ÖFFNEN KANN.

Und genau das funktioniert halt nicht. Nicht laut HTML-Standard. Nicht in "normalen Browsern" wie dem Firefox oder Opera.

Ich will nicht ausschließen, dass du da eventuell einen extrem ekligen, verurteilenswerten Bug eines alten Internet Explorers ausnutzen kannst, der sich irgendwie denkt "Hm, Link ohne href - was mach ich denn da mal schlaues? Ach, einfach auf die zum Class-Attribut gleichlautende ID springen (Vielleicht springt er ja auch auf die ID, die als Bildschirmtext innerhalb des <a></a> steht).".

Dieses Verhalten ist aber absolut neben der Spur, gehört verboten, ist nicht standardisiert, wird nie konsistent funktionieren - und genau deshalb klappts auch nicht mit der Area, egal wie sehr du dir das wünschst. Einfach weil du HTML-technisch absoluten Unsinn vor hast.

Jetzt will ich quasi, dass selbe in der area fläche bezwecken.
Sodass man beim drauf klicken eines area-Bereiches auf einer map,
dieses Dokument1 öffnen kann.

Wenn du ein Dokument verlinkst, dann muss das in einem <a>-Element geschehen - die Adresse gehört ins href-Attribut:
<a href="dokument1.xls">Dokument 1</a>

Wenn du dem Linkelement jetzt eine ID gibst, oder einem TR-Element drumherum, dann wirkt diese ID wie ein Sprunganker:
<a id="dok1" href="dokument1.xls">Dokument 1</a>

Das bedeutet, du kannst von anderen HTML-Dokumenten, oder auch innerhalb dieses Dokuments, so verlinken, dass der Browser direkt den Bereich mit dieser ID oben im Fenster anzeigt, und nicht den Seitenanfang. Das geht mit dem sogenannten "Fragment-Identifier" hinter dem Doppelkreuz:

<a href="#dok1">Spring zum Anker</a>

Allerdings wird durch diesen Link nicht das Dokument geladen, was an der Stelle verlinkt ist, an der der Anker steht. Es wird nur dieser Link ins Blickfeld des Browserfensters geholt.

Am besten liest du dir mal das Link-Kapitel in SELFHTML durch. Da steht das alles beschrieben: http://de.selfhtml.org/html/verweise/projektintern.htm#anker (PS: In diesem Link ist auch ein Anker drin).

- Sven Rautenberg

[jule82]

:( schade, dass du mir da nicht helfen kannst.

Also ich verstehe nicht warum dass unsinn sein sollte.

Es geht einfach darum, dass ich nicht den relativen Pfad eintragen möchte, da der Aufwand bei der Namensänderung des Dokumentes zu groß wäre.

Deswegen möchte ich das dynamisieren.

Bitte bitte bitte.

wer kann mir da helfen

??

[Sven Rautenberg]

Moin!

:( schade, dass du mir da nicht helfen kannst.

Also ich verstehe nicht warum dass unsinn sein sollte.

Ich glaube, du nimmst mich nicht ernst, oder veräppelst mich.

Ich habe dir erklärt, warum dein bisheriger Ansatz ohne die <area> schon nicht funktioniert.

Und mehrfach gefragt, in welchem Browser das denn bei dir funktionieren soll, weil ich mir nicht vorstellen kann, was du unter "funktioniert" verstehst. Diese Frage hast du bislang gekonnt ignoriert.

Beantworte diese Frage einfach.

Ohne Antwort kann ich nicht im mindesten nachvollziehen, was du da noch in der alten Seitenversion zusammengebastelt hast. Ich glaub' dir ja gerne, dass es aus deiner Sicht "funktioniert", aber ich kann halt nicht in meine Kristallkugel gucken und sehen, was du darunter verstehst.

Einleuchtend ist es anhand deines Codes jedenfalls nicht.

Es geht einfach darum, dass ich nicht den relativen Pfad eintragen möchte, da der Aufwand bei der Namensänderung des Dokumentes zu groß wäre.

Die Sache ist relativ simpel: Wenn du eine Verlinkung auf eine Ressource hast, dann muss die korrekte URL im Attribut href erscheinen. Egal ob es sich um einen Link mit <a> oder mit <area> handelt.

Wenn du im gleichen Dokument an ZWEI Stellen einen Link auf dasselbe Dokument haben willst, dann muss ZWEIMAL dieselbe Angabe im href-Attribut erscheinen.

Alles andere funktioniert nicht - da gebe ich dir Brief und Siegel. Es sei denn, da spielen noch Faktoren mit hinein, von denen du bislang nichts berichtet hast.

Und genau deshalb: Welcher Browser?

- Sven Rautenberg

[jule82]

Ich hab den IE6. Und nur da sollen die HTML Seiten funktionieren.

Es kann sein dass die Beispiele die ich hier kopiert habe nicht 1 zu 1 übereinstimmen. Ich kann aber beim Klick auf die Dokumente die in der table stehen, direkt öffnen die mit class="dokument1" angebunden sind und nicht mit href="".
DIE DOKUMENTE GEHEN AUF!!!!!!!!!!!!

Und es ist nicht möglich dass analog mit einer Area Fläche zu realisieren???

Ich verstehe die Welt nicht mehr

[Sven Rautenberg]

Moin!

Ich hab den IE6. Und nur da sollen die HTML Seiten funktionieren.

Aber wir lange gibts den IE6 noch? Bei Vista ist direkt Version 7 dabei, für XP setzt Microsoft alles daran, die Benutzer zu Updates zu verführen, Windows 2000 stirbt langsam aus, und immer weniger Webseiten unterstützen den IE6 und dessen abstruse Fehler.

Es kann sein dass die Beispiele die ich hier kopiert habe nicht 1 zu 1 übereinstimmen.

Das ist schlecht. Wie du siehst: Es geht um JEDES Detail. Gerade weil du nicht genau weißt, was sich technisch abspielt und es auch nicht sicher bezeichnen kannst, darfst du keine ungefähren Umschreibungen des Quellcodes liefern, sondern exakte Kopien deines jetzigen Zustands.

Mir ist nicht klar, was genau du da jetzt an Seiten zusammengesetzt hast. Kannst du ein Minimalbeispiel bauen, in dem sich genau ein Dokument, was sich öffnen soll, befindet, und in dem die Variante ohne GIFs auf Klick funktioniert?

Und es ist nicht möglich dass analog mit einer Area Fläche zu realisieren???

Das class-Attribut ist nicht dazu da, irgendeine Verlinkung durchzuführen. Ich weiß nicht, warum das bei dir funktioniert, aber ich bin sicher, dass da mehr hintersteckt, als du derzeit erzählen konntest.

- Sven Rautenberg

[jule82]

Das Problem ist, dass ich das Konzept nicht aufgestellt habe sonder es übernommen habe. Also hier nochmal mein Beispiel:

Vorlagen.htm:

<?xhtml version="1.0" encoding="utf-8"?>

<html>
<head>

<body onLoad="check(); changeTitleMenuLinks();" id="VorlagenundMethodenHTML">

<table>
<tr id="Teilnehmerliste">
     <td><a href="../Teilnehmerliste-V1-0.xls" target="_blank">Teilnehmerliste</a></td>
</tr>

</table>
</body>
</html>

Vorlagen.js:

/***** In dieser Datei sind alle Relation von Vorlagen *****/
/***********************************************************/
/******* und Methoden zu den jeweiligen HTML-Seiten ********/

function check(){

/* HTML ist der HTML-Name der aufgerufenen Seite ********/
   var HTMLName = parent.window.location.href;
   var HTML = HTMLName.split("/");
   var HTMLIndex = HTML[HTML.length-1].indexOf("#");
   if(HTMLIndex > 0) {
HTML=HTML[HTML.length-1].slice(0, HTMLIndex);
   } else {
    HTML=HTML[HTML.length-1];
   }

if (HTML=="test.htm") {

	var Vorlagen = new Array("Teilnehmerliste");  

.....

javascript.js:

....

// Zur Optimierung wird nur je eine der Tabellen durchsucht. (Methoden, Vorgaben, Vorlagen)
var as;
if(LinkObj.className.search(/methode/i) != -1){
as = xmlDoc.getElementsByTagName("table")[2].getElementsByTagName("tr");
} else if ((LinkObj.className.search(/vorgaben/i) != -1) || (LinkObj.className.search(/VA/) != -1)) {
as = xmlDoc.getElementsByTagName("table")[3].getElementsByTagName("tr");
} else if (LinkObj.className.search(/RB/i) != -1) {
as = xmlDoc.getElementsByTagName("table")[4].getElementsByTagName("tr");
}else {
as = xmlDoc.getElementsByTagName("table")[1].getElementsByTagName("tr");
}

// Durchsuchen der Tabelle und erzeugen des Links.
for(var i=0; i < as.length;i++){
if(as[i].getAttribute("id") == LinkObj.className) {

			LinkObj.href = as[i].getElementsByTagName("a")[0].getAttribute("href");  
			LinkObj.target = "\_blank";  
			  
			return true;  
		}  

}

return false;

...

test.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<li><a class="Teilnehmerliste">Teilnehmerliste</a></li>

Es funktioniert!!!

[Sven Rautenberg]

Moin!

Das Problem ist, dass ich das Konzept nicht aufgestellt habe sonder es übernommen habe. Also hier nochmal mein Beispiel:

Das Beispiel enthält extrem viel Javascript.

Und sowas hatte ich vermutet. Nur das Javascript sorgt dafür, dass dein Link funktioniert. Deshalb ist aber auch klar, dass es nicht reicht, den einen Link einfach durch einen anderen Link zu ersetzen - da muss das Javascript schon mit geändert werden.

Ich habe allerdings wenig Lust, da jetzt in diesen Javascript-Fragmenten herumzuwurschteln. Das Class-Attribut als javascript-mäßig ausgewerteten Verweis auf eine ID eines <tr>-Elements zu verwenden, um dann den darin enthaltenen Link aufzurufen, würde ich jedenfalls als eher abenteuerlich bezeichnen.

Dein Problem ist: Das Javascript sucht <a>-Elemente in <tr>-Elementen, und findet sie nicht, weil du <area> verwendest.

- Sven Rautenberg

[jule82]

Danke Sven. Jetzt weiss ich zumindest was das Problem ist. Ich hab versucht das auf "area" zu ändern, jedoch vergebens. Wär wäre denn bereit mir zu helfen? :(
Bitte bitte. Ich bin kein Javascript-Experte.

LG

Julia

[jule82]

Also ich hab nach langem suchen gefunden was erweitert werden muss:
Hier ist der Code aus der Javascript.js:

Nicht erschrecken. Hihi.

/** Jeder Link wird in der Statusbar formatiert *******/
/** Start *******/

var AllA = document.getElementsByTagName("a");
for (var i=0; i < AllA.length; i++) {
var boolcheck = true;

	if(AllA[i].href == "" && AllA[i].name == "" && currentSiteName != "I\_Glossar.htm")  
		boolcheck = makeLink(AllA[i]);  
	  
	var Link = decodeURI(AllA[i].href);  
	var LastIndex = Link.lastIndexOf("/");  
	var HTMLAdress = Link.slice(LastIndex).slice(1);  
	var HTMLAdressName = AllA[i].innerText != undefined ? AllA[i].innerText : AllA[i].textContent;  
	var currentSiteLink = decodeURI(window.location.href).split("#")[0];  
	var Text;  
	  
	var currentSiteName = currentSiteLink.slice(currentSiteLink.lastIndexOf("/")).slice(1);  

	if(HTMLAdressName!="Input" && HTMLAdressName!="Output" && boolcheck) {  

		if(HTMLAdressName.length <=0){  
			if(Link.search(/SelectPhase/) != -1) {  
				var LinkSplit = Link.split("'");  
				Text = "Markieren: " + LinkSplit[1] ;  
			} else {  
if(typeof Phasen[HTMLAdress.slice(7,8)] == "string") {  
   Text = "GoTo: " + Phasen[HTMLAdress.slice(7,8)] + " ( " + HTMLAdress + " )";  
	} else {  

		if(AllA[i].getElementsByTagName("img")[0])  
						Text = "GoTo: " + AllA[i].getElementsByTagName("img")[0].alt + " ( " + HTMLAdress + " )";  
				}  
			}  
		} else if((Link.search(currentSiteLink)!=-1) || HTMLAdress.length <= 0){  
		if(HTMLAdressName < 10)  
		Text = "GoTo: DR " + HTMLAdressName + " ( " + HTMLAdress + " )";					  
		else  

		Text = "GoTo: " + HTMLAdressName;  
	      } else {  
			if(HTMLAdressName < 10)  
			Text = "GoTo: DR " + HTMLAdressName + " ( " + HTMLAdress + " )";					  
		else  
			Text = "GoTo: " + HTMLAdressName + " ( " + HTMLAdress + " )";  
		}  
		  
	if(AllA[i].name.length > 0){  
	Text = "GoTo: " + AllA[i].name;  
	}  
	AllA[i].name = Text;  
		  
	AllA[i].onmouseover = function(e){  
	return statusbarcheck(this.name);  
	}  
		  
	//AllA[i].outerHTML = "<A onmouseover=\"return statusbarcheck('" + Text + "')\" " + AllA[i].outerHTML.slice(2);  
	}  
}  
/\*\* Ende \*\*\*\*\*\*\*/  

Hier müsste ich jetzt quasi anstelle von getElementsByTagName("a"); alles auf "area" referieren wenn ich mich nicht täusche oder?

LG

[Gunnar Bittersmann]

@@jule82:

<?xhtml version="1.0" encoding="utf-8"?>

Was soll das werden? Es gibt keine XHTML-Deklaration. Eine XML-Deklaration sähe so aus:

<?xml version="1.0" encoding="utf-8"?>

Sollte aber weggelassen werden, um alte IEs nicht in den Quirksmodus zu schicken.

Vorlagen.htm:

<html>
<head>

<body onLoad="check(); changeTitleMenuLinks();" id="VorlagenundMethodenHTML">

Fehler:
• 'title'-Element fehlt.
• </head>-Endtag fehlt.
• Es gibt kein Attribut 'onLoad'.

Beachte die <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschiede zwischen XHTML und HTML>!

test.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Fehler: In HTML gibt es kein 'xmlns'-Attribut. Beachte die <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschiede zwischen XHTML und HTML>!

Live long and prosper,
Gunnar

[MudGuard]

Hi,

<td>
<li><a class="dokument1">Dokument1</a>/</li>
</td>

li-Elemente haben in td nichts verloren, die dürfen nur in Listen-Elementen (im wesentlichen ul und ol) vorkommen.

<area shape="rect" coords="170, 200, 354, 291"

coords muß eine kommagetrennte Liste von Koordinaten enthalten, nicht eine komma-und-leerzeichen-getrennte Liste.

<img border="0" id="Level3IMG" class="Bild" src="../../image/bild.gif" width="852" height="560" alt=""   usemap="#Uebersicht" style="position:absolute; z-index:20; left:20;">

20 ist kein gültiger Wert für left, es fehlt die Einheit.

funktionert soweit auch alles.

Wenn das tatsächlich funktionieren sollte, dann ist das eher Zufall.

Nun möchte in dieser Area fläche die class="dokument1" anbinden, dass man durch Klick auf die Fläche, das Dokument1 öffnen kann.

Das class-Attribut hat nichts mit der Verlinkung zu tun, dafür ist das href-Attribut zuständig.

Ich hoffe ich hab mein Problem genau genug geschildert :)

Nö.
Es fehlt z.B. ein nachvollziehbares Online-Beispiel.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

»» <area shape="rect" coords="170, 200, 354, 291"

coords muß eine kommagetrennte Liste von Koordinaten enthalten, nicht eine komma-und-leerzeichen-getrennte Liste.

Wo genau liest du heraus, dass dort keine Leerzeichen stehen dürften?

Live long and prosper,
Gunnar

[MudGuard]

Hi,

@@MudGuard:

»» »» <area shape="rect" coords="170, 200, 354, 291"
»»
»» coords muß eine kommagetrennte Liste von Koordinaten enthalten, nicht eine komma-und-leerzeichen-getrennte Liste.

Wo genau liest du heraus, dass dort keine Leerzeichen stehen dürften?

Aus "Coordinates are relative to the top, left corner of the object. All values are lengths. All values are separated by commas."

Da wird nichts erwähnt von Whitespace, Space oder ähnlichem.
Und ich kann mich erinnern, daß einige Browser auf die Leerzeichen mit Ignoranz des gesamten Attributs reagierten.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

Aus "Coordinates are relative to the top, left corner of the object. All values are lengths. All values are separated by commas."

Da wird nichts erwähnt von Whitespace, Space oder ähnlichem.

Ich kann aus [HTML401 §6.6] nicht herauslesen, dass lengths nicht von Whitespace umgeben sein dürfen.

Live long and prosper,
Gunnar