Link soll vor den Text noch ein Bild besitzen

andynail

Hallo zusammen

auf meiner Seite wird das iframe an die Größe der Tabelle in diesem angepasst. In jeder Zelle sitzt ein Link mit der Eigenschaft style block. Dies funktioniert auch wunderbar solange ich keine Bilder in einem Link dazu will.

Denn ich setzte die Bilder in den Link als Background. Doch wenn ich den Link anklickte verschwand der Background und der Link hatte nur noch css des Standards aller Links und der css Wert wird per javascript zugewiesen wenn der Link eine bestimmte Eigenschaft hat. Und das aber nur dann sobald der Link in den nicht mehr sichtbaren Bereich gescrollt wird. Dann vierliert er wohl das css mit dem Bild.

Und dann setzte ich direkt in den Link vor den Text ein img und dann zeigt sich etwas für mich absolut unerklärliches. Denn jetzt passt die Größe des iframes nicht mehr. Auf der rechten Seite zeigt sich jetzt ein leerer Abstand zur Tabelle.

Wasn das bitte? Was muß ich beachten oder wie umgehe ich diese ganzen Eigenschaften?

Vielen Dank Gruß Andreas

synaptic

bahnhof?
erklär das bitte nochmal und poste quelltext dazu, aber nich nur ne zeile, sondern alles, was dazugehört

andynail

Hallo

ok ich zeig mal ein wenig Code. Ich hatte die nachfolgenden Zeilen nicht auf die Situation eingeschränkt. Es gäbe ja viel viel mehr zu schreiben da ja in der Umgebung mehr zu beachten ist. Aber ich zeig mal die folgenden Ueilen:

Code

document.getElementsByTagName("a")[i].className = "Bild"
 if (top.MarkerMode != "Marker") Ereignis = "top.OpenLinkDaten(this); top.ActiveLink = this"
 document.getElementsByTagName("td")[i].style.padding = "0"
 
top.DatenWidth = document.getElementById('Inhalt').offsetWidth
top.document.getElementById("DatenFrame").style.width = top.DatenWidth + ((top.BIndex != 0) * 25 * (top.frames['DatenFrame'].document.getElementById("Inhalt").offsetHeight > top.document.getElementById("DatenFrame").offsetHeight)) + "px"
top.document.getElementById("DatenFrame").style.height = SiteHeight - top.document.getElementById("TRKennung").offsetHeight - top.document.getElementById('TRAuswahl').offsetHeight - ((top.BIndex != 0) * 10) + "px"

HTML

