Profound UI and HTML image maps?

[charles.wilt]

I'm trying to create a pop-up that consists of just an image with a portion of that image clickable; opening up a new tab to a given URL..

Created a new screen, window=true..
Added and HTML container with the following HTML

Code: Select all

<i><img src="/profoundui/userdata/images/DLR18-0198_DMS-Edge_Digital-Ad_668x250_v2.jpg" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area class="dmsedge" shape="rect" coords="370,213,667,248" href="http://www.dmsedge.com" target="_blank"> 
</map></i>

Hey, works great...except...if the user clicks banner, I want to open the new tab and close the pop-up and continue in the original session...

So what I really want is an "on-click" event for the image map, rather than the browser handling opening the URL. A little searching found a SO question (https://stackoverflow.com/questions/299 ... ea-element) with a link to the following JS Fiddler https://jsfiddle.net/bL5rgstg/

So I added the class="dmsedge" to the map and added the following in the screen on-load event

Code: Select all

$(window).load(function(){
  $(".dmsedge").on("click", function(e){
    e.preventDefault();
    window.open('http://www.dmsedge.com', '_blank');
  });
});

But it's not working inside profound....I can see via the debugger that the on-load code is getting run. But when clicking the map, the override code is not run.

However, it works fine inside a local .HTML file on my PC.

I've noticed a message sometimes when debugging with chrome, something like "map source detected".

I'm wondering if PUI is doing something after the on-load that's wiping out my changes...or if it's doing something special with image maps that causes my solution to not work.

Any advice on how to get this to work they way I want?

Thank you!

[Scott Klement]

I apologize im advance, I haven't looked at image maps in about 20 years, so I'm not exactly sure what works and what doesn't

But. I would expect a simple "onclick" would work. Have you tried it?

Code: Select all

 <area shape="rect" coords="370,213,667,248" onclick="myFunc()">

Profound UI doesn't do anything special to image maps.

[charles.wilt]

Scott,

I don't see onclick documented for area at the w3schools web site...

But late yesterday, I saw some other post with something like

Code: Select all

href="#" onclick="somefunc()"

I'll play around with it some more today...

Yeah, imagine maps are old school...but they seem to be exactly what I need. (Basically a banner type ad pop-up with a register now link)

Is there a newer solution that you are aware of?

Thanks,
Charles