Highlight face on mouseover.
This commit is contained in:
parent
4617ebfe65
commit
00d7ed76a3
@ -9,8 +9,20 @@
|
||||
// to show where the faces are at.
|
||||
if (count($existingFaces) > 0) {
|
||||
?>
|
||||
|
||||
<div class="square" title="Test" id="divfacebox" style="display:none;left:5;top:5;width:50;height:50;"></div>
|
||||
<style>
|
||||
.transparent30
|
||||
{
|
||||
filter:alpha(opacity=30);
|
||||
-moz-opacity: 0.3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.transparent80
|
||||
{
|
||||
filter:alpha(opacity=80);
|
||||
-moz-opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/JavaScript">
|
||||
function setfacemap() {
|
||||
@ -19,35 +31,46 @@
|
||||
photoimg.useMap = '#faces';
|
||||
}
|
||||
|
||||
function highlightbox(x1, y1, x2, y2, str_title) {
|
||||
// Put a div over a face when the mouse moves over it.
|
||||
// Doesn't actually work :(
|
||||
var photoimg = document.getElementById('gPhotoId-<?=$item->id ?>');
|
||||
var facediv = document.getElementById('divfacebox');
|
||||
facediv.title = str_title;
|
||||
facediv.style.display = 'block';
|
||||
facediv.style.left = photoimg.offsetLeft + x1;
|
||||
facediv.style.top = photoimg.offsetTop + y1;
|
||||
facediv.style.width=x2-x1;
|
||||
facediv.style.height=y2-y1;
|
||||
}
|
||||
|
||||
function hidebox() {
|
||||
// Hide the div when the mouse moves off of the face.
|
||||
document.getElementById('divfacebox').style.display = 'none';
|
||||
}
|
||||
function highlightbox(x1, y1, x2, y2, str_title, str_url) {
|
||||
var divtext = document.getElementById('divtagtext');
|
||||
var photodiv = document.getElementById('gPhoto');
|
||||
var photoimg = document.getElementById('<?="gPhotoId-{$item->id}"?>');
|
||||
var divface = document.getElementById('divsquare');
|
||||
|
||||
divface.style.display = 'block';
|
||||
divface.style.left = (photoimg.offsetLeft + x1) + 'px';
|
||||
divface.style.top = (photodiv.offsetTop + y1) + 'px';
|
||||
divface.style.width=(x2-x1) + 'px';
|
||||
divface.style.height=(y2-y1) + 'px';
|
||||
divface.onclick = function() {self.location.href = str_url;}
|
||||
|
||||
divtext.style.display = 'block';
|
||||
divtext.style.left = divface.style.left;
|
||||
divtext.innerText = str_title;
|
||||
divtext.textContent = str_title;
|
||||
divtext.style.top = (parseInt(divface.style.top.split('p')[0]) + parseInt(divface.style.height.split('p')[0]) + 2) + 'px';
|
||||
}
|
||||
|
||||
function hidebox() {
|
||||
// Hide the divs when the mouse moves off of the face.
|
||||
document.getElementById('divsquare').style.display = 'none';
|
||||
document.getElementById('divtagtext').style.display = 'none';
|
||||
}
|
||||
|
||||
// Call setfacemap when the page loads.
|
||||
window.onload = setfacemap();
|
||||
</script>
|
||||
|
||||
<div id="divtagtext" class="transparent80" style="position:absolute;display:none;border:2px #000000 outset;background-color:#ffffff;font-weight:bold;"></div>
|
||||
<div id="divsquare" class="transparent30" onMouseOut="hidebox()" style="position:absolute;display:none;border:2px solid #000000;background-color:#ffffff;" onclick="self.location.href = '';"></div>
|
||||
|
||||
<map name="faces">
|
||||
<?
|
||||
// For each face, add a rectangle area to the page.
|
||||
foreach ($existingFaces as $oneFace) {
|
||||
$oneTag = ORM::factory("tag", $oneFace->tag_id)
|
||||
?>
|
||||
<area shape="rect" coords="<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>" href="<?=url::site("tags/$oneFace->tag_id") ?>" title="<?=p::clean($oneTag->name); ?>" alt="<?=$oneTag->name; ?>" onMouseOver="highlightbox(<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>,'<?=p::clean($oneTag->name); ?>')" onMouseOut="hidebox()" />
|
||||
<area shape="rect" coords="<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>" href="<?=url::site("tags/$oneFace->tag_id") ?>" title="<?=p::clean($oneTag->name); ?>" alt="<?=p::clean($oneTag->name); ?>" onMouseOver="highlightbox(<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>,'<?=p::clean($oneTag->name); ?>', '<?=url::site("tags/$oneFace->tag_id") ?>')" />
|
||||
<? } ?>
|
||||
</map>
|
||||
<?
|
||||
|
Reference in New Issue
Block a user