Skinnybobb
07-27-2006, 10:38 AM
Hiya,
I have a map which when regions are hovered over it swaps the image-ok.
When you click a region it opens a pop up-still ok.
However when you click another region (without closing the previously opened pop up) the parent window has the focus and the previously opened pop up has lost the focus.
How do I amend the script below to set the pop up window to focus when any region is clicked. (Because this already uses window.open I dont know how to add the window.focus function.)
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if(document.images)
{
imagemap_default = new Image();
imagemap_default.src = 'images/maps/map_area.jpg';
imagemap_1 = new Image();
imagemap_1.src = 'images/maps/map_area1.jpg';
imagemap_2 = new Image();
imagemap_2.src = 'images/maps/map_area2.jpg';
imagemap_3 = new Image();
imagemap_3.src = 'images/maps/map_area3.jpg';
imagemap_4 = new Image();
imagemap_4.src = 'images/maps/map_area4.jpg';
imagemap_5 = new Image();
imagemap_5.src = 'images/maps/map_area5.jpg';
imagemap_6 = new Image();
imagemap_6.src = 'images/maps/map_area6.jpg';
imagemap_7 = new Image();
imagemap_7.src = 'images/maps/map_area7.jpg';
imagemap_8 = new Image();
imagemap_8.src = 'images/maps/map_area8.jpg';
imagemap_9 = new Image();
imagemap_9.src = 'images/maps/map_area9.jpg';
imagemap_10 = new Image();
imagemap_10.src = 'images/maps/map_area10.jpg';
imagemap_11 = new Image();
imagemap_11.src = 'images/maps/map_area11.jpg';
imagemap_12 = new Image();
imagemap_12.src = 'images/maps/map_area12.jpg';
}
function rollOver(iName,iState)
{
if(document.images)
{
document.images[iName].src = eval(iName + '_' + iState + '.src');
}
}
// -->
</SCRIPT>
<map name="FPMap0">
<area href="#" onclick="window.open ('stats/12.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="141, 483, 148, 477, 157, 478, 172, 460, 192, 447, 190, 436, 206, 423, 248, 426, 253, 413, 265, 402, 279, 404, 291, 400, 302, 400, 303, 405, 322, 407, 328, 413, 338, 418, 335, 430, 330, 448, 322, 449, 325, 456, 317, 461, 305, 454, 293, 454, 290, 461, 275, 461, 273, 464, 256, 453, 234, 460, 228, 470, 222, 481, 204, 474, 190, 472, 184, 472, 170, 481, 166, 485, 161, 492, 153, 485, 145, 488" onMouseover="rollOver('imagemap','12')" onMouseout="rollOver('imagemap','default')" ALT="12">
<area href="#" onclick="window.open ('stats/11.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="330, 410, 333, 406, 342, 406, 350, 411, 362, 418, 370, 420, 375, 409, 379, 404, 377, 399, 371, 401, 365, 396, 374, 392, 368, 378, 381, 375, 384, 365, 380, 353, 372, 341, 386, 327, 412, 327, 432, 339, 433, 356, 429, 375, 415, 384, 413, 393, 403, 396, 400, 406, 388, 414, 405, 413, 425, 414, 423, 427, 406, 441, 375, 452, 365, 444, 338, 452, 336, 446, 334, 438, 339, 424, 339, 413" onMouseover="rollOver('imagemap','11')" onMouseout="rollOver('imagemap','default')" ALT="11">
<area href="#" onclick="window.open ('stats/10.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="348, 408, 348, 403, 364, 396, 369, 400, 377, 401, 373, 412, 368, 417, 361, 417" onMouseover="rollOver('imagemap','10')" onMouseout="rollOver('imagemap','default')" ALT="10">
<area href="#" onclick="window.open ('stats/9.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="302, 399, 306, 404, 324, 407, 330, 412, 335, 404, 347, 406, 352, 401, 368, 394, 373, 387, 367, 376, 378, 375, 383, 369, 377, 366, 380, 360, 378, 353, 371, 341, 357, 350, 349, 348, 351, 354, 343, 365, 333, 374, 333, 379, 327, 377, 319, 382, 315, 374, 322, 358, 306, 348, 302, 346, 293, 347, 288, 357, 276, 358, 266, 364, 270, 366, 276, 381, 294, 380, 295, 375, 304, 385" onMouseover="rollOver('imagemap','9')" onMouseout="rollOver('imagemap','default')" ALT="9">
<area href="#" onclick="window.open ('stats/8.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="305, 346, 294, 346, 289, 357, 281, 355, 278, 340, 274, 340, 272, 346, 268, 336, 275, 335, 276, 328, 259, 324, 253, 315, 245, 301, 260, 297, 269, 289, 270, 280, 277, 288, 288, 290, 302, 283, 304, 291, 300, 299, 293, 295, 289, 302, 290, 313, 298, 324, 295, 330, 303, 334, 299, 338" onMouseover="rollOver('imagemap','8')" onMouseout="rollOver('imagemap','default')" ALT="8">
<area href="#" onclick="window.open ('stats/7.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="375, 336, 359, 348, 350, 349, 348, 357, 329, 378, 323, 380, 317, 381, 317, 374, 323, 356, 303, 345, 299, 338, 303, 336, 297, 331, 296, 318, 290, 312, 291, 298, 298, 301, 305, 294, 317, 292, 317, 299, 328, 304, 332, 290, 340, 283, 352, 283, 369, 290, 378, 317, 367, 330" onMouseover="rollOver('imagemap','7')" onMouseout="rollOver('imagemap','default')" ALT="7">
<area href="#" onclick="window.open ('stats/6.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="161, 387, 163, 392, 175, 402, 197, 397, 203, 407, 219, 404, 229, 416, 244, 415, 263, 405, 270, 400, 301, 400, 297, 378, 279, 380, 267, 365, 279, 355, 277, 342, 273, 349, 265, 339, 274, 336, 272, 329, 261, 327, 259, 332, 254, 328, 231, 333, 230, 339, 213, 350, 209, 364, 187, 373" onMouseover="rollOver('imagemap','6')" onMouseout="rollOver('imagemap','default')" ALT="6">
<area href="#" onclick="window.open ('stats/5.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="250, 298, 252, 276, 264, 262, 253, 260, 246, 267, 231, 244, 240, 219, 250, 219, 250, 215, 261, 205, 270, 212, 268, 214, 267, 224, 275, 225, 283, 242, 277, 245, 276, 254, 271, 256, 271, 263, 288, 279, 301, 284, 289, 289, 279, 286, 270, 280, 270, 289" onMouseover="rollOver('imagemap','5')" onMouseout="rollOver('imagemap','default')" ALT="5">
<area href="#" onclick="window.open ('stats/4.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="366, 289, 351, 280, 332, 288, 327, 301, 318, 301, 319, 292, 306, 293, 302, 282, 289, 279, 272, 262, 276, 256, 279, 247, 284, 244, 279, 231, 275, 223, 271, 224, 271, 214, 265, 205, 267, 199, 275, 195, 283, 187, 278, 181, 287, 169, 301, 183, 318, 234, 347, 248, 358, 266" onMouseover="rollOver('imagemap','4')" onMouseout="rollOver('imagemap','default')" ALT="4">
<area href="#" onclick="window.open ('stats/3.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="210, 351, 231, 337, 233, 329, 255, 327, 255, 320, 247, 307, 224, 308, 214, 311, 206, 303, 197, 301, 192, 306, 154, 275, 162, 264, 170, 263, 177, 247, 166, 231, 148, 207, 125, 208, 117, 209, 101, 221, 98, 232, 89, 234, 78, 252, 108, 272, 116, 254, 131, 272, 149, 274, 194, 310, 202, 320, 186, 336, 194, 338, 210, 330" onMouseover="rollOver('imagemap','3')" onMouseout="rollOver('imagemap','default')" ALT="3">
<area href="#" onclick="window.open ('stats/2.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="239, 162, 249, 162, 261, 157, 288, 168, 278, 181, 283, 188, 261, 205, 250, 212, 234, 215, 231, 220, 217, 228, 204, 230, 184, 220, 181, 234, 175, 217, 171, 175, 182, 178, 191, 161, 200, 162, 202, 155, 208, 158, 217, 159, 217, 169, 224, 174, 232, 168, 243, 171" onMouseover="rollOver('imagemap','2')" onMouseout="rollOver('imagemap','default')" ALT="2">
<area href="#" onclick="window.open ('stats/1.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="238, 160, 241, 169, 232, 169, 227, 173, 220, 169, 214, 157, 203, 151, 195, 156, 191, 156, 182, 171, 173, 168, 162, 194, 156, 194, 134, 172, 99, 108, 107, 59, 124, 31, 150, 14, 195, 12, 253, 11, 297, 73, 268, 144, 257, 149" onMouseover="rollOver('imagemap','1')" onMouseout="rollOver('imagemap','default')" ALT="1"></map>
<img border="0" src="images/maps/map_area.jpg" name="imagemap" usemap="#FPMap0" width="439" height="500" />
This is on an Intranet so cannot show the live page.
Cheers in advance
Mark
I have a map which when regions are hovered over it swaps the image-ok.
When you click a region it opens a pop up-still ok.
However when you click another region (without closing the previously opened pop up) the parent window has the focus and the previously opened pop up has lost the focus.
How do I amend the script below to set the pop up window to focus when any region is clicked. (Because this already uses window.open I dont know how to add the window.focus function.)
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if(document.images)
{
imagemap_default = new Image();
imagemap_default.src = 'images/maps/map_area.jpg';
imagemap_1 = new Image();
imagemap_1.src = 'images/maps/map_area1.jpg';
imagemap_2 = new Image();
imagemap_2.src = 'images/maps/map_area2.jpg';
imagemap_3 = new Image();
imagemap_3.src = 'images/maps/map_area3.jpg';
imagemap_4 = new Image();
imagemap_4.src = 'images/maps/map_area4.jpg';
imagemap_5 = new Image();
imagemap_5.src = 'images/maps/map_area5.jpg';
imagemap_6 = new Image();
imagemap_6.src = 'images/maps/map_area6.jpg';
imagemap_7 = new Image();
imagemap_7.src = 'images/maps/map_area7.jpg';
imagemap_8 = new Image();
imagemap_8.src = 'images/maps/map_area8.jpg';
imagemap_9 = new Image();
imagemap_9.src = 'images/maps/map_area9.jpg';
imagemap_10 = new Image();
imagemap_10.src = 'images/maps/map_area10.jpg';
imagemap_11 = new Image();
imagemap_11.src = 'images/maps/map_area11.jpg';
imagemap_12 = new Image();
imagemap_12.src = 'images/maps/map_area12.jpg';
}
function rollOver(iName,iState)
{
if(document.images)
{
document.images[iName].src = eval(iName + '_' + iState + '.src');
}
}
// -->
</SCRIPT>
<map name="FPMap0">
<area href="#" onclick="window.open ('stats/12.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="141, 483, 148, 477, 157, 478, 172, 460, 192, 447, 190, 436, 206, 423, 248, 426, 253, 413, 265, 402, 279, 404, 291, 400, 302, 400, 303, 405, 322, 407, 328, 413, 338, 418, 335, 430, 330, 448, 322, 449, 325, 456, 317, 461, 305, 454, 293, 454, 290, 461, 275, 461, 273, 464, 256, 453, 234, 460, 228, 470, 222, 481, 204, 474, 190, 472, 184, 472, 170, 481, 166, 485, 161, 492, 153, 485, 145, 488" onMouseover="rollOver('imagemap','12')" onMouseout="rollOver('imagemap','default')" ALT="12">
<area href="#" onclick="window.open ('stats/11.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="330, 410, 333, 406, 342, 406, 350, 411, 362, 418, 370, 420, 375, 409, 379, 404, 377, 399, 371, 401, 365, 396, 374, 392, 368, 378, 381, 375, 384, 365, 380, 353, 372, 341, 386, 327, 412, 327, 432, 339, 433, 356, 429, 375, 415, 384, 413, 393, 403, 396, 400, 406, 388, 414, 405, 413, 425, 414, 423, 427, 406, 441, 375, 452, 365, 444, 338, 452, 336, 446, 334, 438, 339, 424, 339, 413" onMouseover="rollOver('imagemap','11')" onMouseout="rollOver('imagemap','default')" ALT="11">
<area href="#" onclick="window.open ('stats/10.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="348, 408, 348, 403, 364, 396, 369, 400, 377, 401, 373, 412, 368, 417, 361, 417" onMouseover="rollOver('imagemap','10')" onMouseout="rollOver('imagemap','default')" ALT="10">
<area href="#" onclick="window.open ('stats/9.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="302, 399, 306, 404, 324, 407, 330, 412, 335, 404, 347, 406, 352, 401, 368, 394, 373, 387, 367, 376, 378, 375, 383, 369, 377, 366, 380, 360, 378, 353, 371, 341, 357, 350, 349, 348, 351, 354, 343, 365, 333, 374, 333, 379, 327, 377, 319, 382, 315, 374, 322, 358, 306, 348, 302, 346, 293, 347, 288, 357, 276, 358, 266, 364, 270, 366, 276, 381, 294, 380, 295, 375, 304, 385" onMouseover="rollOver('imagemap','9')" onMouseout="rollOver('imagemap','default')" ALT="9">
<area href="#" onclick="window.open ('stats/8.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="305, 346, 294, 346, 289, 357, 281, 355, 278, 340, 274, 340, 272, 346, 268, 336, 275, 335, 276, 328, 259, 324, 253, 315, 245, 301, 260, 297, 269, 289, 270, 280, 277, 288, 288, 290, 302, 283, 304, 291, 300, 299, 293, 295, 289, 302, 290, 313, 298, 324, 295, 330, 303, 334, 299, 338" onMouseover="rollOver('imagemap','8')" onMouseout="rollOver('imagemap','default')" ALT="8">
<area href="#" onclick="window.open ('stats/7.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="375, 336, 359, 348, 350, 349, 348, 357, 329, 378, 323, 380, 317, 381, 317, 374, 323, 356, 303, 345, 299, 338, 303, 336, 297, 331, 296, 318, 290, 312, 291, 298, 298, 301, 305, 294, 317, 292, 317, 299, 328, 304, 332, 290, 340, 283, 352, 283, 369, 290, 378, 317, 367, 330" onMouseover="rollOver('imagemap','7')" onMouseout="rollOver('imagemap','default')" ALT="7">
<area href="#" onclick="window.open ('stats/6.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="161, 387, 163, 392, 175, 402, 197, 397, 203, 407, 219, 404, 229, 416, 244, 415, 263, 405, 270, 400, 301, 400, 297, 378, 279, 380, 267, 365, 279, 355, 277, 342, 273, 349, 265, 339, 274, 336, 272, 329, 261, 327, 259, 332, 254, 328, 231, 333, 230, 339, 213, 350, 209, 364, 187, 373" onMouseover="rollOver('imagemap','6')" onMouseout="rollOver('imagemap','default')" ALT="6">
<area href="#" onclick="window.open ('stats/5.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="250, 298, 252, 276, 264, 262, 253, 260, 246, 267, 231, 244, 240, 219, 250, 219, 250, 215, 261, 205, 270, 212, 268, 214, 267, 224, 275, 225, 283, 242, 277, 245, 276, 254, 271, 256, 271, 263, 288, 279, 301, 284, 289, 289, 279, 286, 270, 280, 270, 289" onMouseover="rollOver('imagemap','5')" onMouseout="rollOver('imagemap','default')" ALT="5">
<area href="#" onclick="window.open ('stats/4.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="366, 289, 351, 280, 332, 288, 327, 301, 318, 301, 319, 292, 306, 293, 302, 282, 289, 279, 272, 262, 276, 256, 279, 247, 284, 244, 279, 231, 275, 223, 271, 224, 271, 214, 265, 205, 267, 199, 275, 195, 283, 187, 278, 181, 287, 169, 301, 183, 318, 234, 347, 248, 358, 266" onMouseover="rollOver('imagemap','4')" onMouseout="rollOver('imagemap','default')" ALT="4">
<area href="#" onclick="window.open ('stats/3.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="210, 351, 231, 337, 233, 329, 255, 327, 255, 320, 247, 307, 224, 308, 214, 311, 206, 303, 197, 301, 192, 306, 154, 275, 162, 264, 170, 263, 177, 247, 166, 231, 148, 207, 125, 208, 117, 209, 101, 221, 98, 232, 89, 234, 78, 252, 108, 272, 116, 254, 131, 272, 149, 274, 194, 310, 202, 320, 186, 336, 194, 338, 210, 330" onMouseover="rollOver('imagemap','3')" onMouseout="rollOver('imagemap','default')" ALT="3">
<area href="#" onclick="window.open ('stats/2.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="239, 162, 249, 162, 261, 157, 288, 168, 278, 181, 283, 188, 261, 205, 250, 212, 234, 215, 231, 220, 217, 228, 204, 230, 184, 220, 181, 234, 175, 217, 171, 175, 182, 178, 191, 161, 200, 162, 202, 155, 208, 158, 217, 159, 217, 169, 224, 174, 232, 168, 243, 171" onMouseover="rollOver('imagemap','2')" onMouseout="rollOver('imagemap','default')" ALT="2">
<area href="#" onclick="window.open ('stats/1.html','newWin','width=450,height=480,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;" shape="polygon" coords="238, 160, 241, 169, 232, 169, 227, 173, 220, 169, 214, 157, 203, 151, 195, 156, 191, 156, 182, 171, 173, 168, 162, 194, 156, 194, 134, 172, 99, 108, 107, 59, 124, 31, 150, 14, 195, 12, 253, 11, 297, 73, 268, 144, 257, 149" onMouseover="rollOver('imagemap','1')" onMouseout="rollOver('imagemap','default')" ALT="1"></map>
<img border="0" src="images/maps/map_area.jpg" name="imagemap" usemap="#FPMap0" width="439" height="500" />
This is on an Intranet so cannot show the live page.
Cheers in advance
Mark