Created
May 22, 2010 16:29
-
-
Save qingfeng/410191 to your computer and use it in GitHub Desktop.
Support usemap tag richtext editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="600" height="500"></canvas><br/> | |
| <button id="output">输出HTML</button><br/> | |
| <textarea id="html" rows="20" cols="50"></textarea> | |
| <script type="text/javascript"> | |
| var IMG_URL = "http://t.douban.com/pics/partner/roewe/head2.jpg"; | |
| var ctx = $('#canvas')[0].getContext('2d'); | |
| var urls = []; | |
| var start_x = 0; | |
| var start_y = 0; | |
| $('#canvas').mousedown(function(e){ | |
| start_x = e.layerX; | |
| start_y = e.layerY; | |
| }) | |
| $('#canvas').mouseup(function(e){ | |
| ctx.strokeRect(start_x, start_y, e.layerX-start_x, e.layerY-start_y) | |
| var url = window.prompt("URL?","http://"); | |
| urls.push({ | |
| x1:start_x, | |
| x2:e.layerX, | |
| y1:start_y, | |
| y2:e.layerY, | |
| url:url | |
| }) | |
| }) | |
| var img = new Image() | |
| img.onload = function(){ | |
| ctx.drawImage(img,0,0); | |
| } | |
| img.src = IMG_URL | |
| $("#output").click(function(){ | |
| var html = ['<div style="padding-bottom:30px;">{contact_area}</div>'] | |
| html.push('<div><img usemap="#bg_map" \ src="'+IMG_URL+'" border="0" alt="" />'); | |
| html.push('<map name="bg_map">'); | |
| for(var i=0;i<urls.length;i++){ | |
| var u = urls[i]; | |
| html.push('<area shape="rect" coords="'+[u.x1, u.x2, u.y1, u.y2].join(",")+'" href="'+u.url+'"></area>'); | |
| } | |
| html.push('</map>'); | |
| html.push('</div>'); | |
| $("#html").attr('value', html.join('\n')) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment