Results 1 to 3 of 3

Thread: Adapting the Image Thumbnail Viewer II to work with html image maps

  1. #1
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adapting the Image Thumbnail Viewer II to work with html image maps

    Hi.
    I put the Image Thumbnail Viewer II in one of my webpages and it works fine with <a href="..."></a> labels. However, I need to implement it over an html image map for instance:
    Code:
    <map name="Map">
      <area shape="rect" coords="123,94,132,102" href="#">
    </map>
    It doesn't work with that kind of href labels (only works with <a href ).
    Below is the code of the js file that makes everything. I tried to modify it in order to use the map elements, but no success.

    Any has any idea? It would be really appreciated. Thx.

    Code:
    // -------------------------------------------------------------------
    // Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
    // File: Thumbnailviewer2.js
    // Last updated: Feb 5th, 2007
    // -------------------------------------------------------------------
    
    var thumbnailviewer2={
    enableTitle: true, //Should "title" attribute of link be used as description?
    enableTransition: true, //Enable fading transition in IE?
    hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
    
    /////////////No need to edit beyond here/////////////////////////
    
    iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
    iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
    preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
    targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
    alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload
    
    loadimage:function(linkobj){
    var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
    var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
    if (typeof dest!="undefined") //Hyperlink the enlarged image?
    imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
    if (description!="") //Use title attr of the link as description?
    imageHTML+='<br />'+description
    if (this.iefiltercapable){ //Is this an IE browser that supports filters?
    showcontainer.style.filter=this.iefilterstring
    showcontainer.filters[0].Apply()
    }
    showcontainer.innerHTML=imageHTML
    this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
    this.featureImage.onload=function(){ //When enlarged image has completely loaded
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Play()
    }
    this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Stop()
    }
    },
    
    hideimage:function(linkobj){
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    showcontainer.innerHTML=""
    },
    
    
    cleanup:function(){ //Clean up routine on page unload
    if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
    this.showcontainer=null
    for (var i=0; i<this.targetlinks.length; i++){
    this.targetlinks[i].onclick=null
    this.targetlinks[i].onmouseover=null
    this.targetlinks[i].onmouseout=null
    }
    },
    
    addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
    target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
    target.attachEvent(tasktype, functionref)
    },
    
    init:function(){ //Initialize thumbnail viewer script
    this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
    var pagelinks=document.getElementsByTagName("a")
    for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
    if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
    var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
    if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
    this.preloadedimages[this.preloadedimages.length]=new Image()
    this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
    pagelinks[i]["onclick"]=function(){ //Cancel default click action
    return false
    }
    }
    pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
    thumbnailviewer2.loadimage(this) //Load image
    return false
    }
    if (this.hideimgmouseout)
    pagelinks[i]["onmouseout"]=function(){
    thumbnailviewer2.hideimage(this)
    }
    this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    
    
    } //END init() function
    
    }
    
    
    if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
    thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
    else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
    thumbnailviewer2.alreadyrunflag=1
    thumbnailviewer2.init()
    }
    thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
    thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    In theory, if you replace the current init function with this one which also checks for and initializes area tags:

    Code:
    init:function(){ //Initialize thumbnail viewer script
    this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
    var pagelinks=document.getElementsByTagName("a")
    for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
    if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
    var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
    if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
    this.preloadedimages[this.preloadedimages.length]=new Image()
    this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
    pagelinks[i]["onclick"]=function(){ //Cancel default click action
    return false
    }
    }
    pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
    thumbnailviewer2.loadimage(this) //Load image
    return false
    }
    if (this.hideimgmouseout)
    pagelinks[i]["onmouseout"]=function(){
    thumbnailviewer2.hideimage(this)
    }
    this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    
    var pageareas=document.getElementsByTagName("area")
    for ( i=0; i<pageareas.length; i++){ //BEGIN FOR LOOP
    if (pageareas[i].getAttribute("rel") && /enlargeimage:/i.test(pageareas[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
    var initType=pageareas[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
    if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
    this.preloadedimages[this.preloadedimages.length]=new Image()
    this.preloadedimages[this.preloadedimages.length-1].src=pageareas[i].href
    pageareas[i]["onclick"]=function(){ //Cancel default click action
    return false
    }
    }
    pageareas[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
    thumbnailviewer2.loadimage(this) //Load image
    return false
    }
    if (this.hideimgmouseout)
    pageareas[i]["onmouseout"]=function(){
    thumbnailviewer2.hideimage(this)
    }
    this.targetlinks[this.targetlinks.length]=pageareas[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    
    
    } //END init() function
    It should work out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It works. Thank you so much for your time and for your skills.
    Best regards.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •