Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

Display a PopUp Image For Each Area In An Image Map

I have an image map on a html page. For each area I have marked as  a hotspot, I would like to have an image appear as a mouseover event. If the onclick event is triggered the link specified must be visited.

Can any Javascript Expert help.

Thank You
phpamble
0
phpamble
Asked:
phpamble
  • 5
  • 5
1 Solution
 
phpambleAuthor Commented:
I do not want to use the rollover image feature.
0
 
system_downCommented:

Try putting an onmouseover event....

look at this: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20608160.html?query=tooltip&topics=87

seems to be usefull

Let me know
S_D

0
 
phpambleAuthor Commented:
Thanks for the quick response

The area parameter that I currently have in one of the areas of the image map is in the form:

<area shape="poly" coords="170,209,198,187,231,188,261,189,270,196,208,247,171,252,150,238,152,224" href="" target="_self" alt="Eastern Cape" />

So I assume that I will include a javascript function call like onclick="showPic(this);" at the end after alt="Eastern Cape"

Could you give me any assistance on how to write showPic(this)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
rama_krishna580Commented:
Hi,

look at the documentation it might help you..
http://www.htmltutorials.ca/lesson20.htm

R.K
0
 
system_downCommented:
something like:

            function showPic(el, img){
              
            var oDiv = document.getElementById('image');
            if(oDiv == null){
                  oDiv  = document.createElement('div');
                oDiv.id = 'image';
                  oDiv.style.border = '1px solid #000';
                  oDiv.style.background = '#DDD';
                  oDiv.style.position = 'absolute';
                  oDiv.style.padding = '5px';
                  oDiv.style.width = '100px';
            }
            
            oDiv.style.zIndex = '10000';
            oDiv.innerHTML = '<img src='+img+'/> ';
            oDiv.style.visibility = 'visible';

            if (document.all)
              oDiv.style.left=window.event.clientX, oDiv.style.top=window.event.clientY;
                else if (document.layers)
                    oDiv.style.left=e.pageX, oDiv.style.top=e.pageY;
                        
            
            document.body.appendChild(oDiv);
            
            
            }
            
      

      function hidePic() {
            var oDiv = document.getElementById('image');
            oDiv.style.visibility = 'hidden';
      }
            


<div onmouseover="showPic(this, 'test.jpg')" onmouseout="hidePic()">test</div>


let me know
S_D
0
 
phpambleAuthor Commented:
Thanks to everybody.

system_down  I have copied your code and have tested it. It shows a popup box but only a placeholder for the image.

0
 
system_downCommented:

Maybe I didn't really understand what you need...
tell me more pls
0
 
phpambleAuthor Commented:
I have an imagemap that is broken into areas. I.E.

<area shape="poly" coords="170,209,198,187,231,188,261,189,270,196,208,247,171,252,150,238,152,224" href="" target="_self" alt="Eastern Cape" />

One then for each area.

What I would like is for an image to appear on the onmouseover event whent the cursor passes over this area.

Is this possible?
0
 
system_downCommented:

<MAP Name="mymap">
<AREA Shape="circle" Coords="70,84,51"
         Href="http://www.december.com">
<AREA Shape="rect" Coords="25,180,125,280"
         Href="http://www.december.com/html/">
<AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167"
         Href="http://www.december.com/works/tour.html">
<AREA Shape="rect" Coords="422,17,480,277" Nohref onmouseover="alert('rect')">
<AREA Shape="circle" Coords="499,299,100"
         Href="http://www.cnn.com/">
<AREA Shape="default" Coords="0,0,195,111"
         Href="http://www.december.com/john/">
</MAP>

<IMG Src="test.gif" Width="500" Height="300"
        Alt="Image Map" Usemap="#mymap" Ismap>
      

Ok, yes it is possible!!! you can put an onmouseover event in the shape you need...
then call the showpic();

Let me know
S_D
0
 
phpambleAuthor Commented:
If I put the function call in the shape, Nohref onmouseover="alert('rect')", a new window is opened

But the following does not generate any popup, namely

Nohref onmouseover="showPic(this, 'pic.jpg')"

Thanks for the help thus far!

0
 
system_downCommented:

your welcome.

S_D
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now