Really need another pair of eyes to look at some JavaScript code - javascript
I think it is just something simple, but I have done trying for two days.
All I want to do is just to hide one image and turn on the other image. But nothing seem to work. I have tried clearing the browser cache ever time I test the page. Every time I mouse over on the image map to trigger function Change1(), all it does is hiding image "body_interactive_image_default.png". But it does nothing to image "body_interactive_image_love_lit.png"???? Why????
The browsers I am using:
Windows Chrome 75.0.3770.100
Windows IE 11
Android Chrome 75.0.3770.100
Here is my JavaScript code:
function change1() {
document.getElementById('maptreebg').style = "visibility:hidden; z-index: 0";
document.getElementById('image1ch').style.display = "block";
document.getElementById('image1ch').style = "visibility:visible; z-index: 100";
document.getElementById('image1ch').width = 290;
document.getElementById('image1ch').style.width = 290;
return true;
};
Here is my HTML code:
<div id="div4" class="div4">
<img name="maptreebg" id="maptreebg" class="img4" alt="" src="/handheld/images/mainbody/body_interactive_image_default.png" usemap="#maptree" />
<map name="maptree" id="maptree" class="maptree">
<area id="ar1" shape="poly" coords="3,390,13,381,66,371,113,351,172,313,193,290,217,273,242,259,297,238,344,222,394,213,461,206,521,202,588,205,638,208,694,221,751,249,800,289,835,340,852,397,849,435,815,494,781,526,767,543,728,566,670,586,614,593,521,597,467,590,386,585,309,565,276,554,253,542,228,537,174,503,113,464,76,438,36,416,6,398,4,394" alt="Love" onmouseover="change1()" href="/handheld.aspx" />
<area id="ar2" shape="poly" coords="1990,389,1967,376,1929,373,1879,351,1846,334,1814,308,1786,279,1705,243,1636,220,1549,210,1475,203,1399,204,1331,212,1267,232,1213,268,1179,303,1155,336,1138,390,1138,419,1153,462,1191,510,1226,545,1305,581,1368,593,1448,597,1540,587,1610,586,1674,566,1737,545,1775,530,1841,487,1913,440,1949,416,1968,414,1991,392" alt="Family" onmouseover="change2()" href="/handheld.aspx" />
<area id="ar3" shape="poly" coords="0,849,32,835,73,827,123,806,156,779,188,749,227,723,292,699,358,676,426,667,517,662,609,664,654,671,727,692,770,721,807,755,834,796,850,842,852,880,845,906,814,952,776,993,736,1017,689,1038,635,1051,573,1054,494,1053,435,1045,384,1043,328,1030,272,1013,256,1003,218,993,186,968,149,944,118,924,92,906,66,890,47,878,22,867" alt="Friend" onmouseover="change3()" href="/handheld.aspx" />
<area id="ar4" shape="poly" coords="1987,848,1972,837,1919,826,1868,805,1812,760,1773,728,1668,684,1585,669,1492,661,1385,662,1301,675,1225,712,1178,760,1158,794,1137,853,1143,896,1180,959,1224,1000,1294,1039,1365,1050,1470,1055,1552,1045,1615,1040,1677,1023,1757,996,1815,963,1876,925,1924,890,1969,866,1991,848,1985,850" alt="Colleaque" onmouseover="change4()" href="/handheld.aspx" />
<area id="ar5" shape="poly" coords="0,1305,16,1295,55,1290,109,1266,139,1253,172,1226,208,1193,253,1171,315,1145,388,1128,480,1117,582,1119,644,1124,701,1141,758,1168,808,1211,835,1257,853,1310,847,1359,796,1428,750,1468,713,1487,645,1509,556,1509,493,1509,432,1505,368,1497,317,1482,265,1467,231,1453,187,1429,73,1352,43,1335,21,1326,6,1312" alt="Business" onmouseover="change5()" href="/handheld.aspx" />
<area id="ar6" shape="poly" coords="1987,1302,1960,1293,1914,1281,1865,1262,1815,1222,1777,1191,1692,1154,1614,1130,1520,1121,1409,1117,1331,1126,1280,1145,1216,1178,1177,1225,1159,1251,1140,1302,1138,1323,1145,1358,1174,1409,1222,1456,1263,1481,1330,1503,1373,1510,1463,1512,1539,1503,1606,1500,1667,1485,1707,1476,1732,1460,1771,1449,1827,1412,1909,1355,1980,1319" alt="Educator/Learner" onmouseover="change6()" href="/handheld.aspx" />
<area id="ar7" shape="poly" coords="47,3567,995,3069,1952,3569,1839,3569,1839,3568,1772,3569" alt="Registration" onmouseover="change7()" href="/handheld.aspx" />
</map>
<img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_love_lit.png" />
<img name="image2ch" id="image2ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_family_lit.png" />
<img name="image3ch" id="image3ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_friend_lit.png" />
<img name="image4ch" id="image4ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_clq_lit.png" />
<img name="image5ch" id="image5ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_bus_lit.png" />
<img name="image6ch" id="image6ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_ed_ln_lit.png" />
<img name="image7ch" id="image7ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_reg.png" />
</div>
Here is the top of my HTML code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="/handheld/default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WeConnec</title>
<link rel="stylesheet" href="/handheld/style/index.css" type="text/css" />
<script type="text/javascript" src="/handheld/handheld.js"></script>
</head>
I've replaced the map with images, and reduced the function to its essentials. Notice also that I've removed the height and width attributes from img#image1ch:
function change1() {
var el = document.getElementById('image1ch');
el.style.visibility = "visible";
el.style.zIndex = "100";
el.style.width = "290px";
el.style.height = "auto";
return true;
};
<div id="div4" class="div4">
<img name="maptreebg" id="maptreebg" class="img4" alt="" src="http://placekitten.com/120/120" usemap="#maptree" />
<img src="http://placekitten.com/100/100" onmouseover="change1()" href="/handheld.aspx" />
<img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0;" alt="" src="http://placekitten.com/140/140" width="0" height="0" />
</div>
Related
Tooltip on hover using JS
So I have this map in html and I want to show "Lina Garcia's picture with some text over the circle (id="circulo-show") when I hover the mouse.
How do I select where I want my photo to appear using jquery?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gobierno Corporativo</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./js/default.js"></script>
<style>
#lina-garcia {
display: none;
}
</style>
<script>
$(document).ready(function() {
$("#miembro-ext-1").mouseover(function() {
$("#lina-garcia").css("display", "block");
});
$("#miembro-ext-1").mouseout(function() {
$("#lina-garcia").css("display", "none");
});
});
</script>
</head>
<body>
<div class="container">
<img id="comite-inversiones" src="https://www.afiuniversal.com.do/Style%20Library/Images/gobierno-corporativo-chart.png" usemap="#mapa-comite">
<map name="mapa-comite" class="mapa">
<area target="" alt="" title="" href="" id="miembro-ext-1" class="seccion" coords="150,113,315,14" shape="rect">
<area target="" alt="" title="" href="" id="miembro-ext-2" class="seccion" coords="342,13,499,118" shape="rect">
<area target="" alt="" title="" href="" id="especialistas-1" class="seccion" coords="112,141,199,295" shape="rect">
<area target="" alt="" title="" href="" id="especialistas-2" class="seccion" coords="453,139,542,300" shape="rect">
<area target="" alt="" title="" href="" id="adm-fondo" class="seccion" coords="146,327,315,428" shape="rect">
<area target="" alt="" title="" href="" id="especialistas-3" class="seccion" coords="342,329,494,428" shape="rect">
<area target="" alt="" title="" href="" id="circulo-show" coords="326,222,114" shape="circle">
</map>
</div>
<div id="lina-garcia">
<a>Lina Garcia<img src="https://www.afiuniversal.com.do/sobre-afi-universal/Imagenes/consejo-administrativo/img-gobierno-lina-garcia.jpg"/></a>
</div>
</body>
</html>
I'm not sure if this is what you want, but anyway I think what you are looking for is jquery's .hover function which you can implement like this:
$("#circulo-show").hover(function() {
$("#lina-garcia").css("display", "block");
}, function() {
$("#lina-garcia").css("display", "none");
});
REF: https://www.w3schools.com/jquery/event_hover.asp
If you want to know how to position your image as a tooltip which you want to make visible using jquery when somebody hovers, then that is solely determined by your css which you can modify to suit your needs.
If that is the case, then you can use this code, change the span element to the image that you want, and make further customizations however you want.
Trying to integrate a popup using highslide into an image mapped with imagemapster
So I am using imagemapster on a page I've created to change regions of an image map on mouse hover. I would like for a pop up to occur on click and intended to use highslide to execute this, however, I'm struggling with how to implement this. My current code looks something like this:
<head>
<script language="javascript" src="include/imagemapster/jquery.imagemapster.js"></script>
<!-- Highslide -->
<script type="text/javascript" src="include/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="include/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="include/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide -->
</head>
<body>
<img src="img/closed.jpg" id="leoweb" usemap="#leoweb" border="0">
<script>
$(document).ready(function ()
{
$('#leoweb').mapster({
singleSelect : true,
render_highlight : { altImage : 'img/open.jpg' },
mapKey: 'hex',
fill : true, altImage : 'img/open.jpg',
fillOpacity : 1,
});
});
</script>
<map name="leoweb" id="leoweb">
<area hex="1" class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />" shape="poly" coords=" 463,73, 363,74, 305,160, 363,258, 462,255, 513,168, 465,76" />
<area hex="2" href="#" shape="poly" coords=" 579,196, 521,292, 578,384, 675,388, 733,294, 683,200, 585,198" />
<area hex="3" href="#" shape="poly" coords=" 243,202, 138,202, 86,293, 133,379, 245,382, 295,293, 251,206, 245,206" />
<area hex="4" href="#" shape="poly" coords=" 353,330, 304,419, 361,513, 461,508, 513,413, 461,324, 354,328" />
<area hex="5" href="#" shape="poly" coords=" 229,450, 142,451, 83,542, 133,638, 239,636, 296,538, 245,452, 239,450, 235,450, 233,450" />
<area hex="6" href="#" shape="poly" coords=" 453,575, 355,574, 303,664, 351,764, 460,765, 515,672, 459,577, 457,576" />
<area hex="7" href="#" shape="poly" coords=" 573,453, 521,550, 574,638, 681,638, 737,550, 685,450, 577,452" />
</map>
</div>
Now that bit about trying to add the highline code
class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />"
Into the image map was a long shot, but I tried it as it was the most logical href insertion point I could think of. It obviously did not work. Are any of you familiar enough with highline and imagemapster to help with this, or at least have some clue about a possible solution? Thanks.
Display image in a popup (same window) onClick of a particular area on the base image
I have used Image Mapping to specify which image to display if a user clicks on a particular area on the image. Here is my code: <html> <body> <div align="center"> <img id="IMGMAPS" src="base.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" /> <map name="image-maps" id="IMGMAPS"> <area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" /> <area alt="" title="" href="abc\1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" /> <area alt="" title="" href="abc\2.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self" /> <area alt="" title="" href="abc\3.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self" /> <area alt="" title="" href="abc\4.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self" /> <area alt="" title="" href="abc\5.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self" /> </map> </div> </body> </html> This code results in the following image: What I want is images 1, 2, 3, 4, 5 should open in a popup in the same window if a user clicks on the co-ordinates specified. How do I achieve this? Edit 1: image The base image is a single image. 1, 2, 3, 4, 5 are the areas with specific co-ordinates on the image. Each area has a corresponding image which opens in a popup only when a user clicks on a particular area with specific co-ordinates. Edit 2: As suggested by #Edrees, I have made the following changes: Added Foundation JS <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js" ></script> <script> $(document).foundation(); </script> Used data-reveal-id <img id="IMGMAPS" src="selfie.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" data-reveal-id="firstModal" data-reveal /> <map name="image-maps" id="IMGMAPS"> <area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="selfie.jpg" /> <!--<div id="firstModal" class="reveal-modal" data-reveal> --> <area alt="" title="" href="Shortlisted_selfie\VenkateshSittula.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" id="firstModal" class="reveal-modal" data-reveal /> <a class="close-reveal-modal">×</a> <!-- </div> --> This didn't made any difference to my results. Edit 3: I am still struggling to get a working solution to this. Just to clarify again what I am looking for: Base Image is a single image having areas 1, 2, 3, 4, 5. Each area (1, 2, 3, 4, 5) has a corresponding image. I want a functionality where if I click on area 1, it's corresponding image opens in a modal dialog, if I click on area 2, it's corresponding image opens in a modal dialog... so forth and so on for all the areas (only on click). Is there a workaround for this? Edit 4: As per Edrees's solution, I was able to implement the functionality what I looking for. Further, I need to fine-tune this solution by including a close button or link at top-right of the reveal-modal. I saw some foundation documents and found out that there is a class called **close-reveal-modal** used for this purpose, but I don't know how to implement this in my solution. Also I have images of sizes ranging from 612*640 to 900*1600 to 1280*960 to 1920*1080... how do I ensure that the image opened inside the modal resize proportionally (i.e. image maintains the ratio) as per the window size ? Improve the solution using the following codepen link Edit 5: The solution by #Edrees worked perfectly as long as I was viewing this page separately. However, when I embedded this page in MOJO Portal, Foundation CSS and JS completely screwed up the default behavior of MOJO Portal. It seems that default CSS was overridden by Foundation. Does anyone has a workaround for it? A plain jQuery to solve this without using Framework/plugin? Edit 6: After facing issues with foundation framework, I realised that Rodrigo Leite has an answer to solve this issue. Although, I don't find any modal dialog being opened, it does give a feel of dialog box to the user and suffice for my requirements. What changes I need: I want the "div" to cover the entire window Image should be displayed at the center (vertically and horizontally) of the window/screen A close button at the top-right of the window/screen when the mapped image is displayed A user should be able to click only the close button when image is opened. All other part of the window/screen should disable the click functionality / no action on clicking on any part of the screen except close button NOTE: The close button can be displayed in any form i.e. image, button, etc.
You can create your own modal div and put it invisible, then, when the user click on area you can use javascript to show this modal and put your content inside it. Take a look:
css
#modal-background{
width: 100%;
height: 100%;
background-color: #000000;
position: fixed;
top: 0; left: 0;
display: none;
z-index: 99;
}
#modal-content{
background-color: #FFFFFF;
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
z-index: 100;
}
html
<div id='modal-background'>
<div id='modal-content'>
</div>
</div>
<img id="IMGMAPS" src="http://i.stack.imgur.com/zir2T.png" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self" />
</map>
javascript (jquery):
$(document).ready(function(){
$('area').click(function(){
$('#modal-content').html('<img src=' + $(this).data('imageurl') +'>');
$('#modal-background').fadeIn();
});
$('#modal-background').click(function(){
closeModal();
});
});
function closeModal(){
$('#modal-background').fadeOut();
}
Hope it helps.
HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script> </head> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="" data-reveal-id="one"> <area shape="circle" coords="90,58,3" alt="Mercury" href="" data-reveal-id="two"> <area shape="circle" coords="124,58,8" alt="Venus" href="" data-reveal-id="three"> </map> <img src="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" width="145" height="126" alt="Planets" id="one" data-reveal class="reveal-modal"> <img src="http://news.bbcimg.co.uk/media/images/65904000/jpg/_65904720_mdis_global_enhancedcolor_caloris_orth_hd.jpg" width="145" height="126" alt="Planets" id="two" data-reveal class="reveal-modal"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Kepler10b_artist.jpg" width="145" height="126" alt="Planets" id="three" data-reveal class="reveal-modal"> <script type="text/javascript"> $(document).foundation(); </script> </body> </html> Javascript: Files needed: JQuery + foundation.js JS code: $(document).foundation(); For a complete working code visit this link
javascript, jquery will not show images at 15" screen
At a website I am displaying images in 5x 5 grid, using . On the last picture, custom parts, I wish to display a rotating images. This panelGallery js script works fine on all screen sizes apart from 15" screen, when testing, where the whole of the 15" screen is gets occupied by magnified version of the small rotating images, covering all the images behind.
Any help to solve this pestering problem would be much welcome.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
</head>
<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">
<div id="container">
<img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>
Custom Parts
A live example would help provide a better example.
however, here's my fix - not knowing all the moving parts(css, the js library you are using, etc..). So I suggest making a CSS class and creating a fixed max width to prevent it from displaying huge at 15 inches wide.
Try a media over-ride on the container
<div class="container">...</div>
a CSS solution
#media screen and (max-width: 1800px) {
.container { width:1800; }
}
or you just just set a max-width on that div
.container { max-width:1800px; }
Now instead of 1800px use whatever screen width the images displayed correctly at.
Add a cross fade effect on an image gallery
I have a smaller image which is of a control with 8 buttons, I have set up 8 area shapes so when what looks like a button is clicked the larger main image is updated.
When an area shape is clicked the relevant image loads, but I want the image to fade in and the old image to fade out.
Is this possible? Happy to explore Javascript and Jquery solutions. Thanks.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">
function showImage(image){
var mainImage = document.getElementById('mainImage');
mainImage.src = image;
}
</script>
</head>
<body>
<div><img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')" />
<area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')" />
<area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')" />
<area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')" />
<area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')" />
<area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')" />
<area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')" />
<area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')" />
</map>
</div>
<div>
<img id="mainImage" src="A.jpg" />
</div>
</body>
</html>
I'd suggest having all the images on the page, positioned on top of each other. The below will add all the images linked to by the area to a container then crossfade when you click...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#Map area').each(function(){
var area = $(this);
var img = $('<img>').attr('src', area.attr('href'));
$('#imgcontainer').append(img);
area.click(function(){
$('#imgcontainer img').stop().fadeOut();
img.stop().fadeIn();
return false;
})
});
$('#imgcontainer img:first-child').show();
});
</script>
<style>
#imgcontainer{width:260px;height:193px;}
#imgcontainer img{display:none;position:absolute;}
</style>
<img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="A.img" />
<area shape="rect" coords="147,21,205,54" href="B.img" />
<area shape="rect" coords="60,58,121,90" href="C.img" />
<area shape="rect" coords="147,59,205,92" href="D.img" />
<area shape="rect" coords="61,92,121,125" href="E.img" />
<area shape="rect" coords="146,96,205,128" href="F.img" />
<area shape="rect" coords="60,128,122,163" href="G.img" />
<area shape="rect" coords="146,131,204,164" href="I.img" />
</map>
<div id="imgcontainer"></div>
To do this you will need to create a new image and fade the old one out and the new one in.
This should work:
function showImage(image){
var mainImage = document.getElementById('mainImage');
$('#mainImage').before('<img src="' + image + '" id="newImage" />');
$('#mainImage').fadeOut().remove();
$('#newImage').attr('id','mainImage');
}
You should make sure with CSS that the new image is positioned behind the main one.
Source(s)
jQuery API - .append()
jQuery API - fading