a { font-family: 'Times New Roman'; font-size:18px; text-decoration: none; color:#000; padding-left:20px; padding-right:20px; vertical-align:middle; display:block; outline: none }
a:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb; color:#000 }
a:active { color:#FF0000; outline: none; }
 
 <a href="#" Datei="...\ArztTermine.txt"><img src='Pictures/öffnen.ico' style= "width:16px; height:16px; margin-right:4px; border:0"/>Ärzte</a>

Im iframe steht die Tabelloe mit der id Inhalt. Und die Größe muß an die Höhe und Breite des verfügbaren Platzes angepasst werden. Und die zugewiesene css ist eigentlich die Gleiche als wie der Standard, doch verzweifelnder Maßen schreibe ich hierein padden-right:0px. Und vorher stand dort drin auch die background Grafik, die ja verschwand wenn man den Link ins Aus scrollen mußte.

OK, danke Gruß Andreas

synaptic

also du hast nen iframe, diesen iframe änderst du dynamisch in seinen ausmaßen anhand seines inhalts.. - richtig?
dann hast du links, deren funktionsweise wie gewollt ist, solange du kiene hintergrundgrafiken nutzt... - richtig?
und sobald du den links hintergrund-grafiken gibst funktioniert nichts mehr?!

dein code-beispiel ist genau das, was ich meinte mit "nicht nur iene zeile"
mach bitte mal ein beispiel fertig, was man sich tutto kompletto runterladen kann, damit man das in gänze sieht...
bitte mit der variante, wie es richtig ist und wie es falsch ist.

ich hab im moment nur ne vermutung, bringt aber nichts diese hier zu posten, weils vertane zeit und energie is, wenn ih dann daneben liege.
denn letzten endes bin ich noch immer nicht 100% sicher bei dem, was du meinst

andynail

Hallo

HTML

a { font-family: 'Times New Roman'; font-size:18px; text-decoration: none; color:#000; padding-left:20px; padding-right:20px; vertical-align:middle; display:block; outline: none }
a:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb; color:#000 }
a:focus { color:#FF0000; outline: none; }
a.Datei { background-image:url('Pictures/Öffnen.ico'); background-repeat:no-repeat; background-color:transpartent; font-family: 'Times New Roman'; font-size:18px; text-decoration: none; color:#000; padding-left:20px; padding-right:20px; vertical-align:middle; display:block; outline: none }
a.Datei:hover {background-color:transparent}
td.Datei:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb; color:#000 }
a.Datei:focus { background-image:url('Pictures/Öffnen.ico'); background-repeat:no-repeat; background-color:transpartent; font-family: 'Times New Roman'; font-size:18px; text-decoration: none; color:#FF0000; padding-left:20px; padding-right:20px; vertical-align:middle; display:block; outline: none }
 
<table id="Inhalt">
<tr>
<td>
<a href="#" Datei="...Music\Wunschliste.txt">Wunschliste</a>
</td>
</tr>
</table>

Alles anzeigen

Code

frames['DatenFrame'].style.width = frames['DatenFrame'].document.getElementById("Inhalt").offsetWidth
frames['DatenFrame'].style.height = frames['DatenFrame'].document.getElementById("Inhalt").offsetHeight
for (var i = 0; i < document.getElementsByTagName("a").length; i++)
{
var l = document.getElementsByTagName("a")[i];
if (l.getAttribute("Datei") != null)
{
l.className = "Datei"
document.getElementsByTagName("td")[i].className = "Datei"
}
}

Alles anzeigen

Schreibe ich den Link wie oben gezeigt verliert er das Bild nach dem gescrollt, bzw. nach dem der Link geöffnet wird, das Bild. Denn bei anklicken des Links springt die Seite zum Seitenanfang. Hingegen wenn der Link stets zu sehen bleibt ändert sich nix. Und wenn ich den Link so schreibe:

HTML

<a href="http://www.fax.de/" target="_blank" title="Seite: www.fax.de und Account-Daten.txt" Datei="...\Fax.de\Account-Daten.txt"><img src='Pictures/öffnen.ico' style= "width:16px; height:16px; margin-right:4px; border:0"/>Faxversand auf fax.de</a>

und im css padding-left:0px schreibe um das image am linken Rand zu haben, stimmt die Breite des iframes nicht mehr.

Alles gezeigt zu dieser unerklärlichen Situation? Mehr gibts nicht von meiner Seite aus. Ich denke doch damit kann man was anfangen. Oder?

Danke Gruß Andreas

threadi

Nein, damit kann man nichts anfangen. Vor allem frage ich mich was das hier sein soll:

Code

Datei="...\Fax.de\Account-Daten.txt"

Sowas gibt es nicht als Attribut.

Zeig einen Link zur betreffenden Seite, dann sollte man dir eher helfen können.

andynail

Hallo

klar ich lese diesen Attribut aus und setze ihn selber, was ja auch einwandfrei funktioniert. Besitzt der Link dieses Attribut, dann öffnet eine Funktion diese hierin angegebene Datei.

Einen Link zu dieser Seite gibt es nicht, da es sich um eine lokale Seite - Linksammlung mit Login und sonstigen Daten - handelt.

synaptic

Zitat von synaptic

mach bitte mal ein beispiel fertig, was man sich tutto kompletto runterladen kann, damit man das in gänze sieht...
bitte mit der variante, wie es richtig ist und wie es falsch ist.

es bringt halt nichts wenn du dir was lokales zusammenfrickelst, was in keinster weise konform zu gängigen standards ist.
und bei deiner bisherigen ausführung vertseh ich auch noch nich wieso bilder bei den links verschwinden...
wenn du nen link mit display:block über ne klasse definierst bleibt des auch so erhalten.
und wieso du in zeiten von includes und ajax noch nen iframe nutzt versteh ich bei bestem willen nich.

deine anwendung dort ist weit entfernt von alltagstauglichkeit

wenn du eigenschaften mit javascript hinzufügst ist aber klar, dass die nach nem neuladen weg sind....

invidicult

Wenn ich das richtig verstehe, willst Du einfach einen Link mit einem Bild davor...?!
So wie -->[Blockierte Grafik: http://kimbannehr.de/bilder/link-bild.JPG] ?!
Wenn ja wäre das relativ einfach!
Wenn ich das richtig verstanden habe finden wir da sicherlich ruck zuck 'ne Lösung.

andynail

Hallo

genau so wie in der Grafik dargestellt und diese befindet sich in einer Tabellen Zelle.

Ich binde in den Link jetzt ein <img> ein, doch dann steht das Image mit Abstand von 20px vom Zellenrand wie alle anderen Links. Und auch das darf nicht sein.

Danke gruß Andreas

threadi

Dann füg es als Hintergrundbild ein.

HTML

<a href="#">Unsere Ziele</a>

Code

a {
 background-image: url(bild.jpg);
 background-position: 0 0;
 background-repeat: no-repeat;
}

synaptic

vergiß dabei aber nich das padding

andynail

Hallo

ja so wird eine Grafik dargestellt. Jedoch ist es in meinem Fall ja so das wenn der Link nach anklicken stehen bleibt weiterhin dasd Bild zu sehen bleibt. Muss ich aber zum Link scrollen, verschwindet das Bild nach dem anklicken. Besser gesagt er verliert die css Klasse und zeigt nur noch die allgemeine. Und wieso die Seite nach oben scrollt nach Aufruf einer ajax Funktion, mit dieser eine php Datei aufgerufen wird, ist für mich auch unerklärlich.

Gruß Andreas

threadi

Zitat von andynail

Jedoch ist es in meinem Fall ja so das wenn der Link nach anklicken stehen bleibt weiterhin dasd Bild zu sehen bleibt.

Das sollte der Normalfall sein wenn das Linkziel auf der selben Seite ist und keine neue Seite geladen wird.

Zitat

Muss ich aber zum Link scrollen, verschwindet das Bild nach dem anklicken. Besser gesagt er verliert die css Klasse und zeigt nur noch die allgemeine.

Hä?

Zitat

Und wieso die Seite nach oben scrollt nach Aufruf einer ajax Funktion, mit dieser eine php Datei aufgerufen wird, ist für mich auch unerklärlich.

Ich tippe mal auf einen fehlenden return-Wert.

HTML

Code

<a href="#" onclick="return deineFunktion();">Linkbeschriftung</a>

JS

Code

function deineFunktion() {
 // hier wird irgendwas gemacht
 return false;
}

andynail

Hallo threadi

und ja habs gerade eben erlebt und vorher nix davon gewusst. Die Links um die es geht erhalten alle onclick Befehle und besitzen keine Url, sondern das # als Adresse. Und damit zeigt sich wohl auch der Effekt das die Seiten zum Seitenanfang scrollen und der Link seine Formatierung verliert. Und ja auch das zum Seitenanfang scrollen macht mich verrückt.

Ich sollte vielleicht nicht auch gleich noch mit dem Thema des scrollens kommen, aber was gebe ich jetzt als href ein?

Danke gruß Andreas

threadi

Der Wert im href-Attribut ist irrelevant solange Du den von mir empfohlenden return-Wert einbaust. Dann hat href nämlich keinerlei Wirkung mehr.

andynail

Jetzet aber auch, Jetzt passts passgenau !

Der Fehler lag an dem # im href was das Scrollen ausläste und dies wiederum änderte die css Klasse. Das war ein Fehler im System und jetzt passt es einwandfrei. Ich setze mit parentNode in die Tabellenzelle den hover ein und damit bleibt dann auch die Grafik stehen.

Einwandfrei und vielen Dank dafür !

Gruß Andreas

Tags