CrazyEngineers
  • Create image map

    Manish Goyal

    Manish Goyal

    @manish-r2Hoep
    Updated: Oct 21, 2024
    Views: 989
    some useful html tips

    Many times I have seen sometimes in some websites there are links created on image itself
    today i learn it...so I would like to share it with you Guys

    An image map is a way of defining "hot spot" links within an image on a Web page. This means that, rather than having the whole image behave as one link, you can have lots of different links within the one image.

    Linking to an image map: The Usemap attribute

    How do you turn an image into an image map? Well, to associate an image map with an image, simply add the usemap attribute to the img tag for the image. In the above example, the image map is called "shapes", so our img tag looks like this:

    [img]abc.jpg[/img]
    
    Creating an image map: The map tag

    The other half of the image map is the map definition itself. In this definition, you tell the browser where the hot spots are in the image, and what the hot spots need to link to.
    The map is defined using the <map></map> tag. In our example above, the map tag looks like this:
    <map name="map-name">
    
    <area    shape="[I]area shape[/I]"
        coords="[I]area coordinates[/I]"
        href="[I]area hyperlink[/I]" [I]or[/I] nohref="nohref"
        target="[I]hyperlink target[/I]"
        title="[I]area title[/I]"
            alt="[I]alternate text[/I]"/>
    
    
    </map>
    0
    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies
  • MaRo

    MemberDec 20, 2009

    Nice tip Goyal 😉
    Are you sure? This action cannot be undone.
    Cancel
  • sarveshgupta

    MemberDec 20, 2009

    Nice share goyal 😁

    Here is an example to give you more clarity of that -

    [img]planets.gif[/img]
    
    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
      <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
      <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
    </map>
    Are you sure? This action cannot be undone.
    Cancel
  • Mahesh Dahale

    MemberDec 20, 2009

    Nice!!!
    javascript
    <html>
    <head>
    <script type="text/javascript">
    function writeText(txt)
    {
    document.getElementById("desc").innerHTML=txt;
    }
    </script>
    </head>
    
    <body>
    [img]planets.gif[/img]
    
    <map name="planetmap">
    <area shape ="rect" coords ="0,0,82,126"
    onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
    are by far the largest objects in our Solar System.')"
    href ="sun.htm" target ="_blank" alt="Sun" />
    
    <area shape ="circle" coords ="90,58,3"
    onMouseOver="writeText('The planet Mercury is very difficult to study
    from the Earth because it is always so close to the Sun.')"
    href ="mercur.htm" target ="_blank" alt="Mercury" />
    
    <area shape ="circle" coords ="124,58,8"
    onMouseOver="writeText('Until the 1960s, Venus was often considered a
    twin sister to the Earth because Venus is the nearest planet to us, and
    because the two planets seem to share many characteristics.')"
    href ="venus.htm" target ="_blank" alt="Venus" />
    </map>
    
    
    
    </body>
    </html>
    Check out:-<a href="https://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap" target="_blank" rel="nofollow noopener noreferrer">W3Schools Tryit Editor</a>

    Source :- w3schools
    Are you sure? This action cannot be undone.
    Cancel
  • Manish Goyal

    MemberDec 21, 2009

    some useful html tips

    If any one does not know php or any server side language
    but he want to give password protection
    don't worry he can achieve this by using simple java script coding
    <HEAD>
    <SCRIPT language="JavaScript">
    <!--hide
    
    var password;
    
    var pass1="cool";
    
    password=prompt('Please enter your password to view this page!',' ');
    
    if (password==pass1)
      alert('Password Correct! Click OK to enter!');
    else
       {
        window.location="abc.com";
        }
    
    //-->
    </SCRIPT>
    </HEAD>
    but it works only for small users...
    have fun
    Are you sure? This action cannot be undone.
    Cancel
  • vik001ind

    MemberDec 21, 2009

    quite informative!
    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register