Pop-up picture on mouse-over of hotspot

**TraceyR** · 03-24-2012

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

**antonsvideo** · 03-25-2012

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

**Thomas Frei-Herrmann** · 03-25-2012

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

**TraceyR** · 03-25-2012

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!

**TraceyR** · 03-26-2012

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.

**RayC** · 03-26-2012

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.

**antonsvideo** · 03-26-2012

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

**TraceyR** · 03-27-2012

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.

**TraceyR** · 03-29-2012

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.

**LBA** · 03-29-2012

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.

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

Thread Tools

Search Thread

Display

Pop-up picture on mouse-over of hotspot

what am I not doing and/or doing wrong?

Tags for this Thread

Posting Permissions