• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 300
  • Last Modified:

swapImage & ImageMap used together?

I hope this is the correct Topic area. I've got a JavaScript that swaps images when the user rolls over a set of corresponding (image) numbers. It all works well, but I would like to add in an imagemap for some of the images but have no idea oif or how this could be done. Any ideas?

Thanks!

Max

http://www.tallpinedesign.com/clients/creativeposse/v2/media_cu.html

++++++++

<script type="text/javascript">
<!--

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<!-- start nested number table -->
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="368">
<TR VALIGN="top">
<TD><A HREF="#" onmouseover="MM_swapImage('detailimage','','images/work/media_cu01.jpg',1)"><IMG SRC="images/numbers/1_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="#" onmouseover="MM_swapImage('detailimage','','images/work/media_cu02.jpg',1)"><IMG SRC="images/numbers/2_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
</TR><TR VALIGN="top">
<TD COLSPAN="14"><IMG SRC="images/pixel.gif" WIDTH="368" HEIGHT="17" BORDER="0" ALT="spacer"></TD>
</TR>
</TABLE>
<!-- end nested number table -->
</TD>
</TR><TR VALIGN="top">
<TD><IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo" ID="detailimage" NAME="detailimage"></TD>
</TR>

</TABLE>
<!-- end nested image table -->
0
tallmax
Asked:
tallmax
  • 14
  • 9
1 Solution
 
mvan01Commented:
Hi tallmax,

I suppose you'd like, for example, to play a sound file for:
Play MSIT 1 >
or a different one for
Play MSIT 2 >
when the user clicks on the corresponding spot in the mp3 image player swapped in by number 5.  Likewise for:
Play MSPC 1 >
and
Play MSPC 2 >
from the number 6 swap.  So you'd like an imagemap swapped in for each of those mouse-overs, for example?

Peace and joy.  mvan
0
 
tallmaxAuthor Commented:
Hi mvan!

