Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

How is this Done?

  • 23-07-2013 11:13am
    #1
    Registered Users Posts: 370 ✭✭


    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


Comments

  • Registered Users Posts: 291 ✭✭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..


  • Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭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.


  • Registered Users Posts: 370 ✭✭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.


  • Registered Users Posts: 241 ✭✭fcrossen




  • Registered Users Posts: 644 ✭✭✭Freddio




  • Advertisement
  • Closed Accounts Posts: 9,700 ✭✭✭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.


  • Registered Users Posts: 370 ✭✭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.


  • Closed Accounts Posts: 9,700 ✭✭✭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.


  • Registered Users Posts: 644 ✭✭✭Freddio


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


  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Freddio wrote: »
    That's a bit confusing as the three areas have the same coordinates.

    Edited accordingly.


  • Advertisement
Advertisement