Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Pop-up picture on mouse-over of hotspot

  1. #1
    Junior Member
    Join Date
    Mar 2012
    Posts
    9

    Default Pop-up picture on mouse-over of hotspot

    I'm relatively new to NOF (v12) and would like to know how to show a small-ish picture on mouse-over, i.e. I have a map showing tracks, along which there are points of interest. I'd like a photo to pop-up whenever the mouse pointer touches e.g. a hotspot along the track. The photos are already in a gallery elsewhere on the same site - is it possible to reference the gallery pages?
    Many thanks

  2. #2
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,962

    Default

    use the hotspot tool and draw a suitable shape or circle or rectangle and link it, choose file link and popup type, then click edit to edit the dimension of the popup, be sure to tick resizable, because some users may have different browsers and the picture maybe partially hidden, but the user can resize the window to reveal all

    I would not select an image from the gallery db folder as these have a habit of renaming themselves from time to time and you will end up with broken links, but it can be done

  3. #3
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    998

    Default

    Hi,

    maybe you like to consider "Overlib" for this. My pages are in German but maybe it gives you an idea.

    http://www.tommyherrmanndesign.com/n...e-overlib.html
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  4. #4
    Junior Member
    Join Date
    Mar 2012
    Posts
    9

    Default

    Hi Anton and Tommy,

    I'll have a look at both methods; it's good to know that it is straightforward. I want to create some 140 such pop-ups on 4 different maps, so a simple solution is important.
    Thanks for the link, Tommy - that looks excellent. I'm also in Germany, so your German site is ideal!

  5. #5
    Junior Member
    Join Date
    Mar 2012
    Posts
    9

    Default

    Newbie question: I'm using NOF 12 and IE9. I have tried the method suggested by Anton. The browser usually allows pop-ups (e.g. the tigers' heads on the overlib site and others elsewhere) but it requires me to "allow blocked content" on my own NOF-generated site! If I do that, the image appears, but then I have to close it again (i.e. it's not appearing on mouse-over until I allow blocked content, and I have to close it with a click afterwards). Is there a setting in NOF which would allow pop-ups from my site to appear? Thanks again.

  6. #6
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default

    Are you looking at your site after Local Publish? If so, this is standard Windows / IE security stuff and would not happen once you publish to a server.

    There is a security setting in IE to disable this. Not sure exactly where, and not sure what the risks are of doing so.
    Ray Cambpell
    Sounds In Sync
    Linked in

  7. #7
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,962

    Default

    Tools, Internet options, advanced, tick "allow active content to run in files on my computer"

    I always have this ticked otherwise you can't test anything without getting annoyed

  8. #8
    Junior Member
    Join Date
    Mar 2012
    Posts
    9

    Default

    Thanks Ray - that was indeed the case! I'm trying the image tooltip approach (as discussed on another thread) simply because it's what I saw first. The overlib solution is worth looking into too by the look of it. So far the picture still doesn't pop up on mouseover (but it does on click), but that's probably part of the learning process. Thanks to all for the help so far.

  9. #9
    Junior Member
    Join Date
    Mar 2012
    Posts
    9

    Default what am I not doing and/or doing wrong?

    There must be something wrong with my current html, because the pop-up image isn't showing on mouseover. I should be grateful if someone could point me in the right direction.
    This is how things are set up at the moment:


    In the section <head> of master page/all pages:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />

    <script type="text/javascript" src="ddimgtooltip.js">

    /***********************************************
    * Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>


    In the page html where the pop-up should show (hotspot as empty smartlink over POI in existing graphic):

    <td width="650"><img id="Bild45" height="850" width="650" src="../assets/images/autogen/4Grenzsteinreihen_b.jpg" border="0" alt="4Grenzsteinreihen_b" title="4Grenzsteinreihen_b" usemap="#map0"><map name="map0" id="map0"><area shape="circle" id="KreisHotspot1" coords="384,72,8" href="javascript:void(0)" class="nof-navPositioning" style="cursor:default;" rel="imgtip[65]"></map></td>

    In the java script "ddimgtooltip.js" (in Local Publish and uploaded to server):

    ...
    tooltips[65]=["assets\images\N-65.jpg","Nr. 65<br /> No. N-LXV"]
    ...

    The href="javascript:void(0)" looks odd to me, since I'm expecting the rel="imgtip[65]" to do the actual pop-up. Thanks in advance for any help.

  10. #10
    Senior Member LBA's Avatar
    Join Date
    Jan 2010
    Location
    California
    Posts
    543

    Default

    What publish method are you using? In the code you posted here, you're indicating that the JS file is in the same folder as all of your HTML files. If that is not true, you need to address that.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •