Zoom på billede
Hvordan kan jeg gøre det muligt at zoome ind på mit svg billede så skalaen på mine tag's zoomer med?<?php
//include db connect and seassion start.
include 'includes/function.php';
$con = db_connect();
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP, MySQL and jQuery Photo Tagging by Neill Horsman</title>
<!-- A simple css reset from yahoo -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
<!-- Styles for tagging -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- Styles for the jquery plugin from http://odyniec.net/projects/imgareaselect/ not supported by neillh.com.au -->
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<!-- Include jquery via google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- The jquery plugin from http://odyniec.net/projects/imgareaselect/ not supported by neillh.com.au -->
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<!-- Phototagging Load js -->
<script type="text/javascript" src="js/jquery.load.js"></script>
<!-- Outputs all tag styles, in the head for validation purposes. -->
<?php echo get_tags($con, 'styles'); ?>
</head>
<body>
<div id="site">
<?php
//Start jquery popup error checking. (this can removed if needed.
if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
echo "<div id='error-box'><ul class='err'>";
foreach($_SESSION['ERRMSG_ARR'] as $msg) {
echo "<li>",$msg,"</li>";
}
echo "</ul><span class='closebtn'><a href='#' id='error-link'>Luk</a></span></div>";
unset($_SESSION['ERRMSG_ARR']);
}
//END jquery popup error checking.'
$image_id = '0000000001';
?>
<!-- Can do this much simplier in jquery now #TODO -->
<div class="on-off">
<div class="start-tagging">Klik her for at starte tagging</div>
<div class="finish-tagging hide">Klik her for at stoppe tagging</div>
</div>
<div class="image">
<div id="title_container" class="hide">
<form method="post" action="includes/function.php">
<!-- Grab the X/Y/Width/Height we dont need x2 & y2, but will capture them anyway -->
<fieldset>
<input type="hidden" name="image_id" id="image_id" value="<?php echo $image_id; ?>" />
<input type="hidden" name="x1" id="x1" value="<?php echo $x1; ?>" />
<input type="hidden" name="y1" id="y1" value="<?php echo $y1; ?>" />
<input type="hidden" name="x2" id="x2" value="<?php echo $x2; ?>" />
<input type="hidden" name="y2" id="y2" value="<?php echo $y2; ?>" />
<input type="hidden" name="w" id="w" value="<?php echo $w; ?>" />
<input type="hidden" name="h" id="h" value="<?php echo $h; ?>" />
<label for="title">Tag text</label><br />
<input type="text" id="comment" name="comment" size="30" value="" maxlength="55" /><br />
<select type="text" id="frame_type" name="frame_type">
<option disabled>Vælg Farve</option>
<option value="Red">Rød</option>
<option value="Green">Grøn</option>
</select><br />
<input type="hidden" name="tag" value="true" />
<input type="submit" value="Submit" class="" />
</fieldset>
</form>
</div>
<img src="../wsm/projects/<?php echo $image_id; ?>/svgs/new/svg.svg" width="800" border="0" id="imageid" alt="SVG Tegning" />
<!-- The UL can be moved into the function if wanted -->
<ul class="map">
<?php echo get_tags($con, 'map'); ?>
</ul>
</div>
<h2 class="tagtitles">I dette billede:</h2>
<!-- The UL can be moved into the function if wanted -->
<ul id="titles">
<?php echo get_tags($con, 'list'); ?>
</ul>
<!-- END -->
</div>
</body>
</html>
