javascript image mapping

[real_illusions]

Hi there.from the example here - http://www.w3schools.com/js/js_image_maps.aspi copied the script, pasted it into my webpage. changed the text of what comes up, and the image...and the link for each bit to "java script: void(0);"but it doesn't work.. :)maybe its the usemap="#whatever" or something completely different.my code isn't online, as i want it working before it goes online. but i didn't change any of the actual coding in the javascript from ghe example...

[Chocolate570]

We can't help at all if you don't tell us what you want changed.

[real_illusions]

umm...i dont think you understand.i dont want anything changed...i changed the text that shows when you move over certain areas of the image, the links in the example, and the main image.but it doesn't work.and i dont know why.

[hacknsack]

Two questions:1) Which example illustrates what effect you're desiring?With JavaScriptJust HTMLWhat would you like for it to do?Do you want the user to be able to load a page when they click on a region?-or-Is the object just to give info regarding the image?

[real_illusions]

javascript one and the object is just to give info regarding the image:)

[Chocolate570]

Then it should work. Try taking the code again and formatting it, making sure it doesn't change in anyway except for the text.

[real_illusions]

got it to work now.it was the

usemap="#whatever"

in the planets, its got the planets in there..but i changed it to the name of my image..but i changed it back again to the planets, and it worked.

[real_illusions]

additional though.(new post instead of editing due to a bit of a time difference between my 2 posts..about 12 hours)how do you make the image change when you rollover that area? so to highlight that bit.i've tried using javascript rollovers but that didn't work...if that is one way, then what is the correct way? Or, maybe theres some way to highlight that area given by the co-ordinates??

[Chocolate570]

I think you might be able to do this:<area coordinates and stuff="values" onmouseover="this.border='14px'"> Not sure. An easier way to do it would be to use a javascript function that changes the image depending on what area was mouseovered.

[real_illusions]

cant get it to work.i'm guessing you cant have 2 onMouseOver's on one <a> ??i got the stuff to do with the text. But, when i try to put anything else in...it either makes nothing work or that other effect doesn't work.

[Chocolate570]

I don't understand what's wrong. The problem is we don't have enough information. Could you please explain what you want to do?

[real_illusions]

in relation to my topic http://w3schools.invisionzone.com/index.php?showtopic=1015

example, a car, when you go over the wheels, it tells you about the wheels..go over the bonnet (hood for you yanks), it tells you about the engine etc...and also highlights that part of the image.

from the w3schools example, it shows you how to do the text. I've got that bit sorted. the text displays below the image, thats no problem.Its adding an image roll over to the code, as to highlight the part of the image, as well as giving the text, thats the problem, and the thing i cant get right.unless...i add the text to the rollover image, will that make it easier?but..it changes to a different image depending on where the mouse is on the text..and thats where i need the image mapping.

[Chocolate570]

Easy. Make the image map, first of all. Then in each <area>, put onmouseover="hiLight('name of section')" and onmouseout="unHi()"Next, put this in the head section, adding new variables..

function hiLight(sect){idthing="id of image here"bonnet="src of bonnet image here"hood="src of hood image here"//and so on, with all the images.switch(sect){case "bonnet"document.getElementById(idthing).src=bonnetbreak//keep going with this.}function unHi(){idthing="id of image here"mainsrc="src of main, unhighlighted image here"document.getElementById(idthing).src=mainsrc}<script>

Does that work for you?

[real_illusions]

nothing works even these 2 examples by someone else i asked.along with an external js file placed in the head section to make it work.

  <AREA href="" shape="poly" coords="143,24 150,26 159,28 165,40" onmouseover="writeText('lots of trees.');SwitchImg('document.whatever','document.whatever','image2.jpg'); onmouseout="writeText(' ');RestoreImg();">

  <AREA href="" shape="poly" coords="143,24 150,26 159,28 165,40" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.whatever','document.whatever','image2.jpg');writeText('lots of trees.')">

[real_illusions]

he's got it to work now. at long last.