Bild das sich im bewegt, wenn man die Maus nach bewegt

html.de-Forum HTML, XHTML & CSS
1

Hallo, ich richte mir gerade eine Homepage ein und möchte als Heading ein großes Bild haben mit einem anderem Bild darüber, das sich verschiebt wenn man die Maus bewegt, wie auf dieser Seite. Wie macht man sowas?

2

Das gehört glaub ich zu Javascript^^ Musst du wohl lernen oder fleißig Googlen! :wink:

3

Das man sowas verscripten muss ist mir klar. ich würde nur gerne wissen wie das überhaupt geht, vielleicht kann mir ja sogar jemand mal einen beispiel-quelltext posten, den ich dann als vorlage nutzen kann. die attribute, den inhalt usw. kann ich ja in ein paar minuten nach meinen vorstellungen anpassen, es geht hier also um das prinzip

4

Die einzelnen Ebenengrafiken übereinanderlegen (CSS: position: absolute; z-index) und bei mousemove-JS-Events entsprechend verschieben (CSS: top, left).

5

Danke, nur leider kann ich kein CSS. Könntest du das vlt. ein kleines bisschen genauer beschreiben?

6

genau das mit css und js hätte ich auch gemacht…
wobei der flüssige verlauf sicher ein problem werden könnte…

7

Das ist eigentlich ein Fall für die Jobbörse.

Na ja, hier ein Ansatz:

[code]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
    <style type="text/css">

body {
margin: 0;
padding: 0;
}

#header {
position: relative;
border: 1px solid #c00;
overflow: hidden;
height: 100px;
}
#eins {
background: #f00;
opacity: 0.1;
width: 800px;
height: 100px;
position: absolute;

}
#zwei {
background: #0f0;
opacity: 0.1;
width: 500px;
height: 100px;
position: absolute;
}
#drei {
background: #00f;
opacity: 0.1;
width: 800px;
height: 100px;
position: absolute;
}

    </style>

</head>

<body>
    <div id="header">
        <div id="eins"></div>
        <div id="zwei"></div>
        <div id="drei"></div>
    </div>
</body>
[/code]
8

danke sehr