asked on

Image Mapping

I have an image map that I want to use with a mouseover, making that section of the map appear to enlarge. Any ideas?

JBenson

ASKER

Edited text of question

ASKER CERTIFIED SOLUTION

jbirk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JBenson

ASKER

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

JBenson

ASKER

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.

jbirk

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

JBenson

ASKER

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

jbirk

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">

</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

jbirk

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

JBenson

ASKER

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.

jbirk

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

JBenson

ASKER

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

jbirk

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">

</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

JBenson

ASKER

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.