|
|
|
อยากเปลี่ยนจากรูปเป็นตัวอักษรอ่ะค่ะ ช่วยหน่อยค่ะ |
|
|
|
|
|
|
|
Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Snapfit.js (javascript jigsaw puzzle functionality for images)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<meta name="Author" lang="en" content="snapfit.netzgesta.de - Christian Effenberger">
<meta name="Publisher" lang="en" content="www.netzgesta.de">
<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">
<meta name="Generator" lang="en" content="Christian Effenberger">
<meta name="Description" lang="en" content="snapfit.js allows you to add jigsaw puzzle functionality to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="snapfit.js, javascript puzzle, jigsaw puzzle, Internet Explorer, Mozilla, Firefox, Opera, Safari">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }
tt {color: green;}
b {color: #993333;}
body { background: url(images/backgrnd.jpg); color: black; font-family: Georgia; line-height: 1.5; margin: 0.5em 1em;}
h2 { line-height: 1; }
.demo { float: center; margin: 0px; padding: 12px; text-align: center;}
.logo { float: center; margin: 0 1em 1em 0; position: relative; width: 360px; height: 160px; }
#guru { float: none; padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
#guru div { float: none; border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}
</style>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="snapfit.js"></script>
</head>
<body><noscript></noscript>
<h2><br />
</h2>
<dl>
<dd>
<p></p>
</dd>
</dl>
<center>
<div class="demo"><div style="outline: 1px solid silver"><img id="we" onload="snapfit.add(this,{callback: function() {alert('You solved the puzzle!');}, aborder:true, aimage:true, polygon:true, space:20});" src="images/we.jpg" width="320" height="320" border="0" alt="we" /></div>
<strong>Level</strong>
<button type="button" onclick="snapfit.solve(document.getElementById('we'));">Solve</button><br>
</div></center>
<!--<div class="demo"><div><img id="test" onload="snapfit.add(this,{aopacity:0.0001, mixed:true});" src="images/test.png" width="320" height="320" border="0" alt="test" /></div> -->
<small><br>
</small>
</div>
<p style="clear: left;"> </p>
</body>
</html>
อันนี้เป็นจิ๊กซอ อยากเปลี่ยนจากรูปเป็นตัวอักษรค่ะ แบบ จิ๊กซอร์ตัวนึง ก็เป็นค่าที่ส่งมา(จากการกรอกข้อมูล)เข้ามาค่านึง แต่แก้ตั้งนานแล้ว ไม่ได้สักทีค่ะ
ทำไม่ค่อยเป็น
Tag : PHP, HTML/CSS
|
|
|
|
|
|
Date :
2013-02-13 14:05:44 |
By :
namsai |
View :
719 |
Reply :
3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ตอนนี้มันเป็นแบบไหนครับ ลอง Capture หน้าจอมาให้ดูหน่อยครับ
|
|
|
|
|
Date :
2013-02-13 15:12:44 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ตัวหนังสือไม่ได้เป็นวัตถุ เหมือนรูปภาพน่ะครับ ผมคิดว่าทำไม่ได้หรอกครับ นอกเสียจาก ทำตัวหนังสือใน photohsop ให้เป็นวัตถุชิ้นเดียว แล้วจัดเสกลของ jigsaw ให้เล็กๆ พอดีกับตัวอักษร
|
|
|
|
|
Date :
2013-02-13 16:00:00 |
By :
sakuraei |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ต้องจำกัดเงื่อนไขคับ ทำเป็น dynamic หมดไม่ได้
เช่นเตรียมภาพที่เป็นตัวหนังสือไว้
อาจจะ random รูปแบบเกมสืไม่ได้มาก
|
|
|
|
|
Date :
2013-02-13 17:35:46 |
By :
cmumad |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 00
|