Solved

Display a PopUp Image For Each Area In An Image Map

Posted on 2006-11-28
12
223 Views
Last Modified: 2008-03-05
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
Comment
Question by:phpamble
  • 5
  • 5
12 Comments
 
LVL 1

Author Comment

by:phpamble
ID: 18028108
I do not want to use the rollover image feature.
0
 
LVL 6

Expert Comment

by:system_down
ID: 18029374

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
 
LVL 1

Author Comment

by:phpamble
ID: 18029740
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
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18031263
Hi,

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

R.K
0
 
LVL 6

Expert Comment

by:system_down
ID: 18031463
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 1

Author Comment

by:phpamble
ID: 18034876
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
 
LVL 6

Expert Comment

by:system_down
ID: 18035091

Maybe I didn't really understand what you need...
tell me more pls
0
 
LVL 1

Author Comment

by:phpamble
ID: 18035209
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
 
LVL 6

Accepted Solution

by:
system_down earned 500 total points
ID: 18035408

<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
 
LVL 1

Author Comment

by:phpamble
ID: 18035591
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
 
LVL 6

Expert Comment

by:system_down
ID: 18035622

your welcome.

S_D
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now