Jump to content

image mapping kind of thing


real_illusions

Recommended Posts

hi, not sure how you go about this, so therefore dont know where to post (i'll use the most common excuse out there to say 'oops'..i'm sure no-one will notice)..anway.image mapping kind of thing.what i want to do is, with an image..(well 2 on one page..) is that when the mouse goes over certain parts, a seperate box next to the image comes up giving details on that part of the image.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.its the info part i'm after more, the highlighting part is just a bonus, but i would like that too.i haven't found anything to do with java or javascript to do this out there on the interweb..so i'm guessing its something elsethanks:)

Link to comment
Share on other sites

http://www.w3schools.com/tags/tryit.asp?fi...tryhtml_areamapIt's possible to combine this technology with javascript. You can use <div>'s with visibility: hidden, and onmouseover="document.getElementById('div_idname').style.visibility="visible".I don't have time to write as much now, because I have other stuff that needs to be done, but I can write you the code later if you need help. Or maybe someone else can who knows what I'm talking about. Lots of skilled people here, you should be able to find someone quick... :)
Link to comment
Share on other sites

Here is an example of an imagemap using mouseovers.:http://www.lessonlab.com/I wrote this code so I can explain it if needed (not the underlining of the links when they are mousedover). This doesn't address your need of what we call a disjointed rollover.That would be found here:http://www.prosthodontics.org/I wrote this code too (years ago mind you - save me the critique). This seems to be closer to what you want.But what I think I hear you saying is that you need a combination of the two. But I'll let you take a look at those two sites and reply acccordingly.

Link to comment
Share on other sites

thanks for the help so far.with jonas code..i've tried it..but it doesn't seem to work. i think its something to do with the co-ordinates of the image. the hidden div doesn't appear no matter where i roll it over.heres what i did -

<div id="something" style="z-index:1; position:absolute; top:0px; left:0px; "><img alt="somepicture" width="218" height="109" title="somepicture" src="somepicture.gif"><map id="picture" name="picture"><area shape="rect" coords="0,0,175,20" onmouseover="document.getElementById('firstcorner').style.visibility="visible"></div><div style="visibility:hidden; position:absolute; top:0px; left:225px; "><p>some text type thingy</p></div>

and skemcins sites, i think they look like something i'm trying to do, but without the linking.the 2nd site is certainly the closest, as when you roll over the images..it highlights and some text appears.

Link to comment
Share on other sites

thanks for the help so far....and skemcins sites, i think they look like something i'm trying to do, but without the linking.the 2nd site is certainly the closest, as when you roll over the images..it highlights and some text appears.

Just replace the "href" values with href="java script: void(0);" and the pages will link nowhere but you'll get the visual effect you are after.
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
×
×
  • Create New...