Extern geladene Grafik soll in Text der Grafik einen Link bekommen

[Edith]

Hallo,

vieleicht kann mir ja jemand bei meinem Problem weiter helfen kann.

Ich lade extern eine Grafik, diese Grafik enthällt Text. Bei einem Wort im Text soll ein Link zu einer anderen URL hin.

Externes JS:

function sidebarkosmetik(){
   document.getElementById('sidebar1').style.background="url(images/sidebar_kosmetik_gruen.gif) no-repeat"; 
   /*document.window.open("http://www.kleosan.de");*/
   document.getElementById("sidebar1").style.marginTop="45";
   document.getElementsByTagName('span')[0].style.visibility="hidden";
   document.getElementsByTagName('p')[0].style.visibility="hidden";
   document.getElementsByTagName('span')[1].style.visibility="hidden";
   document.getElementsByTagName('p')[1].style.visibility="hidden";
   document.getElementsByTagName('span')[2].style.visibility="hidden";
   document.getElementsByTagName('p')[2].style.visibility="hidden";
   document.getElementsByTagName('span')[3].style.visibility="hidden";
   document.getElementsByTagName('p')[3].style.visibility="hidden";
   document.getElementsByTagName('p')[4].style.visibility="hidden";
    }

HTML-Codeschnipsel:

 <img src="images/produkt_kosmetik.gif" class="produkt_kosmetik" onmouseover="kosmetikwechsel()" onmouseout="kosmetikwechselzurueck()" onclick="sidebarkosmetik()" style="cursor:pointer"/>

Leider habe ich noch zu wenig Erfahrung mit Javascript.

Vielen Dank schon mal im Voraus.

Viele Grüße
Edith

[kkapsner]

Ich verstehe noch nicht einmal ansatzweise, was genau dein Problem ist.

[Edith]

Hallo,

Ich habe zwei Elemente auf einer Webseite.
In dem Element auf der linken Seite, sind mehrere Grafiken, wo bei mouseover ein Grafikwechsel ist. Beim onclick dieser Grafik, lädt eine neue Grafik auf der rechten Seite der Webseite (zweites Element). Das klappt auch alles. Nun soll diese Grafik die Text enthält, in einem Wort des Textes einen Link zu einer anderen Website bekommen.

Leider weiss ich nicht, wie ich das anstellen soll.
Muss ich in der function eine Image-map mit Koordinaten mit dem entsprechenden Link eingeben?
Oder muss ich in der html-Datei den Link einfügen?
Und wenn, wie? Weil diese Grafik in einer externen js-Datei steht.
Funktioniert das überhaupt, was ich gerne möchte?

Hoffe, dass dieses jetzt verständlicher erklärt ist.
Wäre sehr dankbar für Eure Hilfe!

Viele Grüße
Edith

[kkapsner]

Hast du einen Testlink?

Das einzige, was da nach einem Bild aussieht in dem JS, ist die URL für das Hintergrundbild - dafür brauchst du aber kein externes Skript. Wenn du aber mit Hintergrundbildern arbeitest, und da irgendeinen Text verlinken willst, wird das schwierig bis extrem schwierig (wenn der Text und seine Position nicht bekannt sind).

Ich bin mir aber sicher, dass es da einen einfacheren Weg gibt - dazu müssten wir aber die Seite kennen.

[Edith]

Hallo kkapsner,

danke für Deine Mühe!

Die Site ist schon online und so gut wie fertig.
http://www.apo-bedburg-hau.de

Es geht um die Produkt-Seite.

Ich hatte für die Produkt-Seite keine andere Lösung. Bei allen anderen Seiten habe ich in der css-Datei ein Hintergrundbild eingefügt und den Text dann im HTML-Code eingegeben. Dann ist es mit der Verlinkung ja kein Problem.

Wenn das so schwierig ist umzusetzen, wird man mir wohl nicht den Kopf abreisen. Aber wie sollte ich denn in Zukunft mein Problem lösen?
Die Website ist erst meine dritte Site, die ich ertellt habe, bin im Grunde gnommen noch Anfänger und für jeden Tipp dankbar.

Einen schönen Tag.

Viele Grüße
Edith

[kkapsner]

Das ist nicht wirklich elegant gelöst... ABER ich verstehe jetzt immer noch nicht wo du da was verlinken willst.

PS: Warum hast du eigentlich so viel Text in Bilder gesteckt?

[Edith]

Hallo kkapsner,

