Jump to content

javascript image mapping


real_illusions
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :)
Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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.')">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...