Hilfe - Suche - Mitglieder - Kalender
Vollansicht: Bild Anzeigen Und Ausblenden
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
amethyst
Hallo,

ich hab mir gerade mal die Hilfe von Joachim angesehen und geschaut, wie er es ermöglicht hat, dass Abbildungen nur auf Mauklick aufgemacht werden, was natürlich enorm Ladezeiten spart. Er benutzt JS.

Ich mag kein Java und vermeide es möglichst. Hat jemand eine Idee, wie man das mit CSS verwirklichen kann?

Gruß Uschi
db
Help & Manual

mal ansehen.
Ede
ZITAT(amethyst @ 13.10.2004 - 14:05)
[...]
Ich mag kein Java und vermeide es möglichst. Hat jemand eine Idee, wie man das mit CSS verwirklichen kann?

Gruß Uschi

Hi Uschi,

CSS erweitert die Beschreibungssprache HTML und ist somit nicht gedacht die Browser-Software zu steuern, was wohl Dein Ansinnen ist.

Du willst doch ein Bild als Browserfenster öffnen und dieses Browserfenster ist genauso groß wie das Bild, richtig?

Dafür brauchst du meines Erachtens JavaScript.

Warum das Bild nicht in ein ganz normales Fenster laden, welches so groß ist wie das Browserfenster des Users.
QUELLTEXT
<a href="grosses_bild.jpg" target="_blank">hier klicken für grosses Bild</a>


Ansonsten lande ich immer wieder bei DHTML, Onclick und eine hidden DIV einblenden oder wie auch immer.

Persönlich habe ich kein Problem mit JavaScript, wenn es die Interaktion fördert. Wo wichtige Informationen angezeigt werden sollen verzichte ich natürlich drauf (bei Navigations z.B.) da muss alles ohne JavaScript gehen.

Nur meine bescheidene Meinung lurker.gif
amethyst
Hallo Ede,
nein, Du hast mich falsch verstanden. Ich will das Bild genau im Kontext auf der gleichen Webseite öffnen, nur eben auf Anforderung. Keine neue Seite, kein neues Browserfenster. Da könnte ich ja einfach verlinken, was völlig ohne JS geht.

Beispiel:
Im Text steht
Abbildung
klickst du drauf, kommt die dazugehörige Abbildung direkt an dieser Stelle ;-))

Gruß Uschi
Sicaine
1. es heißt Javascript. Java is ne eigene Programmiersrpache und hat überhaupt garnixmit JS zu tun tongue.gif

Zu deinem Problem gibts entweder JavaScript oder css. Bei CSS ist es aber nur möglich, das Bild anzuzeigen, wärend die Maus über dem Text steht. Geht mit dem :hover dann muste halt nen <div>block einblenden bzw. ind en hover eigenschaften den div block scihtbar machen.

btw: Weis ich nicht, ob der Browser das nich im Hintergrund mitlädt.
helpy
Hallo Uschi,

Schau Dir doch mal das hier an: http://css.fractatulum.net/sample/experimente2.htm

Vielleicht kannst Du da etwas für Dich ableiten.

cu, Guido
db
ZITAT(Sicaine @ 13.10.2004 - 15:24)
1. es heißt Javascript. Java is ne eigene Programmiersrpache und hat überhaupt garnixmit JS zu tun tongue.gif

Falsch!

Java ist die am dichtesten bevölkerte Inseln Indonesiens und liegt zwischen den Südostasienstaaten und Australien genau zwischen Sumatra und Bali. Durch die wenig tiefe Java-See im Norden gibt es dort viele Strände und wenige Wellen.

Alles JAVA?
Sicaine
Falsch!

Java ist ein Hasi:


*zu thread in pugins schiel*
amethyst
Hi Helpy,
ja wenn nicht ....

85% der User IE-User wären, eine praktikable Lösung. Aber eben leider nicht wirklich ;-)) Im IE muss es auch angezeigt werden können ;-))

Eine Hilfe für 15% der Internet-User, die sich eh auskennen, sonst würden sie ja nicht Firefox, Mozilla und Co. verwenden, ist nicht wirklich eine oder? ;-))

@sincaine Nur soviel, ich kenn die Unterschiede und will weder mit Java noch mit JS arbeiten und auch den Hover-Effekt. Genau der geht in diesem Fall nicht.

@Dieter ist es nicht doch ne Kaffeesorte? Ich hab in meiner Taskleiste immer so eine Kaffeetasse als Werbung ;-)) Urlaub auf Java hätte jetzt aber was ;-))

Gruß Uschi
Sicaine
@amethyst öhm dieser CSS hover-effect geht im IE genauso wie im firefox etc. Ansonsten hab ich deinen Post ned verstanden :/
amethyst
Hi Sicaine,

ich bezog mich auf den Link von Guido (helpy) und das was da gezeigt wird, geht im IE wirklich nicht ;-)) es wird nicht angezeigt.

Meine Menüs sind mit Hover-Effekten ausgestattet, ich weiß, dass der IE das kann, weil ich es immer in vielen Browsern ausprobiere.

Beispiele

Meine Hauptseite
Inhalt - Phase5 Einsteigerhilfe
Kapitel I - Einsteigerhilfe

Schau mal rein, auch in helpys Beitrag, dann verstehst Du mich vielleicht besser ;-))