ich danke dir nochmals für Deine Mühe!

Auf allen Seiten, sind die Hintergrundbilder in der css-Datei und der Text im HTML-Code.

Bei der Produkt-Seite allerdings, sollte sich beim "onclick" der einzelnen Produktkategorien, die auf der linken Seite auf dem grauen Hintergrund liegen, auf der rechten Seite, der dazugehörige Text mit Logos öffnen.

Zum einen, wegen der vielen einzelnen Logos und zum zweiten, damit der Text, der beim Aufruf der Produkt-Seite auf dem grünen Hintergrund steht, verdeckt wird, habe ich das alles in eine Grafik gepackt.

Nun zum Link:
Die sich öffnende Grafik, beim klick der Produktkategorie „Kosmetik“, enthält im Text das Wort "Marien Apotheke" und dieses sollte mit der URL der Marien Apotheke verlinkt werden.

Vielleicht weißt Du doch eine Lösung für mich?
Ich wünsche Dir noch einen schönen Tag.

Viele Grüße
Edith

[miniA4kuser]

Die erste wichtige Frage stellt sich mir: Muss der Internet Explorer 6 unterstützt werden?

Bei der Produkt-Seite allerdings, sollte sich beim "onclick" der einzelnen Produktkategorien, die auf der linken Seite auf dem grauen Hintergrund liegen, auf der rechten Seite, der dazugehörige Text mit Logos öffnen.

Die Produktkategorien sind ja jetzt wirklich nichts besonderes. Warum hast du das mit Grafiken gelöst und JavaScript gelöst? Ich finde diese Art ziemlich schlecht was die Wartbarkeit betrifft. Ein Text ist schneller ersetzt/azsgebessert wie eine Grafik. Das ganze lässt sich mit HTML und CSS alleine lösen.

Zum einen, wegen der vielen einzelnen Logos und zum zweiten, damit der Text, der beim Aufruf der Produkt-Seite auf dem grünen Hintergrund steht, verdeckt wird, habe ich das alles in eine Grafik gepackt.

Du kannst auch für jede Produktkategorien einen eigenen Kontainer auf der rechten Seite erstellen und an der gleichen Stelle positionieren. Hierfür eine Klasse in CSS definieren. Unter der Benutzung vder CSS-Eigenschaft display kannst du dann den benötigten Kontainer einblenden und alle nicht benötigten Kontainer per display-Eigenschaft none inkl. Platzhalter ausblenden.

[kkapsner]

OK - jetzt verstehe ich, was du machen willst... und stimme mit mini4Akuser überein: das mit den Bildern ist eine ganz schlechte Idee und solltest du ändern (so wie er/sie es im letzten Abschnitt vorschlägt).

[Edith]

Hallo kkapsner und miniA4kuser,

Den Internet Explorer 6 wird bestimmt noch der eine oder andere Kunde der Apotheke nutzen.

Die Grafiken für die Produktkategorien habe ich so bekommen, weil es genau dieser Schrifttyp sein sollte. Das ist so gewollt und bekannt, dass diese Schrift nur in Grafiken lösbar ist. .

Aber statt der einzelnen Grafiken auf der rechten Seite, alles in einen Container zu packen, habe ich überhaupt nicht drüber nachgedacht und außerdem bin ich davon ausgegangen, dass der Text, von der Produkt-Startseite, anders als mit Grafiken, nicht zu überdecken ist.

Wird es sinnvoller sein, wegen des IE 6 auf den Link in der Grafik zu verzichten, oder ist es in jedem Falle besser, Container für diesen Zweck zu nutzen?

Ich danke Euch sehr für die Mühe, die Ihr Euch gemacht habt!

Euch einen schönen Sonntag.

Viele Grüße
Edith

[kkapsner]

Es ist auf jeden Fall besser, auf der rechten Seite Container zu verwenden.

Solange du für deine <img> ein adequates alt-Attribut vergibst, kann man so schon die Font-Probleme beseitigen. Ich würde nur für den Inhalt der Produktcontainer kein Bild vewenden (hat du ja vorher auch nicht)... dann kannst du den Text auch ganz leicht verlinken.

[Edith]

Hallo kkapsner,

ok, dann werde ich das so umsetzen.

Ich muss ja ehrlich gestehen, Foren z.B. wie dieses hier und Menschen, die ihre Freizeit dafür opfern, anderen zu helfen, sind mit Geld nicht zu bezahlen.

Einen schönen Abend.

Viele Grüße
Edith