www.webdeveloper.com
Results 1 to 11 of 11

Thread: Hover (rollover) for ImageMap

  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,459
    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,459
    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
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there Newbi28,

    I want to create an Image map with hovering feature for each individual area
    You have yet to state what the "hovering feature for each individual area" actually is.

    If you can enlighten us, then we may be able to help your further.

    The code that I provided just gave the basic mouseover/mouseout function.

    coothead

  8. #8
    Join Date
    Jun 2013
    Posts
    6
    I want each individual area to change into another image when mouseovered.
    like a button that gets darker when hovered.

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

    have you made these images?

    Can you supply a link to them all (5)?

    We could possibly find a modern CSS method instead of javascript.

    coothead

  10. #10
    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.

  11. #11
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    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