www.webdeveloper.com
Results 1 to 11 of 11

Thread: Hover (rollover) for ImageMap

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    6

    Hover (rollover) for ImageMap

    Hi all,
    I want to create an Image map with hovering feature for each individual area.
    i already created the image map (code below) but i don't know where to add the hovering code... anyone?

    </body>
    </html>
    <p align="left">
    <map name="FPMap0" id="FPMap0">
    <area href="http://www.portfolio.com" shape="rect" coords="0, 226, 351, 398" />
    <area href="http://www.EPM.com" shape="rect" coords="351, 228, 695, 301" />
    <area href="http://www.Request.com" shape="rect" coords="350, 302, 695, 376" />
    <area href="http://www.IPCS.com" shape="rect" coords="698, 230, 1278, 376" />
    </map>
    <img alt="" src="SiteAssets/TopHeader.PNG" width="1299" height="377" usemap="#FPMap0" /></p>
    <p align="left">
    <div>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Newbi28,

    and a warm welcome to these forums.

    Here is a basic example...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>image map mouseover/mouseout</title>
    
    <style>
    .hide {
       display:none;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){
    
       var obj=document.getElementById('note'); 
       var ar=document.getElementById('FPMap0').getElementsByTagName('area');
    
    for(var c=0;c<ar.length;c++){
    ar[c].number=c;
    
    ar[c].onmouseover=function() {
        obj.className='';
        obj.innerHTML='this is area number '+this.number;
    
    this.onmouseout=function() {
        obj.className='hide';  
        }
       }
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    
    </script>
    
    </head>
    <body>
    
    <div>
    <map name="FPMap0" id="FPMap0">
     <area href="http://www.portfolio.com" shape="rect" coords="0,226,351,398" alt="" />
     <area href="http://www.EPM.com" shape="rect" coords="351,228,695,301" alt="" />
     <area href="http://www.Request.com" shape="rect" coords="350,302,695,376" alt="" />
     <area href="http://www.IPCS.com" shape="rect" coords="698,230,1278,376" alt="" />
    </map>
    <img alt="" src="SiteAssets/TopHeader.PNG" width="1299" height="377" usemap="#FPMap0" />
    </div>
    
    <div id="note" class="hide"></div>
    
    </body>
    </html>

    coothead

  3. #3
    Join Date
    Jun 2013
    Posts
    6

    More questions

    Hi Coothead thanks for your reply,
    I'm really new to this so i need a little more details-
    where do i put my OnHover image?
    and is it all HTML and i should just copy it as it is?

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Newbi28,

    have you not tried the code that I posted?


    coothead
    Last edited by coothead; 06-26-2013 at 09:23 AM.

  5. #5
    Join Date
    Jun 2013
    Posts
    6

    Answer

    Yes I did but no Hover affect takes place, same as before.

  6. #6
    Join Date
    Jun 2013
    Posts
    6
    Altough it does sais: This is area number 1,2,3...
    but no hover

  7. #7
    Join Date
    Jun 2013
    Posts
    6
    Sorry but all images are on a secure sharepoint site... i could try uploading them somewhere but if you had an example of a code even with one image that would really help.

    Also- i've tryed creating a table and cutting each area to it's right place in the table and set all borders to 0 but there is always a small white border between upper and lower images.

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Newbi28,


    if you want me to code for images, then I will need the images.

    Have you considered putting them on a site?

    I have seen some users use...




    coothead
    Last edited by coothead; 06-26-2013 at 01:23 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles