Create image map

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>
Like 0 Replies 5

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

Sign up Log in

CrazyEngineers powered by Jatra Community Platform

  • MaRo
    MaRo

    @maro-Ce3knx • Dec 20, 2009

    Nice tip Goyal 😉

    0
  • sarveshgupta
    sarveshgupta

    @sarveshgupta-txtmu5 • Dec 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>
    0
  • Mahesh Dahale
    Mahesh Dahale

    @mahesh-E2tZ3t • Dec 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

    0
  • Manish Goyal
    Manish Goyal

    @manish-r2Hoep • Dec 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

    0
  • vik001ind
    vik001ind

    @vik001ind-rOaCSy • Dec 21, 2009

    quite informative!

    0