Gruß
Uschi
Sicaine
Da stellt sich die Frage welche Version du nutzt? Weil bei mirs ja geht?
helpy
ZITAT(amethyst @ 13.10.2004 - 16:58)
Hi Helpy,
ja wenn nicht ....

85% der User IE-User wären, eine praktikable Lösung. Aber eben leider nicht wirklich wink.gif) Im IE muss es auch angezeigt werden können wink.gif)

Eine Hilfe für 15% der Internet-User, die sich eh auskennen, sonst würden sie ja nicht Firefox, Mozilla und Co. verwenden, ist nicht wirklich eine oder? wink.gif)

Hi Uschi,

Stimmt ... das hab' ich einfach überlesen ... bei mir ging's ja wink.gif

Tja, dann bleibt nichts anderes übrig als ein Link, wenn Du JavaScript nicht verwenden willst und hover auch nicht das ist, was Du brauchst.

cu, Guido
amethyst
Hi Sicaine,

ich will hier nicht darüber diskutieren, was der IE kann oder nicht kann, nur wenn die Betreiber der Seite es selber getestet haben und ich es nicht sehe, dann müssen wir wohl alle was mit den Augen haben oder? Ich benutze die neueste Version des IE mit allen Updates, auch die von heute (du auch schon?).

Kleiner Tipp, schau doch mal mit dem Firefox die Demos an, dann siehst Du Dinge, die Du vorher nicht gesehen hast.

Gruß Amethyst
Netizen
ZITAT(hdb @ 13.10.2004 - 15:50)
Java ist die am dichtesten bevölkerte Inseln Indonesiens und liegt zwischen den Südostasienstaaten und Australien genau zwischen Sumatra und Bali. Durch die wenig tiefe Java-See im Norden gibt es dort viele Strände und wenige Wellen.

Scheint dort oft die Sun?

ZITAT
Alles JAVA?

Ja, wa?

SCNR
n!
Conny
Hallo Uschi,
ja, Joachim ist ein rafiniertes Kerlchen! wink.gif

Ein Blick in der Quellcode verrät folgendes:
(Ich habe es 1 zu 1 übernommen)
QUELLTEXT
<p>Sie sehen jetzt den Grafikbetrachter, wie die folgende <a onclick=
   "doSection(f21)" class="sidebar" href="#nowhere" title=
   "Klicken Sie, um den Abschnitt zu &ouml;ffnen/schlie&szlig;en.">Abbildung</a>
   zeigt.</p>

   <div style="margin-left: 2em">
       <div class="sidebartext" id="f21" style="display: none"
       onclick="noSection(f21)">
           <img src="../image/image_viewer.gif" width="596" height=
           "366" border="0" alt="Grafikbetrachter">
       </div>


Der Text der zum Bild wird, wird verlinkt mit einem Verweis auf einem Anker auf der gleichen Seite (hier: #nowere). Damit sich das Bild an der richtigen Stelle (hier in einem DIV Container) positioniert, bekommt es eine ID (f21). Angesteuert wird es aber dennoch mit ein kleines JavaScript.

QUELLTEXT
function doSection (secNum){
    //display the section if it's not displayed; hide it if it is displayed
    if (secNum.style.display=="none"){secNum.style.display=""}
    else{secNum.style.display="none"}
}

function noSection (secNum){
    //remove the section when user clicks in the opened DIV
    if (secNum.style.display==""){secNum.style.display="none"}
}


Class sidebar und sidebartext beinhalten:
QUELLTEXT
a.sidebar {
 color : #339933;
 font-weight : bold;
 text-decoration : none;
 cursor : hand;
 background : transparent;
    }


/* Only use this for sidebars that ARE in a list */
    DIV.sidebartext {
 position: relative;
 left: -22px;
 height: 72px;
 width: 300px;
 margin-top: .6em;
 margin-right: 3em;
 margin-left: 0;
 margin-bottom: .6em;
 padding-top: .75em;
 padding-right: 6px;
 padding-left: .75em;
 padding-bottom: .75em;
 cursor: hand;
 border-left: 4pt solid #339900;
 background-color: #F0F0F0;
    }


So, ich glaube damit ist das Geheimnis gelüftet w00t.gif

cu
Conny (der hoffentlich nichts vergessen hat...)
amethyst
Danke Conny, es geht also ncih ohne java script ;-))

Trotzdem danke.

Uschi, die sich jetzt in ein überlanges WE verabschiedet ;-))

Euch allen ein schönes WE
Conny
ZITAT(amethyst @ 13.10.2004 - 23:50)
.....es geht also ncih ohne java script .....

Nee, es geht nicht ohne JavaScript.
Auf's nötigste reduziert kommt DAS dabei raus.
Was mich nun interessieren würde ist, kann ich anstatt Text auch ein Thumb nehmen, welches beim Anklicken ausgetauscht wird?

Ich bin mir eigentlich sicher, daß das geht; wahrscheinlich bracht man hierzu ein anderes Script! Stimmts?

cu
Conny
amethyst
Hi Conny,
hübsches Auto ;-))

Danke, das hilft schon mal weiter. Ob es mit nem Thumb auch geht, pobier ich morgen mal aus.

Danke und schlaf gut

Uschi
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.
Invision Power Board © 2001-2012 Invision Power Services, Inc.