Using imagepanner.js with usemap

**LSL** · 05-14-2012, 02:01 AM

Hi,

I am using imagepanner.js to enable panning of my image. However, i need to create hotspots too. When i added the 'usemap' to my img, the panning do not work. Please help. Below is the code:

<div id="canvasLayout" class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img id="ImgLayout" usemap="#links" />
</div>

Thanks!

**keyboard** · 05-14-2012, 03:26 AM

Please post a link to the page on your site that contains the problematic script or the source code, so we can check it out.

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

Is this a ddscript? Could you please either link to imagepanner.js or actually post it.

We'll need more information to help you.

**LSL** · 05-14-2012, 04:04 AM

Is the below okay?

Below is my code:

HTML Code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

       <style type="text/css">
        /*Default CSS for pan containers*/.pancontainer
        {
            position: relative; /*keep this intact*/
            overflow: hidden; /*keep this intact*/
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        #canvasLayout
        {
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="imagepanner.js"></script>

    <div id="veg_demo">        
        <div id="canvasLayout" class="pancontainer" data-orient="center" style="width:400px; height:300px;">
            <img id="ImgLayout" src="Tree.png" usemap="#links" />
        </div>
    </div>

    <map id="links" name="links">
    </map>
</script>

</body>

Below is the imagepanner.js:

Code:

/* Simple Image Panner and Zoomer (March 11th, 10)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// v1.1 (March 25th, 10): Updated with ability to zoom in/out of image

jQuery.noConflict()

var ddimagepanner = {

    magnifyicons: ['magnify.gif', 'magnify2.gif', 24, 23], //set path to zoom in/out images, plus their dimensions
    maxzoom: 4, //set maximum zoom level (from 1x)

    init: function($, $img, options) {
        var s = options
        s.imagesize = [$img.width(), $img.height()]
        s.oimagesize = [$img.width(), $img.height()] //always remember image's original size
        s.pos = (s.pos == "center") ? [-(s.imagesize[0] / 2 - s.wrappersize[0] / 2), -(s.imagesize[1] / 2 - s.wrappersize[1] / 2)] : [0, 0] //initial coords of image
        s.pos = [Math.floor(s.pos[0]), Math.floor(s.pos[1])]
        $img.css({ position: 'absolute', left: s.pos[0], top: s.pos[1] })
        if (s.canzoom == "yes") { //enable image zooming?
            s.dragcheck = { h: (s.wrappersize[0] > s.imagesize[0]) ? false : true, v: (s.wrappersize[1] > s.imagesize[1]) ? false : true} //check if image should be draggable horizon and vertically
            s.$statusdiv = $('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden">1x Magnify</div>').appendTo(s.$pancontainer) //create DIV to show current magnify level
            s.$statusdiv.css({ left: 0, top: s.wrappersize[1] - s.$statusdiv.outerHeight(), display: 'none', visibility: 'visible' })
            this.zoomfunct($, $img, s)
        }
        this.dragimage($, $img, s)
    },

    dragimage: function($, $img, s) {
        $img.mousedown(function(e) {
            s.pos = [parseInt($img.css('left')), parseInt($img.css('top'))]
            var xypos = [e.clientX, e.clientY]
            $img.bind('mousemove.dragstart', function(e) {
                var pos = s.pos, imagesize = s.imagesize, wrappersize = s.wrappersize
                var dx = e.clientX - xypos[0] //distance to move horizontally
                var dy = e.clientY - xypos[1] //vertically
                s.dragcheck = { h: (wrappersize[0] > imagesize[0]) ? false : true, v: (wrappersize[1] > imagesize[1]) ? false : true }
                if (s.dragcheck.h == true) //allow dragging horizontally?
                    var newx = (dx > 0) ? Math.min(0, pos[0] + dx) : Math.max(-imagesize[0] + wrappersize[0], pos[0] + dx) //Set horizonal bonds. dx>0 indicates drag right versus left
                if (s.dragcheck.v == true) //allow dragging vertically?
                    var newy = (dy > 0) ? Math.min(0, s.pos[1] + dy) : Math.max(-imagesize[1] + wrappersize[1], pos[1] + dy) //Set vertical bonds. dy>0 indicates drag downwards versus up
                $img.css({ left: (typeof newx != "undefined") ? newx : pos[0], top: (typeof newy != "undefined") ? newy : pos[1] })
                return false //cancel default drag action
            })
            return false //cancel default drag action
        })
        $(document).bind('mouseup', function(e) {
            $img.unbind('mousemove.dragstart')
        })
    },

    zoomfunct: function($, $img, s) {
        var magnifyicons = this.magnifyicons
        var $zoomimages = $('<img src="' + magnifyicons[0] + '" /><img src="' + magnifyicons[1] + '" />')
			.css({ width: magnifyicons[2], height: magnifyicons[3], cursor: 'pointer', zIndex: 1000, position: 'absolute',
			    top: s.wrappersize[1] - magnifyicons[3] - 1, left: s.wrappersize[0] - magnifyicons[2] - 3, opacity: 0.7
			})
			.attr("title", "Zoom Out")
			.appendTo(s.$pancontainer)
        $zoomimages.eq(0).css({ left: parseInt($zoomimages.eq(0).css('left')) - magnifyicons[2] - 3, opacity: 1 }) //position "zoom in" image
			.attr("title", "Zoom In")
        $zoomimages.click(function(e) { //assign click behavior to zoom images
            var $zimg = $(this) //reference image clicked on
            var curzoom = s.curzoom //get current zoom level
            var zoomtype = ($zimg.attr("title").indexOf("In") != -1) ? "in" : "out"
            if (zoomtype == "in" && s.curzoom == ddimagepanner.maxzoom || zoomtype == "out" && s.curzoom == 1) //exit if user at either ends of magnify levels
                return
            var basepos = [s.pos[0] / curzoom, s.pos[1] / curzoom]
            var newzoom = (zoomtype == "out") ? Math.max(1, curzoom - 1) : Math.min(ddimagepanner.maxzoom, curzoom + 1) //get new zoom level
            $zoomimages.css("opacity", 1)
            if (newzoom == 1) //if zoom level is 1x, dim "zoom out" image
                $zoomimages.eq(1).css("opacity", 0.7)
            else if (newzoom == ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image
                $zoomimages.eq(0).css("opacity", 0.7)
            clearTimeout(s.statustimer)
            s.$statusdiv.html(newzoom + "x Magnify").show() //show current zoom status/level
            var nd = [s.oimagesize[0] * newzoom, s.oimagesize[1] * newzoom]
            var newpos = [basepos[0] * newzoom, basepos[1] * newzoom]
            newpos = [(zoomtype == "in" && s.wrappersize[0] > s.imagesize[0] || zoomtype == "out" && s.wrappersize[0] > nd[0]) ? s.wrappersize[0] / 2 - nd[0] / 2 : Math.max(-nd[0] + s.wrappersize[0], newpos[0]),
				(zoomtype == "in" && s.wrappersize[1] > s.imagesize[1] || zoomtype == "out" && s.wrappersize[1] > nd[1]) ? s.wrappersize[1] / 2 - nd[1] / 2 : Math.max(-nd[1] + s.wrappersize[1], newpos[1])]
            $img.animate({ width: nd[0], height: nd[1], left: newpos[0], top: newpos[1] }, function() {
                s.statustimer = setTimeout(function() { s.$statusdiv.hide() }, 500)
            })
            s.imagesize = nd
            s.curzoom = newzoom
            s.pos = [newpos[0], newpos[1]]
        })
    }

}


jQuery.fn.imgmover = function(options) {
    var $ = jQuery
    return this.each(function() { //return jQuery obj
        if (this.tagName != "IMG")
            return true //skip to next matched element 
        var $imgref = $(this)
        if (parseInt(this.style.width) > 0 && parseInt(this.style.height) > 0) //if image has explicit CSS width/height defined
            ddimagepanner.init($, $imgref, options)
        else if (this.complete) { //account for IE not firing image.onload
            ddimagepanner.init($, $imgref, options)
        }
        else {
            $imgref.bind('load', function() {
                ddimagepanner.init($, $imgref, options)
            })
        }
    })
}


jQuery(document).ready(function($) { //By default look for DIVs with class="pancontainer"
    var $pancontainer = $('div.pancontainer')
    $pancontainer.each(function() {
        var $this = $(this).css({ position: 'relative', overflow: 'hidden', cursor: 'move' })
        var $img = $this.find('img:eq(0)') //image to pan
        var options = { $pancontainer: $this, pos: $this.attr('data-orient'), curzoom: 1, canzoom: $this.attr('data-canzoom'), wrappersize: [$this.width(), $this.height()] }
        $img.imgmover(options)
    })
})

Thanks!

**LSL** · 05-14-2012, 06:34 AM

1) Script Title: Imagepanner.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...magepanner.htm

3) Describe problem: I am using imagepanner.js to enable panning of my image. However, i need to create hotspots too. When i added the 'usemap' to my img, the panning do not work. Please help. Below is the code:

HTML Code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

       <style type="text/css">
        /*Default CSS for pan containers*/.pancontainer
        {
            position: relative; /*keep this intact*/
            overflow: hidden; /*keep this intact*/
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        #canvasLayout
        {
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="imagepanner.js"></script>

    <div id="veg_demo">        
        <div id="canvasLayout" class="pancontainer" data-orient="center" style="width:400px; height:300px;">
            <img id="ImgLayout" src="Tree.png" usemap="#links" />
        </div>
    </div>

    <map id="links" name="links">
    </map>
</script>

</body>

Thanks!

Thread: Using imagepanner.js with usemap

Thread Tools

Search Thread

Using imagepanner.js with usemap

Using imagepanner.js with usemap

Bookmarks

Bookmarks

Posting Permissions