inhaltlich leerer link wird im ie nicht angezeigt

[wichtelmann]

Hallo zusammen,
ich habe folgendes problem:
Ich will einen link als Maske über eine Grafik legen. Um dann beim Klicken auf den Link einen Javascript auszuführen. Im FF und in Chrome funktioniert dies auch bereits, jedoch wird im Internet explorer der link nicht angezeigt und kann dementsprechend nicht angezeigt werden.
Quellcode:

  
<div style="top:0px;left:0px;position:relative;width:100%;height:100%;z-index:10;">  
                              <a href="#1" onClick="pictureViewer(1,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#2" onClick="pictureViewer(2,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#3" onClick="pictureViewer(3,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#4" onClick="pictureViewer(4,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#5" onClick="pictureViewer(5,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
  
                         </div>  

der CSS teil dazu lautet:

  
.angel{  
 float:left;  
 min-width:20%;  
 min-height:100%;  
 top:0px;  
 left:0px;  
 position:relative;  
 margin:0px;  
 padding:0px;  
 cursor:pointer;  
 visibility:visible;  
}  

die javascript Funktionen funktionieren fehlerfrei und werden im Ie noch nicht mal aufgerufen, da ohne inhalt (mit "hallo" als Inhalt kann man den Text anklicken) die links nicht erscheinen.
Danke für eure Hilfe
Grüße Wichtelmann

[Matthias Apsel]

Om nah hoo pez nyeetz, wichtelmann!

Da gibt es viele Fragen

* welche Grafik?
* Wie sind die Anker definiert? (id="1" wäre verkehrt)
* Quirksmodus?

* wozu das Div?
* 5 mal class=angel ist 4 mal zuviel, nutze den Nachfahrenselektor

