Hotspot Creator - Blowsie

by blowsie

HTML

<label>Image URL</label>
<input type="text" id="imageurl"/>&nbsp;
<label>Output</label>
<input type="button" value="go" id="go"/>
<textarea id="output" rows="1" cols="30"></textarea>
<div id="hotspot">
    <div class="hotspot">
        <img id="image" src="http://www.stanford.edu/~ajspakow/figures/fatigue/fatigue.png"/>
    </div>
</div>
<p>Once a item is created, hover over it and hit;<br/>
    "DEL" to delete;<br/>
    "E" to Edit;</p>

CSS

body {
    font-family: 'Tahoma';
    font-size:11px;
}
textarea {font-size:10px;}
.hotspot {
    position:relative;
    float:left;
    margin:100px
}
img{
    max-width:600px;
    max-height:600px;
    border:1px solid red;
}
.hotspot a {
    position:absolute;
    background: rgba(109, 201, 255, 0.7);
    border:1px solid rgb(0, 161, 255);
    display:block;
    margin: 0 1px 1px 0;
}
.hotspot a:hover {
    background: rgba(109, 201, 255, 0.4);
}
.clear{clear:both;}

JavaScript

$('#go').click(function() {
    $('#output').val($('#hotspot').html().trim()).focus().select();
});
$('#imageurl').bind('keyup change', function() {
    $("#image").attr("src", $(this).val())
});
var spotcount = 0;
$('.hotspot').mousedown(function(e) {
    var x = e.pageX - $(this).offset().left;
    y = e.pageY - $(this).offset().top;
    w = $(this).width();
    h = $(this).height();
    pw = x / w * 100;
    ph = y / h * 100;
    spotcount = spotcount + 1;
    // Create Element
    $(this).append("<a style='left:" + pw + "%; top:" + ph + "%' class='area" + spotcount + "'>&#65279;</a>");
    // Bind Mousemove Events
    $(this).bind("mousemove", function(e) {
        var x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
        w = $(this).width();
        h = $(this).height();
        pw = 100 - [x / w * 100];
        ph = 100 - [y / h * 100];
        $(".area" + spotcount).css({
            "right": pw + "%",
            "bottom": ph + "%",
            "zIndex": spotcount
        });
    });
    return false;
}).mouseup(function(e) {
    var x = e.pageX - $(this).offset().left;
    y = e.pageY - $(this).offset().top;
    w = $(this).width();
    h = $(this).height();
    pw = 100 - [x / w * 100];
    ph = 100 - [y / h * 100];
    $(this).unbind("mousemove");
    var url = prompt("URL:");
    var title = prompt("Title:");
    $(".area" + spotcount).attr("href", url).attr("title", title).mouseover(function() {
        var item = $(this)
        $(window).bind("keydown", function(e) {
            if (e.keyCode === 46) {
                item.remove();
                $(window).unbind("keydown");
            }
            if (e.keyCode === 69) {
                var url = prompt("URL:");
                item.attr("href", url).attr("title", title)
            }
        });
    }).mouseout(function() {
        $(window).unbind("keydown");
    });
})