Yes. Sorry if I wasn't clear enough. That's the task. I would have a series of images (most of which would NOT be Imagemaps, while 2-3 would be.

Max
0
 
mvan01Commented:
Hi Max,

According to:
http://www.w3schools.com/htmldom/dom_obj_image.asp

usemap "Sets or returns a URL (often with a bookmark extension - #name) to use as a client-side image map"

So, when swapping the image, you can also swap the imagemap.  In your example above, this onmouseover= causes the image swap:

<A HREF="#" onmouseover="MM_swapImage('detailimage','','images/work/media_cu01.jpg',1)">

of this image:

<IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo" ID="detailimage" NAME="detailimage">

You could add, to the onmouseover= statement, so that it does like this:

<A HREF="#" onmouseover="MM_swapImage('detailimage','','images/work/media_cu01.jpg',1);document.getElementById('detailimage').usemap='images/work/media_cu01.map';">

You get the correct image object by ID, and then apply an imagemap file (which here I called 'images/work/media_cu01.map' -- to make it easy on yourself, name it similar to the .jpg file name).  

Then, for the images which should not have clickable images, I don't know ... I would try setting .usemap=''; .  I don't know if that works.  If setting a null value bombs, I'd create an imagemap which has no clickable areas on it, and set each non-clickable image to that, e.g.:  .usemap='images/work/blank.map'; .

Peace and joy.  mvan
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
tallmaxAuthor Commented:
Hi mvan!

I tried your suggestion, but it doesn't seem to work -- It doesn't bomb (I tried the "blank" maps idea), but it just doesn't create a clickable area on "5" or "6" -- see:

http://www.tallpinedesign.com/clients/creativeposse/v2/media_cu.html

0
 
mvan01Commented:
Hmm, I see what you mean.  I've even tried this, in the image statement:

<IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo" ID="detailimage" NAME="detailimage" USEMAP="images/work/media_cu06.map">

... thinking that it may need to be defined initially as a map, but to no result.

I don't know about those Macromedia routines ... I don't know if they're somehow getting in the way ... 'over'-controlling the IMG tag, etc.  

This probably requires a simpler test example, just one to start with an image which uses a map, and see if we can effect a change in the map which is used, as I proposed above.  Then figure why the MM_ routines interfere, if that's it, or just dump them for a simpler image swap method ... but only if the map changing is first proven.

Oh yes, and the local maps within the html file should work.  I don't recall if you had them there in the first example, but yes, they should work and you shouldn't need to utilize external .map files.

I probably will not have time to work further on this for a while - a few days ...

Peace and joy.  mvan
0
 
mvan01Commented:
Hey Max,

Check this:
http:Q_10251783.html#2311737

Peace and joy.  mvan
0
 
tallmaxAuthor Commented:
--------------------------------------------------------
<script>
text1 = '<map name="themap">';
text1 += '<area ...................>';
text1 += '<area ...................>';
text1 += '<area ...................>';
text1 += '</map>';
text1 += '<img src="img1.gif" usemap=#theMap>'';

text2 = '<map name="themap">';
text2 += '<area ...................>';
text2 += '<area ...................>';
text2 += '<area ...................>';
text2 += '</map>';
text2 += '<img src="img2.gif" usemap=#theMap>'';
function changeMap(whatMap) {
   var text = eval("text"+whatMap);
   if (document.layers) {
      document.myDiv.document.open();
      document.myDiv.document.write(text);      
      document.myDiv.document.close();      
   }
   else if (document.all) document.myDiv.innerHTML=text;
}
</SCRIPT>
<DIV ID="myDiv" STYLE="position:absolute"></DIV>
<A HREF="javascript:;" onClick="changeMap(1); return false">map 1</A>
<A HREF="javascript:;" onClick="changeMap(2); return false">map 2</A>
--------------------------------------------------------

Hi mvan,

Maybe this script will work, but I don't think my JavaScript skills are up to merging something like that with my current script. Can you help? Thanks!

Max
0
 
mvan01Commented:
Hi Max,

I'll take care of this within the next 24 hours or so.  It looks like a few edits -- nothing too involved.

Peace and joy.  mvan
0
 
tallmaxAuthor Commented:
Thanks! --I'm looking forward to it!
0
 
mvan01Commented:
Hi Max,

Give this a try.

You need no MM_ routines.  You can delete them.  :-)  This is all of the Javascript required in your file.  It sets up the filenames, and image maps (where needed) in an array, and then uses one routine to rewrite a DIV section of your page:

<!-- start of script for rollovers -->

<!-- swap both image & imagemap -->
<script language="JavaScript" type="text/javascript">

var swapMap = new Array();

swapMap[1] = '<img src="images/work/media_cu01.jpg" border="0">';

swapMap[2] = '<img src="images/work/media_cu02.jpg" border="0">';

swapMap[3] = '<MAP NAME="media_cu03">'
swapMap[3] += '<AREA SHAPE="rect" ALT="" COORDS="77,45,171,68" HREF="media_cu03a.mp3">';
swapMap[3] += '<AREA SHAPE="rect" ALT="" COORDS="77,70,171,93" HREF="media_cu03b.mp3">';
swapMap[3] += '</MAP>';
swapMap[3] += '<img src="images/work/media_cu03.jpg" usemap=#media_cu03 border="0">';

swapMap[4] = '<img src="images/work/media_cu04.jpg" border="0">';

swapMap[5] = '<MAP NAME="media_cu05">'
swapMap[5] += '<AREA SHAPE="rect" ALT="" COORDS="77,45,171,68" HREF="media_cu05a.mp3">';
swapMap[5] += '<AREA SHAPE="rect" ALT="" COORDS="77,70,171,93" HREF="media_cu05b.mp3">';
swapMap[5] += '</MAP>';
swapMap[5] += '<img src="images/work/media_cu05.jpg" usemap=#media_cu05 border="0">';

swapMap[6] = '<img src="images/work/media_cu06.jpg" border="0">';

function changeMap(whatMap) {
   var text = swapMap[whatMap];
   var divToChange=document.getElementById('myDiv');
   // alert('changeMap: change to photo # '+whatMap);
   if (document.layers) {
      divToChange.document.open();
      divToChange.document.write(text);      
      divToChange.document.close();      
   } else if (document.all) {
      divToChange.innerHTML=text;
   }
}

</script>

<!-- end of script for rollovers -->

Then, down in the body of your page, replace your existing:
<!-- start nested image table -->
...
<!-- end nested image table -->

with this:
<!-- start nested image table -->
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR VALIGN="top">
<TD>

<!-- start nested number table -->
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="368">
<TR VALIGN="top">

<TD><A HREF="javascript:;" onmouseover="changeMap(1); return false"><IMG SRC="images/numbers/1_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="javascript:;" onmouseover="changeMap(2); return false"><IMG SRC="images/numbers/2_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="javascript:;" onmouseover="changeMap(3); return false"><IMG SRC="images/numbers/3_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="javascript:;" onmouseover="changeMap(4); return false"><IMG SRC="images/numbers/4_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="javascript:;" onmouseover="changeMap(5); return false"><IMG SRC="images/numbers/5_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="11" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
<TD><A HREF="javascript:;" onmouseover="changeMap(6); return false"><IMG SRC="images/numbers/6_off.gif" WIDTH="16" HEIGHT="16" BORDER="0" CLASS="sample" onmouseover="this.className='sampleoff';" onmouseout="this.className='sample';" /></A></TD>
<TD><IMG SRC="images/pixel.gif" WIDTH="222" HEIGHT="16" BORDER="0" ALT="spacer"></TD>
</TR><TR VALIGN="top">
<TD COLSPAN="14"><IMG SRC="images/pixel.gif" WIDTH="368" HEIGHT="17" BORDER="0" ALT="spacer"></TD>
</TR>
</TABLE>
<!-- end nested number table -->
</TD>
</TR><TR VALIGN="top">
<TD>
<DIV ID="myDiv" STYLE="position:absolute">
<IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo">
</DIV>
</TD>
</TR>

</TABLE>
<!-- end nested image table -->

Mostly, the onmouseover commands changed, and a DIV was added around the active image.  I ran it from my local machine, and it worked fine -- except that the files didn't play, because apparently I'm not pointing to the right filenames, or you don't have them on your website.

Peace and joy.  mvan
0
 
mvan01Commented:
P.S.  Tested in IE6 only.  Supposed to work in others, though.  Peace and joy.  mvan
0
 
tallmaxAuthor Commented:
Hi mvan,

Thank you so much for your efforts. It works great in Explorer on both Mac and PC platforms.... But... well, my client is on a Mac and I have to find a script that is cross-platform/browser compatible. This breaks on Safari & FireFox (the imageswapping fails completely).

It's not that I'm ungrateful. --I appreciate all you've done.

:-(
0
 
mvan01Commented:
Well, hang on, there may be a way ...
0
 
mvan01Commented:
Hi Max,

First change, in your HTML page, the multi-line <div> </div> to one single line:
<DIV ID="myDiv" STYLE="position:absolute"><IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo"></DIV>

Then try this function instead.  I have not tested it.  I hope all goes well.

Peace and joy.  mvan


function changeMap(whatMap) {
   var text = swapMap[whatMap];
   var divToChange=document.getElementById('myDiv');
   // alert('changeMap: change to photo # '+whatMap);
   if (document.all) {
      divToChange.innerHTML=text;
   } else {
      var d2 = divToChange.firstChild;
      divToChange.replaceChild(text, d2);
   }
}
0
 
mvan01Commented:
Max,

I picked up the idea here:
http:Q_20909911.html

If it does not work, it may be because in that question, they were trying to replace what was within another tag.  It was:
<div id="top"><p>Click button to show time</p></div>

You don't have a child pair (the <p></p>) within your <div></div>, so upon further consideration, it may not work.  If not, try surrounding your image with <i></i>.  Italics should have no effect on an image.  :-)  The <p></p> would throw in an extra line feed or two, and kind of mess up the layout.

Just an idea.

Peace and joy.  mvan
0
 
tallmaxAuthor Commented:
Hi Mvan,

Tried it all, but sadly no success.

Max


http://www.tallpinedesign.com/clients/creativeposse/v2/media_cu.html
0
 
mvan01Commented:
Hi Max,

Well there must be a cross-browser solution.  So many people are using the ability to rewrite what's inside of a <div></div> that I can't believe it cannot be done.  Wish I had found it already.  ... sigh ...  I would like to help you get that MM_ stuff out of there.  I don't know if I should think of those routines as elegant, slick, or overly complex.  I've chosen the latter, for the time being.

I may look around a bit more for a cross-browser solution.  You can too, via:  innerHTML safari         as a start.

Peace and joy.  mvan
0
 
mvan01Commented:
P. S.

Perhaps there are clues here: http:Q_20812801.html#9850794 or here: http:Q_21824971.html#16526103

mvan
0
 
tallmaxAuthor Commented:
Hi mvan,

This is way over my head. --I've got to find an answer if there is one though.

Maybe if I abandon the (multiple link) Imagemap idea? Can one make the target image a link at all?

Max
0
 
mvan01Commented:
Yes, the target image can itself be a link.  mvan
0
 
tallmaxAuthor Commented:
Hi mvan!

--I think I have the answer (see code below)! Hoorah! Thank you, thank you, thank you for all you efforts. Really.  :-)


function changeMap(whatMap) {
   var text = swapMap[whatMap];
   var divToChange=document.getElementById('myDiv');
   // alert('changeMap: change to photo # '+whatMap);
   divToChange.innerHTML=text;

}
0
 
mvan01Commented:
Hi Max,

Hey!  Does that work cross browser?  I thought it needed the other options -- supposed that's why they were there.  If .innerHTML is workable on all your required browser platforms, then go for it.  Super!

If not, I'd like to document another way for this to work -- tested in IE only, but does not use .innerHTML:

Peace and joy.  mvan

Here's ALL the script you need:

<!-- swap both image & imagemap -->
<script language="JavaScript" type="text/javascript">

var swapMap = new Array();

swapMap[1] = '<img src="images/work/media_cu01.jpg" border="0">';

swapMap[2] = '<img src="images/work/media_cu02.jpg" border="0">';

swapMap[3] = '<img src="images/work/media_cu03.jpg" usemap=#media_cu03 border="0">';

swapMap[4] = '<img src="images/work/media_cu04.jpg" border="0">';

swapMap[5] = '<img src="images/work/media_cu05.jpg" usemap=#media_cu05 border="0">';

swapMap[6] = '<img src="images/work/media_cu06.jpg" border="0">';

function changeMap(whatMap) {
   var text = swapMap[whatMap];
   var divToChange=document.getElementById('myDiv');
   var d2 = divToChange.firstChild;
   var newText = document.createElement(text);
   divToChange.replaceChild(newText, d2);
}

</script>

... and here's the html - in this case, just put the image maps into the html ...

<!-- start content area -->

<MAP NAME="media_cu03">
<AREA SHAPE="rect" ALT="" COORDS="77,45,171,68" HREF="media_cu03a.mp3">
<AREA SHAPE="rect" ALT="" COORDS="77,70,171,93" HREF="media_cu03b.mp3">
</MAP>

<MAP NAME="media_cu05">
<AREA SHAPE="rect" ALT="" COORDS="77,45,171,68" HREF="media_cu05a.mp3">
<AREA SHAPE="rect" ALT="" COORDS="77,70,171,93" HREF="media_cu05b.mp3">
</MAP>

... and then this is how you define the <div> where the image gets swapped ...
<DIV ID="myDiv" STYLE="position:absolute"><IMG SRC="images/work/media_cu01.jpg" WIDTH="369" HEIGHT="265" BORDER="0" ALT="photo"></DIV>

... th- th- th- that's all, folks!
0
 
tallmaxAuthor Commented:
Yep, It works cross-browser, at least Mac Safari, FireFox & Explorer and Windows Explorer.

I'll try out your other option too!

:-)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 14
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now