Clipping

html.de-Forum JavaScript
1

Hallo nochmal zusammen,

ich hätte mal noch ne Frage zum Clipping. Funktioniert Clipping nur mit Grafiken oder auch mit Tabellen

LG Sebastian

2

Clipping umsetzen

Hallo nochmal zusammen,

also das das Clipping auch mit einer Tabelle funktioniert habe ich jetzt schon anhand eines Beispieles aus dem Netz herausgefunden. Bei mir haperts jetzt an der Umsetzung.

Während ich den Code für das Clipping einer Grafik ganz gut umsetzen kann, siehe hier (Beispiele unbedingt im IE schauen da das mit der Grafik im Firfox nicht funktioniert! … vielleicht hat da auch einer ne Idee zu):

DOM-Test Bild

wird die Tabelle irgendwann nach einer gewissen Wartezeit von ein paar Sekunden einfach nur reingeklatscht, siehe hier:

DOM-Test Tabelle

Bei der Tabelle ist also nix mit Clipping … was mache ich falsch ???

der style und Javascriptcode ist identisch:

<html>
<head>
<title>DOM-Test</title>
<style type="text/css">
	#bild {
		position: absolute;
		top:  80px;
		left: 10px;
		clip: rect(0px 0px 0px 0px);
	}
</style>
<script language="JavaScript">
var bild1;
var breite=0;
var hoehe=0;
var schritte=100;
var num=0;
function init() {
	bild1 = document.getElementById("bild");
	var bildObj = document.getElementById("b1");
	stepX = bildObj.width/schritte;
	stepY = bildObj.height/schritte;
	bereichVeraendern();
}
function bereichVeraendern() {
	breite = breite+stepX;
	hoehe = hoehe+stepY;
	bild1.style.clip =
		"rect(0px " + Math.round(breite) + "px " + Math.round(hoehe) + "px 0px)";
	num++;
	if (num < schritte) {
		setTimeout("bereichVeraendern()", 50);
	} else {
		bild1.style.clip = "rect(auto auto auto auto)";
	}
}
</script>
</head>

im Prinzip andere ich nur das Objekt auf den sich die Funktion bezieht von einem Bild auf eine Tabelle … also von:

<body >

<img src="Style/ButtonDS.jpg" width="240" height="67" border="0" alt=""
                            onmouseover="javascript:init()">

<div id="bild">
         <img src="Style/HG_ASS2.jpg" name="b1">
</div>
</body>

in

<body >

<img src="Style/ButtonDS.jpg" width="240" height="67" border="0" alt=""
                            onmouseover="javascript:init()">

<div id="bild">
         <table id="b1">
	         <colgroup>
	           <col width="640">
	         </colgroup>
	 <tr>
            <td style="background-image:url(Style/HG_T6.png);margin-left:20px;font-size:120%;"
            valign="top">
            <p style="margin:30px;color:#c3ee15;font-weight:bold;">Titel</p></td>
          </tr>
	</table>
</div>
</body>

es wäre echt supercool wenn mir jemand helfen könnte,

Gruß Sebastian

3

Jetzt gehts auch mit dem Bild auch mit dem Firefox … habe einfach name gegen id getauscht. Das Problem das die Tabelle weiterhin nicht funktioniert bleibt jedoch!

HIIILFE

LG Sebastian

4

Hallo nochmal zusammen,

jetzt habe ich es hinbekommen das es wenigstens im IE funktioniert … dazu war es nötig eine Größenangabe für die Tabelle anzugeben …

das ganze findet ihr hier:

DOM-Test Tabelle Teilerfolg

Leider funktioniert das ganze IMMER noch nicht im Firefox. Hat jemand eine Idee woran das liegt … ihr könntet mir ruhig mal ein wenig helfen :wink:

LG Sebastian

5

Hallo nochmal,

leider sitz ich immer noch an dem selben Problem und ich komm nicht weiter.

wenn ich auf die Grafik (Pferdekopfnebel) links gehe wird eine Texttabelle mittels Clipping von links oben nach rechts unten geöffnet. LEIDER funktioniert das nur im IE und ich weiß nicht wieso. Da bräuchte ich Hilfe.

Ausserdem besteht das Problem das wenn ich die Grafik wieder verlasse die Texttabelle verschwindet (soweit so gut) … wenn ich aber erneut auf die Grafik gehe das Clipping nicht mehr stattfindet … das möchte ich aber. Wie bekomm ich das hin …

hier nochmal die Seite (wie gesagt am besten im IE anschauen, da funzt es schon …)
Astronomie

LG Sebastian

6

So,

dank massiver Hilfe funktioniert das Ganze jetzt wie ihr vielleicht schon festgestellt habt

LG Sebastian