Create image map

@manish-r2Hoep • Oct 21, 2024

Oct 21, 2024

1.0K

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.

CrazyEngineers powered by Jatra Community Platform

MaRo

@maro-Ce3knx • Dec 20, 2009

Nice tip Goyal 😉
0

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>

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

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

vik001ind

@vik001ind-rOaCSy • Dec 21, 2009

quite informative!
0