IMAGE ZOOM + MAP AREA – HTML / XHTML – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

IMAGE ZOOM + MAP AREA – HTML / XHTML – Fórum – Programujte.comIMAGE ZOOM + MAP AREA – HTML / XHTML – Fórum – Programujte.com

 

Spuštěný nový filmový web Filmožrouti.cz — vše o Avengers, Pacific Rim, Thor, Star Wars…
Tom
~ Anonymní uživatel
424 příspěvků
11. 8. 2017   #1
-
0
-

Ahoj... neměl by někdo tip jak vyřešit ZOOM obrázku a následně v něm využít možnosti MAP AREA nebo něco alternativního? 

Nyní jsem zkoušel využít IMAGEPANNER za využití JS. ZOOM super, ale po zvětšení COORDS nesedí na své pozici.


----------- HTML ----------------------------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>

<style>
/* demo styles. Remove if desired */
#pcontainer1{
width: 600px;
height: 400px;
}
@media screen and (max-width: 780px){ /* responsive setting */
#pcontainer1{
width: 100%;
height: 400px;
}
}
</style>
<link rel="stylesheet" rel="nofollow" href="css/imagepanner.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/imagepanner.js">
/***********************************************
* Simple Image Panner and Zoomer v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
var panimage1 // register arbitrary variable
jQuery(function($){
panimage1 = new imagepanner({
wrapper: $('#pcontainer1'), // jQuery selector to image container
imgpos: [100, 300], // initial image position- x, y
maxlevel: 4 // maximum zoom level
})
})
</script>

</head>
<body>
<div id="pcontainer1" class="pancontainer">
<img src="images/rodokmen-plakat-a1-v17_02.jpg" width="1280" height="782" usemap="#Map" border="0" />
<map name="Map" id="Map">
   <area shape="rect" coords="610,213,670,275" rel="nofollow" href="http://www.seznam.cz"> 
</map>
</div>
<br />
<button onClick="panimage1.zoom('+1')">zoom In</button> <button onClick="panimage1.zoom('-1')">zoom out</button> <button onClick="panimage1.zoom(1)">reset</button>
</body>
</html>

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------


----------- CSS ------------------------------------------------------------


.pancontainer{
position: relative;
overflow: hidden;
width: 500px; /* default pan container width */
height: 200px; /* default pan container height */
}
.pancontainer img{
display: block;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
ul.zoomcontrols{
position: absolute;
margin: 0;
padding: 0;
list-style: none;
bottom: -1px;
right: 0;
display: block;
background: #eee;
opacity: 0.5;
cursor: pointer;
}
ul.zoomcontrols li{
display: block;
width: 40px;
height: 40px;
font: bold 2em Arial;
text-align: center;
border-bottom: 1px solid gray;
}
ul.zoomcontrols li:hover{
background: #D1D1D1;
}

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

----------- JS ----------------------------------------------------------


/* Simple Image Panner and Zoomer v2.0
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Requires kinetic (https://github.com/…uery.kinetic) and jquery mouse wheel (https://github.com/…y-mousewheel)
* Visit http://www.dynamicdrive.com/ for full source code
*/
var imagepanner = (function($){
var defaults = {zoomable:true, mousezoom:0.3, controlzoom: 0.5, maxlevel:4, imgpos:[0,0] }
defaults.zoomcontrols = '<ul class="zoomcontrols"><li title="Zoom In" class="in">+</li><li title="Zoom Out" class="out">-</li></ul>'
function limitnumber(num, max){
if (num < 1)
return 1
else if (num > max)
return max
return num
}
function imagepanner(options){
var thisinst = this
if (options.wrapper.length !=1){
alert('Wrapper should be a single element! Existing.')
return
}
this.s = $.extend({}, defaults, options)
var $wrapper = options.wrapper.css({position:'relative', overflow:'hidden'}),
$img = options.wrapper.find('img:eq(0)'),
img = $img.get(0)
imgloaded = $.Deferred()
$img.wrap('<div style="width:100%; height:100%;position:relative;overflow:hidden" />')
var $imgwrapper = $img.parent()
if (img.getAttribute('width') || img.style.width > 0 || parseInt($img.css('width')) > 50){
imgloaded.resolve()
}
else if (img.complete){
imgloaded.resolve()
}
else{
$img.on('load', function(){
imgloaded.resolve()
})
}
imgloaded.done(function(){ // image.done
$imgwrapper.kinetic({ // set up Kinetic. See https://github.com/…uery.kinetic for options
maxvelocity: 60
})
$wrapper.mousewheel(function(event){ // set up Mousewheel
    if (event.deltaY > 0){
thisinst.zoom('+' + thisinst.s.mousezoom)
}
else{
thisinst.zoom('-' + thisinst.s.mousezoom)
}
return false
})
$wrapper.on('dblclick', function(){
thisinst.zoom(1)
})
if (thisinst.s.zoomcontrols.length>0 && thisinst.s.maxlevel > 1){ // if zoomcontrols HTML defined and image is zoomable
$wrapper.append(thisinst.s.zoomcontrols)
$wrapper.find('ul.zoomcontrols').on('click', function(e){
var zoomlevel
var targetclass = e.target.className
if (/(in)|(out)/i.test(targetclass)){
zoomlevel = (targetclass == 'in')? '+' : '-'
zoomlevel += thisinst.s.controlzoom
thisinst.zoom(zoomlevel)
}
})
}
$imgwrapper.animate({scrollLeft: thisinst.s.imgpos[0], scrollTop: thisinst.s.imgpos[1]}, 0)
thisinst.refs = {$imgwrapper: $imgwrapper, $img: $img}
thisinst.imgdata = {odimensions:[$img.width(), $img.height()], currentzoom:1}
}) // end image.done
}
imagepanner.prototype = {
zoom:function(action){
if (!this.refs){ // image panner has initialized yet
return
}
var thisinst = this
var s = this.s
var refs= this.refs
var imgdata = this.imgdata
var currentzoom = this.imgdata.currentzoom
var zoomlevel, owidth, oheight, nwidth, nheight, nscrollX, nscrollY
if (typeof action == 'string' && (action.charAt(0) == '+' || action.charAt(0) == '-')){
zoomlevel = currentzoom + parseFloat(action)
}
else{
zoomlevel = parseFloat(action)
}
zoomlevel = limitnumber(zoomlevel, s.maxlevel)
if (!isNaN(zoomlevel)){
owidth = imgdata.odimensions[0]
oheight = imgdata.odimensions[1]
nwidth = owidth * zoomlevel
nheight = oheight * zoomlevel
nscrollX = refs.$imgwrapper.scrollLeft() / currentzoom * zoomlevel
nscrollY = refs.$imgwrapper.scrollTop() / currentzoom * zoomlevel
refs.$imgwrapper.stop().animate({scrollLeft: nscrollX, scrollTop: nscrollY})
refs.$img.stop().animate({width:nwidth, height:nheight}, function(){
thisinst.imgdata.currentzoom = zoomlevel
})
}
}
}
return imagepanner
})(jQuery);
 

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

To vše za využití JQUERY

Nahlásit jako SPAM
IP: 79.98.155.–
Jerry
~ Anonymní uživatel
120 příspěvků
12. 8. 2017   #2
-
0
-

hele a viděl jsi někdy tuhle web stránku ?

http://www.elevateweb.co.uk/image-zoom/examples

je tam aj mouse zoom (s použitím scrolleru)

Nahlásit jako SPAM
IP: 2a00:1028:83be:235a:fd22:...–
Tom
~ Anonymní uživatel
424 příspěvků
12. 8. 2017   #3
-
0
-

#2 Jerry
Děkuji za tip... jsou tam zajímavá řešení, jen pro tento účel, který hledám to není přesně to co mám na mysli. V každém případě dík :-) 

