ladysundancing
Neues Mitglied
Ich habe einen Processingsketch als Javascript exportiert um ihn auf meiner HTML Webseite einzubauen.
Dies hat auch funktioniert, allerdings sollte das Script im Hintergrund platziert sein, damit ich meine divs darüber legen kann.
Wie stelle ich das an?
Mein Code sieh so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
<title>blabla</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
</head>
<body>
<script src="processing.js" type="text/javascript"></script>
<script type="text/javascript">function getProcessingSketchID () { return 'solve'; }</script>
<div class="bg">
<body style="solve.pde">
<canvas class="body" id="solve" data-processing-sources="solve.pde"
width="800" height="600">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
<div id="main">
<div class="circlewhite"><div class="section who first">
<h3>Who</h3>
<p>Sølve Sundsbø</p>
</div></div>
<div class="circlewhite"><div class="section where">
<h3>What</h3>
<p>Photographer</p>
</div></div>
<div class="circlewhite"><div class="section when">
<h3>Information</h3>
<p>Now!</p>
</div></div>
<div class="image first">
<img src="img/01.png" />
</div>
<div class="image">
<img src="img/01.png" />
</div>
<div class="image">
<img src="img/01.png" />
</div>
</div>
</body>
</html>
Dies hat auch funktioniert, allerdings sollte das Script im Hintergrund platziert sein, damit ich meine divs darüber legen kann.
Wie stelle ich das an?
Mein Code sieh so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
<title>blabla</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
</head>
<body>
<script src="processing.js" type="text/javascript"></script>
<script type="text/javascript">function getProcessingSketchID () { return 'solve'; }</script>
<div class="bg">
<body style="solve.pde">
<canvas class="body" id="solve" data-processing-sources="solve.pde"
width="800" height="600">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
<div id="main">
<div class="circlewhite"><div class="section who first">
<h3>Who</h3>
<p>Sølve Sundsbø</p>
</div></div>
<div class="circlewhite"><div class="section where">
<h3>What</h3>
<p>Photographer</p>
</div></div>
<div class="circlewhite"><div class="section when">
<h3>Information</h3>
<p>Now!</p>
</div></div>
<div class="image first">
<img src="img/01.png" />
</div>
<div class="image">
<img src="img/01.png" />
</div>
<div class="image">
<img src="img/01.png" />
</div>
</div>
</body>
</html>
