Results 1 to 3 of 3

Thread: image thumbnail viewer II mapping

  1. #1
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default image thumbnail viewer II mapping

    1) Script Title: image thumbnail viewer II

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

    3) Describe problem: Great script. My problem is about image mapping the loaded picture. Say I have one big picture loaded and 2 different zones to get linked. how can i do that? any help appreciated

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

    Default

    I may not explain it well, or there is no way to do this.

    My question was about "image mapping" on image thumbnail viewer II

    Thumb 1 shows Picture 1, and i can use link on Picture 1. But I want to use 2 links, how can i do that?

    There is another way other than mapping, but i need help with that one too. I can cut the Picture 1 in two pieces, and link each of them. In that case, my question will be, how can i show 2 pictures at the same time with one mouse over?

    thx again

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

    Default Image Mapping

    anyways i figured that out

    for those who want to use

    1-make changes below in thumbnailer2.js

    add

    var mymap=linkobj.getAttribute("usemap")

    after

    var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any

    AND

    change

    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image

    to

    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" usemap="'+mymap+'"/>' //Construct HTML for enlarged image

    2-make changes below in your html file

    change

    <a href="" rel="enlargeimage::mouseover" rev="loadarea">

    to

    <a href="" rel="enlargeimage::mouseover" rev="loadarea" usemap="#map1">
    <a href="" rel="enlargeimage::mouseover" rev="loadarea" usemap="#map2">
    ...
    ...

    AND

    add

    <map name="map1">
    <area shape=rect coords="1,1,293,154" href="http://1/">
    <area shape=rect coords="299,2,470,152" href="http://2/">
    </map>
    <map name="map2">
    <area shape=rect coords="1,1,293,154" href="http://3/">
    <area shape=rect coords="299,2,470,152" href="http://4/">
    </map>

    ...
    ...

    an the end of html file

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
  •