Help with javascript tweak?

Abbey · **Joined:** Sun Jan 18, 2009 10:40 pm **Posts:** 4

Code:

HEAD:
<script language="javascript">
function U(F, Coords)
{
   var Z = document.getElementById("MyZoom");
   
   Z.src =  F ;
   Z.style.display = '';
   var C = Coords;
   
   var Top    = C.substr(C.indexOf(",")+1, C.length);   
   var Right  = Top.substr(Top.indexOf(",")+1, Top.length);

   var Left   = C.substring(0, C.indexOf(","));
   var Top    = Top.substring(0, Top.indexOf(","));
   var Right  = Right.substring(0, Right.indexOf(","));   
   var Bottom = C.substr(C.lastIndexOf(",")+1, C.length);
   
   Z.style.left = Right;
   Z.style.top  = Bottom;
}

</script>

BODY:
<img style="position: absolute; left: 0px; top: 0px; width: 300px; height: 225px; border: 1px solid black; display: none" id= "MyZoom" src="" height="128" width="128" /> 
<img src="Mosaic.jpg" border=0 width=280 usemap="#Map">
<map name="Map">
  <area onmouseover="U(this.href, this.coords);" shape="rect" coords="0,0,17,13" href="A.jpg" target="_blank">
  <area onmouseover="U(this.href, this.coords);" shape="rect" coords="17,0,35,13" href="B.jpg" target="_blank">
  <area onmouseover="U(this.href, this.coords);" shape="rect" coords="35,0,53,13" href="C.JPG" target="_blank">
....
</map>

I know this has got to be simple, how do you get the popped up image to disappear when it leaves the main image or if you click outside the main image?
Would it be something with onmouseout?

Andrea · **Posted:** Mon Jan 19, 2009 12:35 am

Abbey wrote:

I know this has got to be simple, how do you get the popped up image to disappear when it leaves the main image or if you click outside the main image?
Would it be something with onmouseout?

I'm not an expert with Javascript, probably on that event I would set the source image to blank (call U("",this.coords) on onmouseout)

Abbey · **Joined:** Sun Jan 18, 2009 10:40 pm **Posts:** 4

That didn't work...I sorta got it working, I took out all the mouseovers in the area tags and had the javascript create them dynamically...

Code:

function init () {
var Map = document.getElementsByTagName('area');

for (var i=0l i<Map.length; i++) {
  Map[i].onmouseover = function () {
    U(this.href, this.coords);
  }

  Map[i].onmouseout = function () {
   document.getElementById('MyZoom').style.display = 'none';
  }
}

}

window.onload = init;

though now this part:

Code:

Z.style.display = '';

Stopped working, so I tried:

Code:

Z.style.display = 'block';

and that started working, but the pop-up images where off...

Abbey · **Joined:** Sun Jan 18, 2009 10:40 pm **Posts:** 4

Okay, I take that back, apparently the imagemap can't be surrounded by other div tags... it worked fine all by itself on a plain html page... now I just have a CSS problem with positioning I guess...

Andrea · **Posted:** Mon Jan 19, 2009 5:33 am

Let me know when you get a solution

Abbey · **Joined:** Sun Jan 18, 2009 10:40 pm **Posts:** 4

Well, I know what the problem is now.

Though, I do not know how to fix it.

The problem is the offset... when you have the imagemap inside a div with padding/margin, the U function is off a bit...

So after the

Code:

   Z.style.left = Right;
   Z.style.top  = Bottom;

part I tried to fix the offset with

Code:

   Z.style.marginLeft = 25+'px';
   Z.style.marginTop = 50+'px';   

which was close, but not exactly right for my image.

I'm only intermediate-ish with javascript.

I found 2 people who came with solutions for this problem, but I don't know how to modify the U function to account for offsets.

javascript image map written by Emil Nikolov (GNU General Public License)
http://javascripthowtos.blogspot.com/2008/08/javascript-image-map.html

Javascript image magnifier
http://javascripthowtos.blogspot.com/2008/08/javascript-image-magnifier.html

Imagemap rollover written by Gabriel Svennerberg
http://www.svennerberg.com/2008/09/imagemap-rollover/

If any javascript gurus are out...please help if you can!

Andrea · **Posted:** Sun Jan 25, 2009 9:27 am

What about using visibility property?

Code:

function U(F, Coords)
{
   var Z = document.getElementById("MyZoom");
   Z.src =  F ;
   Z.style.display = '';
   Z.style.visibility = "visible";
 ....
}
 
function V(I)
{
   var X = document.getElementById("MyZoom");
   X.src =  I ;
   X.style.display = '';
   X.style.visibility = "hidden";
}

And in the map something like this:

Code:

<area onmouseover="U(this.href, this.coords);" onmouseout="V('this,href');" shape="rect" coords="28,0,57,20"  href="images/xxx.jpg" caption="xxxx"> 

Help with javascript tweak?

Who is online