How is this Done?

MaxFlower

This is probably a basic question for most but I am not a professional in this area so...here goes.

This image shows a floor plan with orange squares. As you move the mouse over one of the squares a popup appears as shown to the right of the image containing a description at that point as well as an image or photo for clarity.

How is this done? I want to do something similar as a small part of a project I am working on. I can manage the floor plan and was going to use an image map to link to each description on an separate page but this is much more stylish and smooth. I have done a Google search but I guess I don't have the right terminology as I am not find out the right answers.

Many thanks

Seridisand

MaxFlower wrote: »

This is probably a basic question for most but I am not a professional in this area so...here goes.

This image shows a floor plan with orange squares. As you move the mouse over one of the squares a popup appears as shown to the right of the image containing a description at that point as well as an image or photo for clarity.

How is this done? I want to do something similar as a small part of a project I am working on. I can manage the floor plan and was going to use an image map to link to each description on an separate page but this is much more stylish and smooth. I have done a Google search but I guess I don't have the right terminology as I am not find out the right answers.

Many thanks

Without seeing the actual code, this is guess work but I would implement this using a little bit of jquery or Angularjs, where the mouseover event triggers a little iframe displaying the image and summary. I don't do a lot of front end stuff, so there may be a plugin or something available to achieve this, google is your best friend here..

stevenmu

There was an old technique in HTML called "Image Maps". The fancier modern versions are done by combining image maps with Javascript. If you google for "jquery image maps" there's a few jquery plugins available to make them easy to do.

MaxFlower

Thanks for that. I will try jquery and see if i can do what i Need that way. A quick google search tells me its what I was after just didn't know the term. Thanks again.

fcrossen

You can also use CSS:
- http://cssdemos.tupence.co.uk/image-popup.htm
- http://www.websitecodetutorials.com/code/photo-galleries/css-popup-image.php
Much simpler than using Javascript.

Freddio

http://jsfiddle.net/2YqCT/

tricky D

stevenmu wrote: »

There was an old technique in HTML called "Image Maps". The fancier modern versions are done by combining image maps with Javascript. If you google for "jquery image maps" there's a few jquery plugins available to make them easy to do.

Imagemaps are still very much in play and they're the first method I would consider. Just pop the mouse event into the area and make it show/hide the div - simples, with or without jQuery.

MaxFlower

tricky D wrote: »

Imagemaps are still very much in play and they're the first method I would consider. Just pop the mouse event into the area and make it show/hide the div - simples, with or without jQuery.

Not being smart (obviously) but I have no idea what this means.

tricky D

Ok.

An imagemap is an image with more than one link depending on where you click. More info: http://www.w3schools.com/tags/tag_map.asp

In your case, you're not really interested in clicking it as a link. Instead you want it to show a div with the extra stuff when the mouse is over and hide it when the mouse goes off the square. Both these mouse actions are events. So you would have something like:
<area shape ="rect" coords="20,20,30,30" href="" alt="some decsription" id="imagehotspot1" onmouseover="showdiv()" onmouseout="hidediv()" />
<area shape ="rect" coords="50,50,60,60" href="" alt="some decsription" id="imagehotspot2" onmouseover="showdiv()" onmouseout="hidediv()" />
<area shape ="rect" coords="70,70,40,40" href="" alt="some decsription" id="imagehotspot3" onmouseover="showdiv()" onmouseout="hidediv()" />

When you mouseover imagehotspot1 (the event), a bit of javascript is triggered. The event sends the info that imagehotspot1 is in play, so make the corresponding div with the relevant image (or other content) show somewhere by executing the showdiv part of the javascript. Likewise, when the mouse is off the hotspot, the div defaults back to a blank one or none at all, whichever one you want.

That's only one way of doing it, there are loads of other ways of doing this.

Even with my experience, considering my writing of javascript is still rubbish, what I would do is find an rough example of what you want to do (Google 'imagemap onmouseover show/hide div') and reverse engineer it.

Eg. http://www.trwautoservice.it/cerca-officina.html (this does not use the exact same method as above)

Do something along the lines of:

Grab <script src="assets/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> (this has the show/hide js stuff already rolled up) and any other css or js as needed.

Change the image, change the hotspots, make rollover squares (if bothered), change the showing divs with whatever I want in them, put them all in the required order, make the required css bits.

That's just at a glance, without rolling up my sleeves properly, so I'm sure some others here with better JS than me will find holes or better ways.

Freddio

That's a bit confusing as the three areas have the same coordinates.

tricky D

Freddio wrote: »

That's a bit confusing as the three areas have the same coordinates.

Edited accordingly.