Manni: Dynamische Site

SELF-Forum

Dynamische Site

Manni
– Informationen zu den Bewertungsregeln

Hallo Allerseits!
Ich sitzt grad hier auf der Arbeit rum und bin maechig am Gruebeln.
Mein "Chef" war grad da und hat mir eine Aufgabe zugeteilt.
Ich soll ein Bild (einen mehr oder weniger komplexeren Schaltplan) auf deine Website einbinden und dazu eine Art Glossary erstellen. Es sollte so eine Arte ImageMap sein, also wenn ich mit der Maus ueber eine bestimmte Linie fahr sollte dein kleiner Kasten aufpoppen (kein neues Browserfenster) mit der entsprechenden Erklaerung. Beim Klicken auf bestimmte Bereiche des Bildes (z.B. Bausteine) sollte das Bild sich "erweitern" und der Baustein detailierter dargestellt werden. Mein Problem ist nun das das Ganze in einem Browserfenstern geschehen muss das auch nur ein mal geladen werden soll. Ich habe zwar einige erfahrund mit HTMl, PHP und ColdFusion aber in diesem speziellen Fall bin ich ehrlichgesagt ueberfragt womit sich das am bessten realisieren liese. Das einzige was mir eingefallen ist war Flash, das aber aus diversen Gruenden nicht hinhaut. Daher wende ich mich mal an dieses Forum um euren Rat zu erfragen und hoffe ihr kennt euch etwas besser aus als is (ist auch nicht ganz mein Aufgabengebiet :)

Gruss
Manni

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dynamische Site

    Hans-Peter Rieger
    – Informationen zu den Bewertungsregeln

    Hallo Manni,

    auch hier dürften mal wieder Layer und DIVs die ultimative Universalwaffe sein. Schau doch mal bei SELFHTML nach, was man damit machen kann (insbesondere die absolute Positionierung und das sichtbar/unsichtbar-Feature, kombiniert (wenn Du JavaScript verwenden darfst) mit dem onMouseover() Event-Handler.

    ... und alles wird gut.

    Ciao
    Hans-Peter

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dynamische Site

      Manni
      – Informationen zu den Bewertungsregeln

      Danke erst mal ....
      Ich werd schaun was ich mit JavaScript machen laesst..

      Gruss Manni

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Dynamische Site

    Danny Homepage des Autors
    – Informationen zu den Bewertungsregeln

    http://www.domapi.com

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Dynamische Site

    Klaus Thiesler
    – Informationen zu den Bewertungsregeln

    Hallo Manni

    Ich plädiere ebenfalls für CSS mit Layertechnik <div>: was auch auf allen modernen Browsern funktioniert, sogar beim IE5.5. Damit läßt sich ein Layerfeld in Lage und Größe klar definieren, unsichtbar machen usw. Das Grafikbild kannst du slicen (in Mosaiken zerlegen) und direkt einbinden + ansprechen + sichtbar machen.
    Der Ursprung stammt aus SELFHTML-Tipps+Tricks:

    MoinMoin Klaus

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    body {
     padding-top:130px;
    }

    #box {
     color:black;
     background-color:transparent;
     position:absolute;
     top:100px;
     left:30px;
     z-index:1;
    }

    #box a {
     color:#f6e4c1;
     background-color:#b8ab8f;
     font-family:arial, sans-serif;
     font-size:100%;
     font-weight:bold;
     text-decoration:none;
     display:block;
     padding:5px;
     border-top:2px solid #e4d9c0;
     border-right:2px solid #837c6b;
     border-bottom:2px solid #837c6b;
     border-left:2px solid #e4d9c0;
    }

    #box a:visited {
     color:#f6e4c1;
     background-color:#b8ab8f;
    }

    #box a:hover {
     color:#f6e4c1;
     background-color:#b8ab8f;
     text-decoration:none;
     width:400px;
     border-top:2px solid #837c6b;
     border-right:2px solid #e4d9c0;
     border-bottom:2px solid #e4d9c0;
     border-left:2px solid #837c6b;
    }

    #box a:active {
     color:#f6e4c1;
     background-color:#b8ab8f;
    }

    #box a .info {
     display:none;
    }

    #box a:hover .info {
     color:black;
     background:#b8ab8f;
     font:14px courier,sans-serif;
     display:block;
     padding:5px;
     text-align:justify;
    }
    -->
    </style>

    </head>

    <body>

    <div id="box">
     <a href="#">Infobox <span class="info">Hier steht der zusätzliche Infotext.</span></a>
    </div>

    <p>...weiterer Text der Seite...</p>

    </body>

    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln