images-maps

**ravindarjobs** · 11-04-2007, 06:30 AM

hello friends,
i visited the website http://milliondollarhomepage.com
i was astonished how he inserted images in specific region.
they have used maps. but how do we incorporate images in to that places.
what are the steps followed?
does any body know?

Thank you

**coothead** · 11-05-2007, 12:12 PM

Hi there ravindarjobs,

and a warm welcome to these forums.

You start with a grid as shown in the attachment, but 100 x 100 instead of 10 x 10.
This would give you a grid of 1000 pixels by 1000 pixels.
The images are sized to multiples of ten pixels.
The smallest image possible would be 10 pixels by 10 pixels - ( one small square).
Each image would then be positioned absolutely in its required place on the grid.
This would be your master copy.
Now use Print Screen to copy the grid with the positioned image.
Paste into an image editor and save as a .jpg.
This would be the the image that would be used for the image map.
As each image is added to the grid, add the appropriate area code to the map.
Have a beer at this point.
Repeat the process until the grid is completely filled or you are totally inebriated.

I hope that this helps.

**ravindarjobs** · 11-05-2007, 01:17 PM

Many thanks friend.
i have been waiting for the reply with my eyes opened.
now i got a clear idea of the procedure followed.

initially how do we create grids?
using an image editor?
if so can you give me one example?

Thank you.

**coothead** · 11-05-2007, 03:14 PM

Hi there ravindarjobs,

check ou the attachment for a 100x100 - (1000px by 1000px) - grid .gif.
It may look a little odd when first viewed but when zoomed it will look OK

**coothead** · 11-05-2007, 03:48 PM

Hi there ravindarjobs,

I forgot to mention that it took 10,001 divs to create that grid.

**ravindarjobs** · 11-05-2007, 09:50 PM

oh many thanks frnd.

also one more doubt,
can we divide an image into grids?
i.e i want the grid lines appear on the image.
can we put grid lines on an image?

**ravindarjobs** · 11-05-2007, 10:55 PM

dear friend,
just for a test i have run this code in IE6.
it ran well.
but when i open the page with Firefox browser,
it does,nt show any image except a small dot.

<html>
<head>
<title>Untitled</title>
</head>

<body>
<img src="E:\images\grid.gif" align=center>

</body>
</html>

**ravindarjobs** · 11-06-2007, 05:25 AM

dear friend,

Can we have an image divided into grids?
Thank you

**coothead** · 11-06-2007, 10:13 AM

Hi there ravindarjobs,

Can we have an image divided into grids?

Do you mean something like this example...

http://mysite.orange.co.uk/azygous/bits.html

Have you now resolved your problem with Firefox?
If you say that the image displays OK in IE6, then I can see no reason why it you should not display OK in Firefox also.

**ravindarjobs** · 11-06-2007, 12:43 PM

friend,
i am happy that you understood my requirement easily. Thank you.

Yes that link exactly shows my requirement.
but we should be able to define the size of each piece and distance between each piece.

how can we do that?

Firefox did not run that code well. it did not display the image.

**ravindarjobs** · 11-06-2007, 01:40 PM

dear friend,
i have tried my sample code with Opera too.
but Opera also did not render image.
But ony IE rendered the image?

whats wrong in my code?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
</head>

<body>

<img src="E:\images\u.jpg" height=1000 width=1000 align=center usemap="#map1">
<map id="map1" name="map1">
<area shape ="rect" color=red coords =20,10,10"
href ="http:\\yahoo.com" target ="_blank"
alt="Sun" />
</map>
</body>
</html>

Thank you

**coothead** · 11-06-2007, 02:56 PM

Hi there ravindarjobs,

But we should be able to define the size of each piece and distance between each piece.
How can we do that?

This would be done in the CSS...

Code:

#container {
    width:550px;  /*this is the total width of the pieces, borders and margins*/
    margin:4px auto;
 }   
.bits { 
    width:100px;
    height:100px;   /*these are the piece dimensions*/
    overflow:hidden;
    border:1px solid #fff;
    float:left;
    display:inline;
    margin:4px;  /*this is half the margin between the pieces*/
 }

I have tried my sample code with Opera too.
but Opera also did not render image.

I tested this code - (using my grid image, of course) - and it worked OK in IE 6, IE 7 Firefox 2 and Opera 9....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#grid {
    text-align:center;
 }
#grid img {
    width:1000px;
    height:1000px;
    border:0 solid;
 }
</style>

</head>
<body>

<div id="grid">
<img src="E:\images\u.jpg" usemap="#map1" alt="">
<map id="map1" name="map1">
<area shape ="rect" coords="20,10,30,20" href="http:\\yahoo.com" target="_blank" alt="Sun">
</map>
</div>

</body>
</html>

**ravindarjobs** · 11-07-2007, 09:00 AM

hi friend,
ok i will write css code.
thank you
also i will test my previous code again in firefox and opera.

**ravindarjobs** · 11-08-2007, 08:21 AM

hi friend,
i am panic.
just for a test i have run the following code in firefox and IE6. Even this small code is not running well in firefox but runs well in IE6.
<html>
<head><title>hello</title>
</head>
<body>
<center>
<Img src="C:\Images\u.jpg"">
</body>
</center>
</html>

what could be the problem?

**ravindarjobs** · 11-08-2007, 11:35 PM

sorry typing mistake in previous post.
the correct code is
<html>
<head><title>hello</title>
</head>
<body>
<center>
<Img src="C:\Images\u.jpg">
</center>
</body>

</html>

Thread: images-maps

Thread Tools

Related

image maps..what should i target links to?? Forum: HTML Forum

image maps and Firefox Forum: HTML Forum

CSS and Image Maps Forum: CSS Forum

images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Re: images-maps

Tags for this Thread