* verwende keine Inline-Styles
* und im endgültigen Dokument auch keine inline-Handler (siehe: http://molily.de/js/)

Matthias

[wichtelmann]

* welche Grafik?

Insgesamt sieht der relevante Abschnitt so aus. Folglich meine ich die class Bildleiste.

  
<div class="perledel"  id="picture" >  
                         <img class="bildleiste" style="z-index:2;"  src="images/ueSPerle2.jpg" onClick="" alt="" border="0" >  
                         <div style="top:0px;left:0px;position:relative;width:100%;height:100%;z-index:10;">  
                              <a href="#1" onClick="pictureViewer(1,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#2" onClick="pictureViewer(2,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#3" onClick="pictureViewer(3,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#4" onClick="pictureViewer(4,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
                              <a href="#5" onClick="pictureViewer(5,'Perle');switchVisible('picture','right_content')" class="angel" ><em></em></a>  
  
                         </div>  
                 </div>  

* Wie sind die Anker definiert? (id="1" wäre verkehrt)

Die Anker haben keine Funktion. Wäre es besser, wenn ich dann einfach nur href="#", schreibe? Ich will halt nicht, dass die Seite neu geladen wird.

* Quirksmodus?

Ich habe mal
<meta http-equiv="X-UA-Compatible" content="IE=8" />
ausprobiert, hat jedoch keinen Erfolg gehabt.:(

* wozu das Div?

Ohne das div funktioniert der script in keinem Browser. Mit immerhin in firefox safari und chrome.

* 5 mal class=angel ist 4 mal zuviel, nutze den Nachfahrenselektor

danke habe ich umgesetzt, hat aber scripttechnisch keine Relevanz gehabt

* verwende keine Inline-Styles

werden entfernt.

* und im endgültigen Dokument auch keine inline-Handler (siehe: http://molily.de/js/)

Würde es dies in diesem Fall nicht ungleich komplizierter machen, da ich dann wegen den übergebenen Parametern besser aufpassen müsste, welchem Objekt ich was "adde" und ich noch eine Seite habe mit der selben Funktion, jedoch anderem Parameter, aber nur ein script?

danke für die schnelle Antwort
grüße Janik

[Matthias Apsel]

Om nah hoo pez nyeetz, wichtelmann!

* welche Grafik?

Insgesamt sieht der relevante Abschnitt so aus. Folglich meine ich die class Bildleiste.

Das sieht mir sehr nach einer image-map aus.

Die Anker haben keine Funktion. Wäre es besser, wenn ich dann einfach nur href="#", schreibe? Ich will halt nicht, dass die Seite neu geladen

dann kann das href komplett weg.

* Quirksmodus?

ausprobiert, hat jedoch keinen Erfolg gehabt.:(

nicht doktorn, sondern wissen (selfhtmlwiki -> Grundgerüst)

* wozu das Div?
Ohne das div funktioniert der script in keinem Browser. Mit immerhin in firefox safari und chrome.

image-map

* und im endgültigen Dokument auch keine inline-Handler (siehe: http://molily.de/js/)
Würde es dies in diesem Fall nicht ungleich komplizierter machen, da ich dann wegen den übergebenen Parametern besser aufpassen müsste, welchem Objekt ich was "adde"

Auch dafür gibt es Lösungen, z.B. "this", die sich aber in Wohlgefallen auflösen, wenn es sich um eine image-map handelt.

Wenn du die Seite zeigtest, ließe sich dir effizienter helfen.

Matthias

[wichtelmann]

Es handelt sich um folgende seite:
http://yourangels.de/Perle.html oder alternativ:
http://yourangels.de/Edelstein.html.
Was ich erreichen will erkennt man, wenn man im Firefox oder im Chrome auf eines der Bilder klickt.
Das die Funktion auch im IE funktioniert habe ich daran erkannt, dass beim klicken auf weiter (unten in der Leiste rechts) das jeweils nächste bild korrekt angezeigt wird.
wichtelmann

[Matthias Apsel]

Om nah hoo pez nyeetz, wichtelmann!

Das Design der Seite gefällt mir sehr gut.

Möglicherweise stört sich der IE an dem fehlerHaften onClick. Bei der Gelegenheit könntest du noch utf-8 verwenden (und das Dokument als utf-8 speichern!), so kannst du auf Üaute verzichten. Mische nicht HTML und XHTML.

Matthias

[wichtelmann]

Hallo Matthias

Das Design der Seite gefällt mir sehr gut.

dankeschön:)

Möglicherweise stört sich der IE an dem fehlerHaften onClick.

Was ist an dem onClick fehlerhaft? in den anderen webbrowsern funktioniert es doch auch. und im Internet Explorer ist es auch kein Problem, wenn ich etwas in den Link reinschreibe. Ich bin daher eher davon ausgegangen, dass es daran liegt, dass er den Bereich nicht als link deklariert, da der link keinen Text hat.

Bei der Gelegenheit könntest du noch utf-8 verwenden (und das Dokument als »» utf-8 speichern!)

reicht es wenn ich in jede html-Datei folgendes eintrage?
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> oder soll ich, wie es mir der Validator vorschlägt
<?xml version="1.0" encoding="utf-8"?>
eintragen.

Grüße Janik

[Matthias Apsel]

Om nah hoo pez nyeetz, wichtelmann!

Möglicherweise stört sich der IE an dem fehlerHaften onClick.
Was ist an dem onClick fehlerhaft?

Der Handler heißt "onclick"

Bei der Gelegenheit könntest du noch utf-8 verwenden (und das Dokument als »» utf-8 speichern!)

reicht es wenn ich in jede html-Datei folgendes eintrage?
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> oder soll ich, wie es mir der Validator vorschlägt
<?xml version="1.0" encoding="utf-8"?>
eintragen.

entscheide dich entweder für HTML oder XHTML!

für HTML ersteres, für XHTML das zweite.

Und die Dokumente auch als "utf ohne BOM" speichern!

beseitige dann auch die Fehler, die der Validator zeigt.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Ergänzung:
  * was spricht gegen die Verwendung einer image-map?
  * was spricht gegen die Verwendung der Konstruktion <a ><img></a>?
  * Zur Not: Schreibe einen (sinnvollen!) Text in den Link und blende ihn aus, z.B. a.angel {color: transparent;} Für alte IE <a ...><span>sinnvoller Text</span></a> und a.angel span {display: none;}

Matthias

[wichtelmann]

* was spricht gegen die Verwendung der Konstruktion <a ><img></a>?

die Lösung:)))
Manchmal muss man einfach bisschen um die Ecke denken. Hab jetzt jedes Bild einzeln gemacht. sieht jetzt so aus:

  
<a  onclick="pictureViewer(1,'Perle');switchVisible('picture','right_content')" class="angel" ><img src="images/Perlen/P1.jpg" alt="" border="0" ></a>  
  
<a  onclick="pictureViewer(2,'Perle');switchVisible('picture','right_content')" class="angel" ><img src="images/Perlen/P2.jpg" alt="" border="0" ></a>  
  
<a  onclick="pictureViewer(3,'Perle');switchVisible('picture','right_content')" class="angel" ><img src="images/Perlen/P3.jpg" alt="" border="0" ></a>  
  
<a  onclick="pictureViewer(4,'Perle');switchVisible('picture','right_content')" class="angel" ><img src="images/Perlen/P4.jpg" alt="" border="0" ></a>  
  
<a  onclick="pictureViewer(5,'Perle');switchVisible('picture','right_content')" class="angel" ><img src="images/Perlen/P5.jpg" alt="" border="0" ></a>  

Danke für die Hilfe. Jetzt funktionierts auf allen Browsern. Der Chrome zickz zwar noch bissel bei der Darstellung von der Edelsteinseite, aber dafür kann ich nun echt nichts:D

Nochmal nen dickes Danke
Grüße Janik

[wichtelmann]

Fürs weitere Versuche ich ein wenig an meiner Syntax und der Sprache zu arbeiten.
Aber vllt ergibt sich das eh, wenn ich demnächst versuche auf html5 und php umzusteigen.
grüße Janik

[Matthias Apsel]

Om nah hoo pez nyeetz, wichtelmann!

Jetzt beseitigst du noch die Fehler, die der Validator dir anzeigt, beginne mit dem richtigen Grundgerüst (Schau dafür ins SELFHTML-Wiki). Berücksichtige zudem das, was ich über utf-8 geschrieben habe. Dann sollte auch Chrome nicht mehr zicken.

Matthias