Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change title in image in maparea onmouseover

    Hello,
    I have a travelsite (using codelgniter php framework) with multiple maps.
    All these maps are working fine. When you click on the region it brings you to the page belonging to it.
    When you mouseover it shows the title.
    I would like to change this into an image (think about name and flag that are already images).
    Okay my coding;
    <center><img src="<?php echo base_url() ?>assets/images/world.jpg" height="412" width="940" alt="Worldmap" title="Worldmap" usemap="#worldmap"/></center>
    <map name="worldmap">
    <area shape="poly" coords="522, .... , 120" href="<?php echo base_url() ?>index.php/regions/africa" alt="Africa" title="Africa" />
    I have tried many things already; like replacing title for onmouseover="this.src'(assets/images/flags/africa.jpg')" nothing worked so far.
    Anyone has got an idea? look live: http://www.holidaysrating.com/index....pmenu/worldmap

    btw let me know what you think about the site? still under construction...

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there superray78,

    and a warm welcome to these forums.

    Does this help...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <base href="http://www.holidaysrating.com/"/>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="Explore the world"/>
    <meta name="keywords" content="world, worldmap, explore, map"/>
    <meta name="author" content="Raymond"/>
    <meta name="robots" content="index, follow"/>
    <meta name="revisit-after" content="1 days"/>
    
    <title>Worldmap | Holidaysrating.com</title>
    
    <link href="assets/css/holiday.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/wt-rotator.css"/>
    
    <style type="text/css">
    #map-container {
        position:relative;
        width:940px;
        margin:auto;
     }
    #tt{ 
        position:absolute;
        border:1px solid rgb(0,0,0);
        box-shadow:8px 8px 8px rgba(0,0,0,0.6);
     }
    .hide {
        display:none;
     }
    .p0 {
        top:110px;
        left:580px;
     }
    .p1 {
        top:30px;
        left:830px;
     }
    .p2 {
        top:10px;
        left:590px;
     }
    .p3 {
        top:200px;
        left:400px;
     }
    .p4 {
        top:70px;
        left:300px;
     }
    .p5 {
        top:60px;
        left:330px;
     }
    .p6 {
        top:170px;
        left:360px;
     }
    .p7 {
        top:190px;
        left:520px;
     }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    (function() {
       'use strict';
    
       var preloads=[];
    
    function preload() {
    for(var i=0;i<arguments.length;i++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[i];
      }
     }
    
       preload(
               'assets/images/flags/africa.jpg','assets/images/flags/asia.jpg',
               'assets/images/flags/europe.jpg','assets/images/flags/antarctica.jpg',
               'assets/images/flags/central-america.jpg','assets/images/flags/north-america.jpg',
               'assets/images/flags/south-america.jpg','assets/images/flags/oceania.jpg'
              );
    
    function init(){
       var ar=document.getElementById('worldmap').getElementsByTagName('area');
       var obj=document.getElementById('tt');
    for(var c=0;c<ar.length;c++) {
       ar[c].number=c;
    ar[c].onmouseover=function() {
       obj.src=preloads[this.number].src;
       obj.className='p'+this.number;
    this.onmouseout=function(){
       obj.className='hide';
        }
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="slider">
    
    <div id="map-container">
    <img src="assets/images/world.jpg" height="412" width="940" alt="Worldmap" title="Worldmap" usemap="#worldmap"/>
    <map name="worldmap" id="worldmap">
     <area shape="poly" coords="522,125,557,176,574,172,543,213,571,235,562,262,528,263,505,287,492,287,473,243,474,222,465,200,465,189,454,184,420,191,397,164,398,146,429,115,466,110,469,120,493,127,494,120" href="index.php/regions/africa" alt="Africa"/>
     <area shape="poly" coords="577,29,626,18,701,27,818,42,800,71,769,58,749,57,746,67,762,70,797,105,770,125,746,104,739,116,769,173,782,210,768, 225,720,217,693,187,695,158,686,159,676,146,649,161,653,183,644,177,630,147,594,138,594,147,556,168,528,125,530,111,513,110,510,103,524,99,536,103,542,97,560,103,574,109,565,77,582,76,572,44,582,40" href="index.php/regions/asia" alt="Asia"/>
     <area shape="poly" coords="574,36,567,42,575,72,555,74,563,83,560,99,534,90,535,81,524,89,516,84,511,98,499,101,500,113,477,109,467,92,452,97,440,109,422,107,422,94,438,95,437,81,425,71,406,44,471,15,565,21" href="index.php/regions/europe" alt="Europe"/>
     <area shape="poly" coords="745,405,763,368,514,368,416,387,351,389,334,362,312,379,175,390,218,406" href="index.php/regions/antarctica" alt="Antarctica"/>
     <area shape="poly" coords="151,122,189,134,231,143,284,159,288,185,264,191,252,201,237,193,237,187,195,161,188,162,163,154" href="index.php/regions/central_america" alt="Central America"/>
     <area shape="poly" coords="104,60,129,38,203,32,233,24,298,13,346,8,425,12,403,32,364,41,355,51,321,43,309,49,317,70,320,84,289,90,254,106,237,132,224,125,196,132,149,117,143,102,159,78,157,59,137,52" href="index.php/regions/north_america" alt="North America"/>
     <area shape="poly" coords="235,197,258,209,260,195,294,190,358,220,299,302,302,336,274,327,248,239,225,214" href="index.php/regions/south_america" alt="South America" title="South America"/>
     <area shape="poly" coords="789,205,789,234,735,258,731,284,773,281,792,308,839,315,879,296,932,235,840,208" href="index.php/regions/oceania" alt="Oceania"/>
    </map>
    <img id="tt" class="hide"  src="assets/images/flags/africa.jpg" alt=""/> 
    </div><!--end #map-container -->
    
    </div><!--end #slider -->
    
    </body>
    </html>

    coothead
    Last edited by coothead; 04-27-2013 at 04:53 PM.


  •  

    Posting Permissions

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