Nahlásit jako SPAM
IP: 79.98.155.–
Jerry
~ Anonymní uživatel
120 příspěvků
12. 8. 2017   #4
-
0
-

jo ty myslíš asi něco takovýho co ?

http://preview.codecanyon.net/item/mapplic-custom-interactive-map-jquery-plugin/full_screen_preview/6275001?redirect_back=true&ref=coolansh63

Nahlásit jako SPAM
IP: 2a00:1028:83be:235a:8106:...–
gna
~ Anonymní uživatel
461 příspěvků
12. 8. 2017   #5
-
0
-

#4 Jerry
Jo, něco takového myslí a neví, jak mapu zoomovat spolu s obrázkem. Napsal to hned na začátku.   

Nahlásit jako SPAM
IP: 213.211.51.–
Tom
~ Anonymní uživatel
424 příspěvků
13. 8. 2017   #6
-
0
-

#4 Jerry
Na MAPPLIC jsem narazil včera a docela zajímavé řešení... zatím asi TOP co jsem našel :-) děkuji 

Nahlásit jako SPAM
IP: 79.98.155.–
Tom
~ Anonymní uživatel
424 příspěvků
13. 8. 2017   #7
-
0
-

#5 gna
:-) 

Nahlásit jako SPAM
IP: 79.98.155.–
peter
~ Anonymní uživatel
3038 příspěvků
14. 8. 2017   #8
-
0
-

Ja bych pouzil 2 obrazky. V tom nazoomovanem bych si vykreslil spravne coords. Pokud tam neco klikas, pridavas vlajecky, tak bych to duplikoval i pro maly obrazek

Nahlásit jako SPAM
IP: 2001:718:2601:258:79e4:c5...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

Podobná vlákna

Image map — založil Jockie

Zoom na Stránce — založil Jakub Holec

XNA 2D zoom vycentrování — založil Andus

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý