Horst: Zwei Grafiken übereinanderlegen

SELF-Forum

Zwei Grafiken übereinanderlegen

Horst
– Informationen zu den Bewertungsregeln

Hallo,

eine Grafik hat 640 x 480 Pixel und ist transparent. Ich nenne die mal Spotlight.

Spotlight soll im Browser an einer bestimmten Position fixiert sein, idealerweise in der Mitte.

Die zweite Grafik ist größer als Spotlight und soll mit unterschiedlichen Positionen (x, y verschiebbar) unter Spotlight gelegt werden, so dass von der darunterliegenden Grafik nur der Ausschnitt der Größe von Spotlight gezeigt wird.

Der Rest der zweiten Grafik soll also nicht zu sehen sein, sondern nur ein Ausschnitt von 640 x 480, im einfachsten Fall von 0,0 beginnend oder beliebig an x,y, siehe Schema.

|-----------------------|
||-----------|          |
|| Spotlight |          |
||____fix____|          |
|_______________<->_____| Zweite Grafik

Wie kann ich eine solche relative Positionierung machen?

Viele Grüße,
Hotte

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zwei Grafiken übereinanderlegen

    3vi1 Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    in CSS ist dies möglich.

    Du nimmst 2 ineinander verschachtelte Elemente. Z.B.:

    <div style="background:url(hintergrund.gif) ...">
       <div style="background:url(spotlight.gif) ...">
        <--! Content -->
       </div>
    </div>

    So würden die Bilder übereinander liegen. Wie du sie genau positionieren kannst findest du unter:
    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

    Gruß

    Markus

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zwei Grafiken übereinanderlegen

      Marc Reichelt Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo 3vi1,

      in CSS ist dies möglich.

      Zwei Grafiken übereinanderzulegen ist einfach - allerdings denke ich, dass Horst eine Art Maske bauen möchte. Das ist wohl eher mit Flash umsetzbar - oder beispielsweise mit 4 undurchsichtigen Grafiken, die man mit JavaScript ansteuert.

      Grüße

      Marc Reichelt || http://www.marcreichelt.de/

      --
      Linux is like a wigwam - no windows, no gates and an Apache inside!
      Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zwei Grafiken übereinanderlegen

        Horst
        – Informationen zu den Bewertungsregeln

        Hallo,

        Zwei Grafiken übereinanderzulegen ist einfach - allerdings denke ich, dass Horst eine Art Maske bauen möchte.

        Ja genau. Das Problem steht quasi schon mit einer Grafik: Es soll von dieser nur ein Ausschnitt (640 x 480) gezeigt werden, also eine Art Maske, die auf der Grafik verschoben werden kann. Wobei: Die Maske im Browser fixiert sein soll.

        Das ist wohl eher mit Flash umsetzbar - oder beispielsweise mit 4 undurchsichtigen Grafiken, die man mit JavaScript ansteuert.

        Flash, hmm. Finde ich nicht sogut....

        Viele Grüße,
        Hotte

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Zwei Grafiken übereinanderlegen

          Harlequin
          – Informationen zu den Bewertungsregeln

          Yerf!

          Ja genau. Das Problem steht quasi schon mit einer Grafik: Es soll von dieser nur ein Ausschnitt (640 x 480) gezeigt werden, also eine Art Maske, die auf der Grafik verschoben werden kann. Wobei: Die Maske im Browser fixiert sein soll.

          Wenn der IE nicht wär, könnte man das wohl mit einem DIV und background-attachment:fixed und ändern der background-position erreichen.

          Gruß,

          Harlequin

          --
          <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Zwei Grafiken übereinanderlegen

          Antipitch
          – Informationen zu den Bewertungsregeln

          Moin Hotte,

          Flash, hmm. Finde ich nicht sogut....

          ^^

          sodenke ich dann dass die css Eigenschaft clip und die entsprechende Eigenschaft des style Objekts etwas für dich sein könnten.

          Gruß
          Antipitch

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        3. Zwei Grafiken übereinanderlegen

          plan_B
          – Informationen zu den Bewertungsregeln

          Hallo,

          Zwei Grafiken übereinanderzulegen ist einfach - allerdings denke ich, dass Horst eine Art Maske bauen möchte.

          Ja genau. ....

          ... mich wundert, warum noch keiner dem <img>-Element ein Hintergrundbild gegeben hat. Denke ich da zu einfach?

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>moving background-image</title>  
<script type="text/javascript">  
[code lang=javascript]  
  
window.onload=function() {  
 var img=document.getElementById("img");  
 var img2=document.getElementById("img2");  
  
 img.style.backgroundImage="url("+img2.src+")";  
 img.style.backgroundRepeat="no-repeat";  
 move_bg(img,-400);  
 }  
  
function move_bg(img,left) {  
 var x=parseInt(img.style.backgroundPosition);  
 x= !x ? 105 : (x-10);  
 img.style.backgroundPosition=x+"px -180px";  
 if ( x > left ) setTimeout( function(){ move_bg(img,left); }, 200);  
 }

          </script>
          </head>
          <body>
          <div style="padding:100px;">
          <img id="img" alt="teiltransparent" src="http://src.selfhtml.org/logo.gif">
          <div>
          <p><img id="img2" alt="" src="http://de.selfhtml.org/html/grafiken/anzeige/baum.jpg">

          </body>
          </html>
          [/code]

          Gruß plan_B

          --
               *®*´¯`·.¸¸.·
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Zwei Grafiken übereinanderlegen

            Horst
            – Informationen zu den Bewertungsregeln

            Hallo,

            Zwei Grafiken übereinanderzulegen ist einfach - allerdings denke ich, dass Horst eine Art Maske bauen möchte.

            Ja genau. ....

            ... mich wundert, warum noch keiner dem <img>-Element ein Hintergrundbild gegeben hat. Denke ich da zu einfach?

            Nö, das ist genau das was ich suche! Ich guck mir das am WE mal in Ruhe an, vielen Dank.

            Danke auch an alle hier für Eure Hilfestellung!

            Viele Grüße,
            Horst Haselhuhn

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln