• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Externer Link auf Iframe

Werbung:
Hi,

warum bindest du die Grafik denn als iframe ein?
Wenn du nur das Bild haben möchtest würde ich einfach den <img> Tag nehmen und die url dort als source angeben. Und das halt in einen link (a-Tag) packen.
Ich würde dir aber generell abraten, einfach Bilder von anderen seiten zu klauen. Gehört sich nicht, du verletzt das Urheberrecht und durch das Laden des Bildes verbrauchst du, wenn auch marginal, traffic des entsprechenden Hosters für deine Zwecke.
 
Hallo Marv,

danke für Deine Mail und Anmerkung zum Urheberrecht.

Es handelt sich nicht um ein "starres" Bild, sondern um eine Darstellung, die sich stündlich ändert.

Wie kann ich die URL denn jetzt in den iframe einbetten?

Ich danke recht herzlich.

Gruß

Volker
 
Werbung:
Also, beim klicken auf das IFrame kann man so direkt keine Verlinkung zuweisen.

Mir fällt da nur der Trick ein, einfach einen Link mit der Höhe und Breite des IFrames über das IFrame zu legen.
Das geht mit absoluter Positionierung, wenn ein äußerer Div Container eine relative positionierung zugewiesen wird:

Hab das mal gemacht sieht dann so aus:

Code: 
<div style="position:relative;width:150px;height:150px;">
    <a href="http://www.google.de" style="display:block;position:absolute;height:150px;width:150px;"></a>
    <iframe width="150" height="150" src="http://www.wetteronline.de/cgi-bin/img2out?URL=aktuell/vermarktung/p_aktuell_local/ColorMap/www/de/teaser/DL/temperatur_deutschland_aktuell_teaser.gif&LANG=de" frameborder="0"></iframe>    
</div>

Hab das jetzt mal auf google verlinkt zum Testen (im <a href...) musst du natürlich auf die von die gewünschte Seite ändern.
 
newcomer schrieb:
Es handelt sich nicht um ein "starres" Bild, sondern um eine Darstellung, die sich stündlich ändert.
Zum Vergrößern anklicken....

Na und? Die URL ändert sich doch nicht? Dann kannst Du diese auch als Bild einfügen, nicht per iframe.

Bei dem Tipp von Marv fehlt noch der z-index. Über den steuert man, welche der Ebenen über anderen liegt. Das wäre hier imho auch wichtig.
 
Werbung:
@ threadi, danke für die erwähnung des z-index. Ich habe es erst versucht den link nach dem iFrame zu setzen, da nachfolgende Elemente ja an sich vorherige überlappen. Hat so aber nicht geklappt, umgekehrt schon. So habe ich gedacht man könnte beim Überlappen von IFrames das auch so lösen (Habe jedoch auch nicht in verschiedenen Browsern gecheckt ob das geht)

Auch bin ich mir nicht ganz sicher: Wenn das Bild nur als URL angegeben wird und es wird auf der ursprungs-Seite das Bild an der Stelle der URL ausgetauscht, wird das neue Bild erst nach Refresh von Volkers seite angezeigt.

Würde das Bild beim Einbinden per Iframe nicht auch ohne Refresh von Volkers Seite geändert werden?
Wahrscheinlich ist ein IFrame nach dem laden von Volkers Seite auch nur Statisch und läd dessen Inhalt nicht wie mit Ajax nach, an der Stelle blicke ich bei Iframes leider nicht durch :)
 
Marv schrieb:
@ threadi, danke für die erwähnung des z-index. Ich habe es erst versucht den link nach dem iFrame zu setzen, da nachfolgende Elemente ja an sich vorherige überlappen. Hat so aber nicht geklappt, umgekehrt schon. So habe ich gedacht man könnte beim Überlappen von IFrames das auch so lösen (Habe jedoch auch nicht in verschiedenen Browsern gecheckt ob das geht)
Zum Vergrößern anklicken....

Versuchen kann man vieles. Der IE macht dem ganzen dann aber spätestens einen Strich durch die Rechnung, da der bei fast jeder Version den z-index benötigt und solche Elemente ohne z-index quasi beliebig positioniert. Ein z-index hilft dabei hier Klarheit rein zu bekommen, was modernen Browsern btw. auch hilft die Seite schneller zu rendern und somit schneller anzuzeigen.

Auch bin ich mir nicht ganz sicher: Wenn das Bild nur als URL angegeben wird und es wird auf der ursprungs-Seite das Bild an der Stelle der URL ausgetauscht, wird das neue Bild erst nach Refresh von Volkers seite angezeigt.
Zum Vergrößern anklicken....

Das wäre auch bei der Einbindung per iframe der Fall.
 
Hallo Marv,

super Danke. Es funktioniert.

Bekommst Du das auch hin, wenn der Mauszeiger auf das Bild geht und nicht nur am Rand? Wäre ideal.

2. Frage: Ich möchte das Bild beschriften. An welcher Stelle muss ich den Text eingeben?

Herzlichen Dank.

LG

Volker
 
Werbung:
Ich verstehe die Frage nicht. Du hast kein Bild. Du hast eine externe URL. Keine Ahnung wie Du die jetzt einbindest, wieso da der Mauszeiger "spinnt" und wozu Du noch Beschriftungen ergänzen willst.
 
Hi, jetzt ist mir beim schreiben eingefallen, wir haben doch bzw. threadi hat doch geklärt ,dass das iFrame keine Vorteile bringt.
Meine Lösung war sehr unsauber und funktioniert auch bei dem was ich gepostet habe in fast keinem browser richtig bzw. unterschiedlich, da das mit dem überlappen von iframes kompliziert ist.

Da wie gesagt das Einbinden des Bildes mit iFrame keinen Vorteil bringt, binde es doch normal als Bild ein, das in einem link ist
bzw. besser als background-img des links und darin der Text:

Code: 
    <a href="http://www.google.de" style="display:block;text-decoration:none;width:99px;padding-top:1px;height:104px;background:url(http://www.wetteronline.de/cgi-bin/img2out?URL=aktuell/vermarktung/p_aktuell_local/ColorMap/www/de/teaser/DL/temperatur_deutschland_aktuell_teaser.gif&LANG=de);">
        <span style="display:block;margin-top:78px;color:#000;font-weight:bold;">Hier dein Text</span>
    </a>
 
Werbung:
Hallo Marv,

wie gesagt, hat alles super funktioniert.

Wie muss der Code aussehen, wenn noch eine Beschriftung angezeigt werden soll, wenn der Mauszeiger auf dem Objekt ist?

Wäre das i-Tüpfelchen.

Vielen Dank.

VG

Volker
 
Was für eine Beschriftung solls sein? Das was durch das title- und/oder alt-Attribut (je nach Browser) im Link-Element angezeigt wird? Oder etwas selbst formatiertes mit einem bestimmten Style?
 
Hi,
ich glaube du möchtest einen weiteren Text von dir, der erst beim überfahren des Textes angezeigt wird?

Hab das letzte Codefragment mal in eine Beispiel datei geschoben, die Styles nun im head der Seite. Und, ich hoffe, das war das was du meintest:

Einen Text (I Tüpfelchen) der erst beim überfahren des Bildes angezeigt wird:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de-DE" lang="de-DE"  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>
<style type="text/css">
.wetterkarte    {
    font-size:14px;
    display:block;
    position:relative;
    text-decoaration:none;
    width:99px;
    height:104px;
    padding-top:1px;
    background:url(http://www.wetteronline.de/cgi-bin/img2out?URL=aktuell/vermarktung/p_aktuell_local/ColorMap/www/de/teaser/DL/temperatur_deutschland_aktuell_teaser.gif&LANG=de);
}

.wetterkarte span    {
    display:block;
    position:absolute;
    font-weight:bold;
    color:#000;
}

.wetterkarte span.normaler-text    {
    top:82px;
    left:5px;
}

.wetterkarte span.zusatz-text    {
    display:none;
    top:50px;
    left:5px;
}

.wetterkarte:hover span.zusatz-text    {
    display:block;
}
</style>
</head>
<body>

    <a class="wetterkarte" href="http://www.google.de">
        <span class="normaler-text">Standard Text</span>
        <span class="zusatz-text">I-Tüpfelchen</span>
    </a>

</body>
</html>
 
Werbung:
Hallo Marv,

vielen Dank für Deine Mühe.

Der Text soll allerdings nicht innerhalb des Bildes erscheinen, sondern unterhalb der Hand (Mauszeiger wird zur Hand beim Überfahren des Bildes) als Erläuterung, was sich hinter dem Link verbirgt.

So wie hier beim Radarbild:

Wetter Wettervorhersage Regenradar Reisewetter - wetteronline.de


kommt die Bezeichnung: Radarbild von Uhrzeit bis Uhrzeit


Weiter unten links steht z.B. die aktuellen Temperaturen von Deutschland.

Wie bekomme ich den Text (Temperaturen aktuell) unter das Bild und

wie komme ich zur Bezeichnung des Links (unterhalb des zur Hand gewordenen Mauszeigers)

Herzlichen Dank.

LG

Volker
 
Hi,

die kleine Text-Erläuterung unter dem Mauszeiger (Hand) kriegst du ganz einfach mit dem Title Attribut im link.

Code: 
<a href="#" title="Hier ist deine link Bezeichnung">Inhalt des Links</a>

Der Text unter dem Bild kann ganz simpel z.B. in einem Div Tag oder, wenn er verlinkt werden soll ebenfalls in einem a-Tag stehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben