Solved

Image Mapping

Posted on 1998-08-04
13
354 Views
Last Modified: 2008-03-06
I have an image map that I want to use with a mouseover, making that section of the map appear to enlarge.  Any ideas?
0
Comment
Question by:JBenson
  • 7
  • 6
13 Comments
 

Author Comment

by:JBenson
Comment Utility
Edited text of question
0
 
LVL 8

Accepted Solution

by:
jbirk earned 70 total points
Comment Utility
You would have to swap the entire image which is mapped.  If you're asking how to make the image look different, that's a graphic question --  I have no idea.  But if you need code for changing the image with mouseovers and mouse outs, just ask, I'll post some.

-Josh
0
 

Author Comment

by:JBenson
Comment Utility
Thanks for your answer.  Yes, I need script to swap the image for mouseover giving parameters of the map rather than the entire image.  I don't know of any functions or properties to show java a parameter of the mouseover rather than a image.  In other words I want to put the mouse over a section of the image(like imagemap) and another image appears with a href link.  There will be five or six sectors on the image with corresponding links.  Thanks
0
 

Author Comment

by:JBenson
Comment Utility
This is for jbirk.  Did you get my recent reply to your answer?
Yes I need script to swap the image for mouseover giving parameters of the map rather than the entire image.  I don't know of any functions or properties to show in java, a parameter of the image to swap images and move to a href   assigned to that parameter.  In other words I want to put the mouse over the section of the image and another image appears, then be able to put the mouse over another section and a different image appears with a different href.  There will be five or six sectors on the image with corresponding links. Thanks.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
OK, I will work on this later.  But in the meantime, if you get a chance, could you post your current code if you have it, as I will be able to post exactly the code needed.  Otherwise I will just post the code necesary and try to explain how to use it.

-Josh
0
 

Author Comment

by:JBenson
Comment Utility
This is for jbirk.  Code I am using was basic Javascript for mouseover an image  such as   var **image**ON = new Image() etc. with html image map mixed with java comands for mouseover and mouseout.  Am not real familiar with java but and have been avoiding using it but for this type of situation I know I'm going to have to use it.  Who knows I might start to like it (might is the key word here lol).  Thanks for your help on this.  Its for an urban ministry and I am doing this as a gift for them.

Jack B
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

by:jbirk
Comment Utility
I meant to actually show all of the code for the image map, but that's ok.  I'll use an image map which I use on another site as the example, (cutting down it's size because the code is rather long otherwise)
<script language="JavaScript">
<!--
OffGif = new Image(590,17)
OffGif.src = "images/sub_pages/butns.gif"

OnGif1 = new Image(590,17)
OnGif1.src = "images/sub_pages/butns1.gif"
OnGif2 = new Image(590,17)
OnGif2.src = "images/sub_pages/butns2.gif"

function LightOn(num)
{document.swapper.src = eval("OnGif"+img_name+".src");
}

function LightOff()
{document.swapper.src = OffGif.src;
}
// -->
</SCRIPT>

<IMG SRC="images/sub_pages/butns.gif" usemap="#bottom" border=0 WIDTH="590" HEIGHT="17" name="swapper">
<MAP NAME="bottom">
<AREA SHAPE=RECT COORDS="78,1,161,17" HREF="index3.html"
onMouseOver="LightOn('1');"
onMouseOut="LightOff();">
<AREA SHAPE=RECT COORDS="162,1,207,17" HREF="staff.html"
onMouseOver="LightOn('2');"
onMouseOut="LightOff();">
</MAP>


So what's going on here is the entire image is being replaced when the mouse goes over a specific area of the image, and then it's replaced back when the mouse moves out again.

Hope this works for you,
Josh
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
woops!  I see a copy paste error.  Change this code:

function LightOn(num)
      {document.swapper.src = eval("OnGif"+img_name+".src");
      }

into this:

function LightOn(num)
      {document.swapper.src = eval("OnGif"+num+".src");
      }

Sorry,
Josh
0
 

Author Comment

by:JBenson
Comment Utility
Call me stupid but what is the property (num) at lightOn(num)and what does it do.  is that what gives it 2 locations on the image, because I see LightOn(1) and LightOn(2) in your mouseover script.  I'm really not as dumb as I might come across. I've just been doing html too long and have gotten real lazy with my logic.  I will try it in my script and see how far I can get.  I really appreciate this.  I would like to look at this site if you don't mind.  It will help me undersand.  If I knew how to give you more points I would.  Have emailed the opps for help in that.  Thanks again.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
num is the parameter that is being passed to the function LightOn.
When a call is made to LightOn, like LightOn('1'), (note the single quotes making the argument a string), the variable num is set to '1', so that in the function this statement:
document.swapper.src = eval("OnGif"+num+".src");
will become:
document.swapper.src = OnGif1.src;
after the string is concatenated with the plus operator, and the eval makes the resulting string into the object OnGif1, which was declared earlier with the statements:
OnGif1 = new Image(590,17)
OnGif1.src = "images/sub_pages/butns1.gif"

Am I making any sense?

The problem with looking at the site is that I didn't swap any images on this site.  I just added that functionality right here, but used the map from that site (also, it used mouseovers to write to the status bar on the bottom of the screen).

If you wanted to give me more points, wait until after your problem has been resolved, and then post another question in this topic area titled: "Question for jbirk", and then in the description area just say that the points are for help on this question or something like that.

-Josh
0
 

Author Comment

by:JBenson
Comment Utility
For jbirk,
Josh, the page is online. The site isn't near finished but I thought you could see what the problem is alot easier. The address is http://www.pnx.com/chosen/uhm.htm It still doesn't work.  I think it is probably something stupid.  I need a rope so I can hang myself now.  The image map doesn't ingage.  The Images I used for mouseovers are junk images I through in there until I can make it work.  Didn't want to make them if I can't get it to work.

Take a look please.  Thanks,
 JackB
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
OK, I looked at that page.  You had a lot of HTML mistakes, and a few javascript mistakes.  I removed the reference to the image map which I had posted as an example and cleaned up the code so that it worked with your image map.  Here is the entire cleaned up page:

<HTML>
<TITLE>Ministry Opportunities</TITLE>
<HEAD>
<script language="JavaScript">  
<!--
if(document.images)
 {var OffGif = new Image(500,400);
  OffGif.src = "Image2.jpg";
  var OnGif1 = new Image(500,400);
  OnGif1.src = "Image3.jpg";
  var OnGif2 = new Image(500,400);
  OnGif2.src = "Mexico.jpg";
  var OnGif3 = new Image(500,400);
  OnGif3.src = "Prison.jpg";
 }
function areaOn(num)
 {if (document.images) document.swapper.src = eval("OnGif"+num+".src");}
function areaOff()
 {if (document.images) document.swapper.src = OffGif.src;}
// -->
</SCRIPT>  
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER><B>
<FONT SIZE="5" COLOR="#800000" FACE="Arial">Urban Harvest Ministry Opportunities</FONT>
</B>
<BR>
<IMG SRC="Image2.jpg" WIDTH="500" HEIGHT="400" BORDER="0" usemap="#Image2" name="swapper">
<BR><FONT SIZE="2" COLOR="#000000" FACE="Arial">
Click an image for more information about that particular ministry.
</FONT></CENTER>
<map name="Image2">
 <area shape="polygon" coords="156,77,363,62,407,108,415,169,277,198,157,170,157,72,156,74,156,74,156,74"
  href="block_party.htm" target="display_area"
  onMouseOver="areaOn('1')" onMouseOut="areaOff()">
 <area shape="rect" coords="39,185,278,295"
  href="mexico.htm" target="display_area"
  onMouseOver="areaOn('2')" onMouseOut="areaOff()">
 <area shape="rect" coords="284,195,459,321"
  href="prison.htm" target="display_area"
  onMouseOver="areaOn('3')" onMouseOut="areaOff()">
</map>
</BODY>
</HTML>

This of course will still need the correct images.  It looks kind of funny when you go over the images as it is, but when you make the right images it will work correctly.  Also, the mouseover for the lower left side is working, but Mexico.jpg doesn't exist, so it just doesn't try to swap it since the image doesn't exist.

-Josh
0
 

Author Comment

by:JBenson
Comment Utility
Yes!!!!!!!!! Now make a lot of money!!! Ann Navarro author of "Effective Web Design" told me in a phone conversation that it can't be done in JavaScript.  She serves on the board for W3C I think.  She serves as one of  the bosses of the intranet.  Let her know you know how.  You can find her at www.webgeek.com.  Her phone# is there and also you can email her at ann@webgeek.com.  Thank you for your help.  Hope things go well for you at school.  You have a real future in this. Now I will give you points. I'll go to the front java page and re-enter as a new question atten. jbirk.  Look for it.  If you get famous or something from this code...just send me a few thousands for my ineptness on javascript.

Thanks,
JackB  Keep watching the site.  I'll be through with it soon.  Check out the band link.  I'm one of the members.  The actual address is:  www.pnx.com/chosen/uhm.htm.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now